diff --git a/apps/web/src/dashboard/components/DeFiStakingItem.tsx b/apps/web/src/dashboard/components/DeFiStakingItem.tsx index b581422e..bfc6c950 100644 --- 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 = ({ {/* 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')} {shortenAddress(protocol.ind)} @@ -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 index f30c57dd..dbcbb7ad 100644 --- 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 = ({ return ( = ({ 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;