fix: ellipsify MainMenu and CommandPalette items (#9743)

* fix: ellipsify MainMenu and CommandPalette items

* fix lint

packages/excalidraw/components/CommandPalette/CommandPalette.scss

@@ -108,6 +108,7 @@ $verticalBreakpoint: 861px;
           display: flex;
           align-items: center;
           gap: 0.25rem;
+          overflow: hidden;
         }
       }
 

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -59,6 +59,8 @@ import { useStableCallback } from "../../hooks/useStableCallback";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
 import { useStable } from "../../hooks/useStable";
 
+import { Ellipsify } from "../Ellipsify";
+
 import * as defaultItems from "./defaultCommandPaletteItems";
 
 import "./CommandPalette.scss";
@@ -964,7 +966,7 @@ const CommandItem = ({
             }
           />
         )}
-        {command.label}
+        <Ellipsify>{command.label}</Ellipsify>
       </div>
       {showShortcut && command.shortcut && (
         <CommandShortcutHint shortcut={command.shortcut} />

packages/excalidraw/components/Ellipsify.tsx

@@ -0,0 +1,18 @@
+export const Ellipsify = ({
+  children,
+  ...rest
+}: { children: React.ReactNode } & React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      {...rest}
+      style={{
+        textOverflow: "ellipsis",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        ...rest.style,
+      }}
+    >
+      {children}
+    </span>
+  );
+};

packages/excalidraw/components/InlineIcon.tsx

@@ -7,6 +7,7 @@ export const InlineIcon = ({ icon }: { icon: React.ReactNode }) => {
         display: "inline-block",
         lineHeight: 0,
         verticalAlign: "middle",
+        flex: "0 0 auto",
       }}
     >
       {icon}

packages/excalidraw/components/dropdownMenu/DropdownMenu.scss

@@ -19,6 +19,8 @@
         border-radius: var(--border-radius-lg);
         position: relative;
         transition: box-shadow 0.5s ease-in-out;
+        display: flex;
+        flex-direction: column;
 
         &.zen-mode {
           box-shadow: none;
@@ -100,6 +102,7 @@
       align-items: center;
       cursor: pointer;
       border-radius: var(--border-radius-md);
+      flex: 1 0 auto;
 
       @media screen and (min-width: 1921px) {
         height: 2.25rem;

packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx

@@ -1,5 +1,7 @@
 import { useDevice } from "../App";
 
+import { Ellipsify } from "../Ellipsify";
+
 import type { JSX } from "react";
 
 const MenuItemContent = ({
@@ -18,7 +20,7 @@ const MenuItemContent = ({
     <>
       {icon && <div className="dropdown-menu-item__icon">{icon}</div>}
       <div style={textStyle} className="dropdown-menu-item__text">
-        {children}
+        <Ellipsify>{children}</Ellipsify>
       </div>
       {shortcut && !device.editor.isMobile && (
         <div className="dropdown-menu-item__shortcut">{shortcut}</div>

packages/excalidraw/index.tsx

@@ -281,6 +281,7 @@ export { Sidebar } from "./components/Sidebar/Sidebar";
 export { Button } from "./components/Button";
 export { Footer };
 export { MainMenu };
+export { Ellipsify } from "./components/Ellipsify";
 export { useDevice } from "./components/App";
 export { WelcomeScreen };
 export { LiveCollaborationTrigger };

packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap

@@ -14,8 +14,12 @@ exports[`<Excalidraw/> > <MainMenu/> > should render main menu with host menu it
     >
       <div
         class="dropdown-menu-item__text"
+      >
+        <span
+          style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
         >
           Click me
+        </span>
       </div>
     </button>
     <a
@@ -26,8 +30,12 @@ exports[`<Excalidraw/> > <MainMenu/> > should render main menu with host menu it
     >
       <div
         class="dropdown-menu-item__text"
+      >
+        <span
+          style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
         >
           Excalidraw blog
+        </span>
       </div>
     </a>
     <div
@@ -87,8 +95,12 @@ exports[`<Excalidraw/> > <MainMenu/> > should render main menu with host menu it
       </div>
       <div
         class="dropdown-menu-item__text"
+      >
+        <span
+          style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
         >
           Help
+        </span>
       </div>
       <div
         class="dropdown-menu-item__shortcut"
@@ -137,8 +149,12 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
       </div>
       <div
         class="dropdown-menu-item__text"
+      >
+        <span
+          style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
         >
           Open
+        </span>
       </div>
       <div
         class="dropdown-menu-item__shortcut"
@@ -174,8 +190,12 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
       </div>
       <div
         class="dropdown-menu-item__text"
+      >
+        <span
+          style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
         >
           Save to...
+        </span>
       </div>
     </button>
     <button
@@ -230,8 +250,12 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
       </div>
       <div
         class="dropdown-menu-item__text"
+      >
+        <span
+          style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
         >
           Export image...
+        </span>
       </div>
       <div
         class="dropdown-menu-item__shortcut"
@@ -279,8 +303,12 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
       </div>
       <div
         class="dropdown-menu-item__text"
+      >
+        <span
+          style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
         >
           Find on canvas
+        </span>
       </div>
       <div
         class="dropdown-menu-item__shortcut"
@@ -336,8 +364,12 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
       </div>
       <div
         class="dropdown-menu-item__text"
+      >
+        <span
+          style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
         >
           Help
+        </span>
       </div>
       <div
         class="dropdown-menu-item__shortcut"
@@ -373,8 +405,12 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
       </div>
       <div
         class="dropdown-menu-item__text"
+      >
+        <span
+          style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
         >
           Reset the canvas
+        </span>
       </div>
     </button>
     <div
@@ -418,8 +454,12 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
         </div>
         <div
           class="dropdown-menu-item__text"
+        >
+          <span
+            style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
           >
             GitHub
+          </span>
         </div>
       </a>
       <a
@@ -464,8 +504,12 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
         </div>
         <div
           class="dropdown-menu-item__text"
+        >
+          <span
+            style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
           >
             Follow us
+          </span>
         </div>
       </a>
       <a
@@ -504,8 +548,12 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
         </div>
         <div
           class="dropdown-menu-item__text"
+        >
+          <span
+            style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
           >
             Discord chat
+          </span>
         </div>
       </a>
     </div>
@@ -541,8 +589,12 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
       </div>
       <div
         class="dropdown-menu-item__text"
+      >
+        <span
+          style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"
         >
           Dark mode
+        </span>
       </div>
       <div
         class="dropdown-menu-item__shortcut"