feat: updated tab scrolling styles (#436)

clevercanary · Nov 10, 2023 · 9381be5 · 9381be5
1 parent 1646d5f
commit 9381be5
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/packages/data-explorer-ui/src/components/common/Tabs/tabs.styles.ts b/packages/data-explorer-ui/src/components/common/Tabs/tabs.styles.ts
@@ -12,6 +12,7 @@ export const TabScrollFuzz = styled.span<Props>`
   opacity: 1;
   position: absolute;
   top: 0;
+  transition: opacity 300ms ease-in;
   width: 56px;
   z-index: 1;
 

diff --git a/packages/data-explorer-ui/src/components/common/Tabs/tabs.tsx b/packages/data-explorer-ui/src/components/common/Tabs/tabs.tsx
@@ -33,6 +33,7 @@ export const Tabs = ({
 }: TabsProps): JSX.Element => {
   return (
     <MTabs
+      allowScrollButtonsMobile
       className={className}
       onChange={(_, tabValue): void => onTabChange(tabValue)}
       ScrollButtonComponent={TabScrollFuzz} // Utilizing MuiTabScrollButton to show/hide scroll fuzz.

diff --git a/packages/data-explorer-ui/src/theme/common/components.ts b/packages/data-explorer-ui/src/theme/common/components.ts
@@ -1414,10 +1414,11 @@ export const MuiTabs = (theme: Theme): Components["MuiTabs"] => {
         position: "relative", // Positions scroll fuzz.
       },
       scroller: {
-        margin: "0 16px",
+        margin: 0,
+        padding: "0 8px",
         // eslint-disable-next-line sort-keys -- disabling key order for readability
         [tabletUp]: {
-          margin: 0,
+          padding: 0,
         },
       },
     },