diff --git a/src/blocks/tabs/Tabs.styled.ts b/src/blocks/tabs/Tabs.styled.ts index e577d9fd08..cf9c0649fc 100644 --- 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 index 3b9ecd1d88..53b8b6f9a3 100644 --- a/src/modules/dashboard/Dashboard.tsx +++ b/src/modules/dashboard/Dashboard.tsx @@ -19,10 +19,10 @@ const Dashboard: FC = () => { = () => { display="flex" flexDirection="column" gap="spacing-md" - width={{ mm: '340px' }} >