reuse panel width everywhere

apps/designer/app/designer/designer.tsx

@@ -41,6 +41,7 @@ import {
 } from "~/shared/nano-states";
 import { useClientSettings } from "./shared/client-settings";
 import { Navigator } from "./features/sidebar-left";
+import { PANEL_WIDTH } from "./shared/constants";
 
 export const links = () => {
   return [
@@ -137,8 +138,6 @@ type ChromeWrapperProps = {
   isPreviewMode: boolean;
 };
 
-const PANEL_WIDTH = "240px";
-
 const getChromeLayout = ({
   isPreviewMode,
   navigatorLayout,
@@ -159,7 +158,7 @@ const getChromeLayout = ({
 
   if (navigatorLayout === "detached") {
     return {
-      gridTemplateColumns: `auto ${PANEL_WIDTH} 1fr ${PANEL_WIDTH}`,
+      gridTemplateColumns: `auto ${PANEL_WIDTH}px 1fr ${PANEL_WIDTH}px`,
       gridTemplateAreas: `
             "header header header header"
             "sidebar navigator main inspector"
@@ -169,7 +168,7 @@ const getChromeLayout = ({
   }
 
   return {
-    gridTemplateColumns: `auto 1fr ${PANEL_WIDTH}`,
+    gridTemplateColumns: `auto 1fr ${PANEL_WIDTH}px`,
     gridTemplateAreas: `
           "header header header"
           "sidebar main inspector"

apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx

@@ -13,6 +13,7 @@ import { panels } from "./panels";
 import type { TabName } from "./types";
 import { isFeatureEnabled } from "~/shared/feature-flags";
 import { useClientSettings } from "~/designer/shared/client-settings";
+import { PANEL_WIDTH } from "~/designer/shared/constants";
 
 const none = { TabContent: () => null };
 
@@ -66,6 +67,7 @@ export const SidebarLeft = ({ publish, assets }: SidebarLeftProps) => {
         <SidebarTabsContent
           value={activeTab === "none" ? "" : activeTab}
           css={{
+            width: PANEL_WIDTH,
             // We need the node to be rendered but hidden
             // to keep receiving the drag events.
             visibility:

apps/designer/app/designer/shared/constants/index.ts

@@ -0,0 +1 @@
+export const PANEL_WIDTH = 240;

packages/design-system/src/components/sidebar-tabs.tsx

@@ -67,7 +67,6 @@ export const SidebarTabsContent = styled(TabsPrimitive.Content, {
   position: "absolute",
   top: 0,
   left: "100%",
-  width: 240,
   height: "100%",
   bc: "$loContrast",
   outline: "none",