From d1112bbf4f39617e2e20c77e68eb6cec643b11e9 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Sun, 2 Mar 2025 18:24:20 +0100
Subject: [PATCH] fix: docked sidebar width (#9213)

---
 packages/excalidraw/components/App.tsx             | 1 +
 packages/excalidraw/components/LayerUI.tsx         | 2 +-
 packages/excalidraw/components/Sidebar/Sidebar.tsx | 3 ---
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 15dabb5fa..8eb2a9e2c 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -1550,6 +1550,7 @@ class App extends React.Component<AppProps, AppState> {
           ["--ui-pointerEvents" as any]: shouldBlockPointerEvents
             ? POINTER_EVENTS.disabled
             : POINTER_EVENTS.enabled,
+          ["--right-sidebar-width" as any]: "302px",
         }}
         ref={this.excalidrawContainerRef}
         onDrop={this.handleAppOnDrop}
diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx
index ecd032bcd..11914d09a 100644
--- a/packages/excalidraw/components/LayerUI.tsx
+++ b/packages/excalidraw/components/LayerUI.tsx
@@ -526,7 +526,7 @@ const LayerUI = ({
               appState.openSidebar &&
               isSidebarDocked &&
               device.editor.canFitSidebar
-                ? { width: `calc(100% - var(--right-sidebar-width)px)` }
+                ? { width: `calc(100% - var(--right-sidebar-width))` }
                 : {}
             }
           >
diff --git a/packages/excalidraw/components/Sidebar/Sidebar.tsx b/packages/excalidraw/components/Sidebar/Sidebar.tsx
index ad6c9fe41..7c747d2f4 100644
--- a/packages/excalidraw/components/Sidebar/Sidebar.tsx
+++ b/packages/excalidraw/components/Sidebar/Sidebar.tsx
@@ -136,9 +136,6 @@ export const SidebarInner = forwardRef(
       <Island
         {...rest}
         className={clsx("sidebar", { "sidebar--docked": docked }, className)}
-        style={{
-          "--right-sidebar-width": "302px",
-        }}
         ref={islandRef}
       >
         <SidebarPropsContext.Provider value={headerPropsRef.current}>