[web] Better mobile responsiveness for DetailModal & Add support fo…

…r Osmosis Pool IDs
0xinevitable · Feb 13, 2023 · 8bbedb1 · 8bbedb1
1 parent 12558ad
commit 8bbedb1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/apps/web/src/dashboard/components/DeFiStakingItem.tsx b/apps/web/src/dashboard/components/DeFiStakingItem.tsx
@@ -124,10 +124,9 @@ export const DeFiStakingItem: React.FC<DeFiStakingItemProps> = ({
           <AccountItem>
             <span className="field">
               {/* FIXME: Exception for Osmosis */}
-              {/* {protocol.type === OsmosisDeFiType.OSMOSIS_GAMM_LP
+              {typeof info.name !== 'string' && info.name.en.endsWith('Osmosis LPs')
                 ? t('Pool ID')
-                : t('Rep Contract')} */}
-              {t('Rep Contract')}
+                : t('Rep Contract')}
             </span>
             <span >
               <InlineBadge>{shortenAddress(protocol.ind)}</InlineBadge>
@@ -268,6 +267,11 @@ const Header = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
+
+  @media (max-width: ${Breakpoints.Mobile}px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 `;
 const HeaderTitle = styled.div`
   display: flex;
@@ -283,6 +287,12 @@ const Name = styled.h5`
   font-size: 18px;
   font-weight: 600;
 
+  @media (max-width: ${Breakpoints.Mobile}px) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   &:lang(ko) {
     letter-spacing: -0.8px;
   }
@@ -351,6 +361,12 @@ const AccountInfo = styled.div`
   display: flex;
   align-items: center;
   gap: 16px;
+
+  @media (max-width: ${Breakpoints.Mobile}px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
 `;
 const AccountItem = styled.div`
   display: flex;

diff --git a/apps/web/src/dashboard/components/DetailModal.tsx b/apps/web/src/dashboard/components/DetailModal.tsx
@@ -99,6 +99,7 @@ export const DetailModal: React.FC<Props> = ({
 
   return (
     <OverlayWrapper
+      className="wrapper"
       visible={isVisible}
       onDismiss={onDismiss}
       transition={{ ease: 'linear' }}
@@ -330,15 +331,17 @@ export const DetailModal: React.FC<Props> = ({
 export default DetailModal;
 
 const OverlayWrapper = styled(Modal)`
-  .modal-container {
-    margin-top: 52px;
+  &.wrapper {
+    z-index: 90;
+  }
 
+  .modal-container {
     padding: 16px;
     max-width: 800px;
     height: fit-content;
     width: 95vw;
 
-    max-height: calc(100vh - 64px - 84px);
+    max-height: 85vh;
     overflow: scroll;
 
     display: flex;