Truncate story name on mobile

storybookjs · Oct 4, 2023 · 2c52f49 · 2c52f49
1 parent c6760e7
commit 2c52f49
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx
@@ -45,7 +45,7 @@ export const MobileNavigation: FC<MobileNavigationProps> = ({ menu, panel, showP
       <MobileAddonsDrawer>{panel}</MobileAddonsDrawer>
       <Button onClick={() => setMobileMenuOpen(!isMobileMenuOpen)} title="Open navigation menu">
         <Icons icon="menu" />
-        {fullStoryName}
+        <p>{fullStoryName}</p>
       </Button>
       {showPanel && (
         <DrawerIconButton onClick={() => setMobilePanelOpen(true)} title="Open addon panel">
@@ -86,4 +86,18 @@ const Button = styled.button(({ theme }) => ({
   fontSize: `${theme.typography.size.s2 - 1}px`,
   padding: '0 7px',
   fontWeight: theme.typography.weight.bold,
+  WebkitLineClamp: 1,
+
+  '> svg': {
+    width: 14,
+    height: 14,
+    flexShrink: 0,
+  },
+
+  '> p': {
+    display: '-webkit-box',
+    WebkitLineClamp: 1,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+  },
 }));