Fixed dashboard mobile view (#1891)

* fixed dashboard mobile view * fixed dashboard mobile view * fixed review comments
push-protocol · Oct 3, 2024 · b87a7ea · b87a7ea
1 parent 4b633d6
commit b87a7ea
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/blocks/tabs/Tabs.styled.ts b/src/blocks/tabs/Tabs.styled.ts
@@ -1,6 +1,7 @@
 import { Tabs as ReachTabs, TabList, Tab } from '@reach/tabs';
 import { textVariants } from '../text';
 import styled from 'styled-components';
+import { deviceMediaQ } from '../theme';
 
 export const StyledFillTabs = styled(ReachTabs)`
   display: flex;
@@ -12,6 +13,9 @@ export const StyledFillTabList = styled(TabList)`
   overflow: auto hidden;
   display: flex;
   width: fit-content;
+  @media${deviceMediaQ.mobileL} {
+    width: -webkit-fill-available;
+  }
   padding: var(--spacing-xxxs);
   background-color: var(--surface-secondary);
   border-radius: var(--radius-sm);

diff --git a/src/modules/dashboard/Dashboard.tsx b/src/modules/dashboard/Dashboard.tsx
@@ -19,10 +19,10 @@ const Dashboard: FC<DashboardProps> = () => {
     <Box
       flexDirection="column"
       display="flex"
-      margin={{ initial: 'spacing-sm spacing-xl spacing-sm spacing-xl', ml: 'spacing-sm', lp: 'spacing-sm' }}
+      width={{ initial: '100%', ml: '357px' }}
+      margin="spacing-sm spacing-none"
       gap={{ ml: 'spacing-md' }}
       height="100%"
-      width="auto"
     >
       <DashboardHeader
         showSubHeader={showSubHeader}
@@ -34,7 +34,6 @@ const Dashboard: FC<DashboardProps> = () => {
         display="flex"
         flexDirection="column"
         gap="spacing-md"
-        width={{ mm: '340px' }}
       >
         <FeaturedChannels />
         <ChannelVariantsSection />