From 927f83b57b99d925756170c5fc71c27fa402f586 Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Mon, 25 Aug 2025 23:12:51 +1000
Subject: [PATCH] fix library and share btns getting hidden in smaller tablet
 widths

---
 packages/excalidraw/components/LayerUI.scss |  4 ++
 packages/excalidraw/components/LayerUI.tsx  | 48 +++++++++++++++++----
 packages/excalidraw/components/Toolbar.scss | 10 +++++
 packages/excalidraw/css/styles.scss         | 10 ++++-
 4 files changed, 63 insertions(+), 9 deletions(-)

diff --git a/packages/excalidraw/components/LayerUI.scss b/packages/excalidraw/components/LayerUI.scss
index 36153d72b5..5c202a0679 100644
--- a/packages/excalidraw/components/LayerUI.scss
+++ b/packages/excalidraw/components/LayerUI.scss
@@ -24,6 +24,10 @@
       gap: 0.75rem;
       pointer-events: none !important;
 
+      &--compact {
+        gap: 0.5rem;
+      }
+
       & > * {
         pointer-events: var(--ui-pointerEvents);
       }
diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx
index 5c4c3817f0..f705061021 100644
--- a/packages/excalidraw/components/LayerUI.tsx
+++ b/packages/excalidraw/components/LayerUI.tsx
@@ -161,6 +161,24 @@ const LayerUI = ({
   const device = useDevice();
   const tunnels = useInitializeTunnels();
 
+  const spacing = device.editor.showCompactSidebar
+    ? {
+        menuTopGap: 4,
+        toolbarColGap: 4,
+        toolbarRowGap: 1,
+        toolbarInnerRowGap: 1,
+        islandPadding: 1,
+        collabMarginLeft: 8,
+      }
+    : {
+        menuTopGap: 6,
+        toolbarColGap: 4,
+        toolbarRowGap: 1,
+        toolbarInnerRowGap: 1,
+        islandPadding: 1,
+        collabMarginLeft: 8,
+      };
+
   const TunnelsJotaiProvider = tunnels.tunnelsJotai.Provider;
 
   const [eyeDropperState, setEyeDropperState] = useAtom(activeEyeDropperAtom);
@@ -281,10 +299,20 @@ const LayerUI = ({
     return (
       <FixedSideContainer side="top">
         <div className="App-menu App-menu_top">
-          <Stack.Col gap={6} className={clsx("App-menu_top__left")}>
+          <Stack.Col
+            gap={spacing.menuTopGap}
+            className={clsx("App-menu_top__left")}
+          >
             {renderCanvasActions()}
-            {shouldRenderSelectedShapeActions &&
-              renderSelectedShapeActions(device.editor.showCompactSidebar)}
+            <div
+              className={clsx("selected-shape-actions-container", {
+                "selected-shape-actions-container--compact":
+                  device.editor.showCompactSidebar,
+              })}
+            >
+              {shouldRenderSelectedShapeActions &&
+                renderSelectedShapeActions(device.editor.showCompactSidebar)}
+            </div>
           </Stack.Col>
           {!appState.viewModeEnabled &&
             appState.openDialog?.name !== "elementLinkSelector" && (
@@ -294,17 +322,19 @@ const LayerUI = ({
                     {renderWelcomeScreen && (
                       <tunnels.WelcomeScreenToolbarHintTunnel.Out />
                     )}
-                    <Stack.Col gap={4} align="start">
+                    <Stack.Col gap={spacing.toolbarColGap} align="start">
                       <Stack.Row
-                        gap={1}
+                        gap={spacing.toolbarRowGap}
                         className={clsx("App-toolbar-container", {
                           "zen-mode": appState.zenModeEnabled,
                         })}
                       >
                         <Island
-                          padding={1}
+                          padding={spacing.islandPadding}
                           className={clsx("App-toolbar", {
                             "zen-mode": appState.zenModeEnabled,
+                            "App-toolbar--compact":
+                              device.editor.showCompactSidebar,
                           })}
                         >
                           <HintViewer
@@ -314,7 +344,7 @@ const LayerUI = ({
                             app={app}
                           />
                           {heading}
-                          <Stack.Row gap={1}>
+                          <Stack.Row gap={spacing.toolbarInnerRowGap}>
                             <PenModeButton
                               zenModeEnabled={appState.zenModeEnabled}
                               checked={appState.penMode}
@@ -348,7 +378,7 @@ const LayerUI = ({
                         {isCollaborating && (
                           <Island
                             style={{
-                              marginLeft: 8,
+                              marginLeft: spacing.collabMarginLeft,
                               alignSelf: "center",
                               height: "fit-content",
                             }}
@@ -376,6 +406,8 @@ const LayerUI = ({
               "layer-ui__wrapper__top-right zen-mode-transition",
               {
                 "transition-right": appState.zenModeEnabled,
+                "layer-ui__wrapper__top-right--compact":
+                  device.editor.showCompactSidebar,
               },
             )}
           >
diff --git a/packages/excalidraw/components/Toolbar.scss b/packages/excalidraw/components/Toolbar.scss
index 1565120aca..14c4cc174b 100644
--- a/packages/excalidraw/components/Toolbar.scss
+++ b/packages/excalidraw/components/Toolbar.scss
@@ -10,6 +10,16 @@
       }
     }
 
+    &--compact {
+      .ToolIcon__keybinding {
+        display: none;
+      }
+
+      .App-toolbar__divider {
+        margin: 0;
+      }
+    }
+
     &__divider {
       width: 1px;
       height: 1.5rem;
diff --git a/packages/excalidraw/css/styles.scss b/packages/excalidraw/css/styles.scss
index f8486083eb..2169696ae0 100644
--- a/packages/excalidraw/css/styles.scss
+++ b/packages/excalidraw/css/styles.scss
@@ -317,7 +317,7 @@ body.excalidraw-cursor-resize * {
 
   .App-menu_top {
     grid-template-columns: 1fr 2fr 1fr;
-    grid-gap: 2rem;
+    grid-gap: 1rem;
     align-items: flex-start;
     cursor: default;
     pointer-events: none !important;
@@ -336,6 +336,14 @@ body.excalidraw-cursor-resize * {
     justify-self: flex-start;
   }
 
+  .selected-shape-actions-container {
+    width: fit-content;
+
+    &--compact {
+      min-width: 48px;
+    }
+  }
+
   .App-menu_top > *:last-child {
     justify-self: flex-end;
   }