From ebb5e57645fcbd681451561f3da51fc753dbfc08 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sun, 7 Aug 2022 01:46:16 +0200
Subject: [PATCH] reuse panel width everywhere

---
 apps/designer/app/designer/designer.tsx                    | 7 +++----
 .../app/designer/features/sidebar-left/sidebar-left.tsx    | 2 ++
 apps/designer/app/designer/shared/constants/index.ts       | 1 +
 packages/design-system/src/components/sidebar-tabs.tsx     | 1 -
 4 files changed, 6 insertions(+), 5 deletions(-)
 create mode 100644 apps/designer/app/designer/shared/constants/index.ts

diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx
index 290c935224..5062ac87c0 100644
--- a/apps/designer/app/designer/designer.tsx
+++ b/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"
diff --git a/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx b/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx
index 79d70f3de3..638afb3477 100644
--- a/apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx
+++ b/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:
diff --git a/apps/designer/app/designer/shared/constants/index.ts b/apps/designer/app/designer/shared/constants/index.ts
new file mode 100644
index 0000000000..c86c2c09ea
--- /dev/null
+++ b/apps/designer/app/designer/shared/constants/index.ts
@@ -0,0 +1 @@
+export const PANEL_WIDTH = 240;
diff --git a/packages/design-system/src/components/sidebar-tabs.tsx b/packages/design-system/src/components/sidebar-tabs.tsx
index 84a1357df3..bf2d2ac6b5 100644
--- a/packages/design-system/src/components/sidebar-tabs.tsx
+++ b/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",