Fix dialogs

Author: TrySound

apps/builder/app/builder/features/project-settings/project-settings.tsx

@@ -11,6 +11,7 @@ import {
   List,
   ListItem,
   Text,
+  rawTheme,
 } from "@webstudio-is/design-system";
 import {
   $openProjectSettings,
@@ -53,11 +54,10 @@ export const ProjectSettingsView = ({
       onOpenChange={onOpenChange}
     >
       <DialogContent
-        css={{
-          width: `calc(${leftPanelWidth} + ${rightPanelWidth})`,
-          maxWidth: "none",
-          height: theme.spacing[35],
-        }}
+        width={
+          Number.parseInt(leftPanelWidth) + Number.parseInt(rightPanelWidth)
+        }
+        height={Number.parseInt(rawTheme.spacing[35])}
       >
         <fieldset style={{ display: "contents" }} disabled={!isDesignMode}>
           <Flex grow>

apps/builder/app/builder/features/project-settings/utils.ts

@@ -1,8 +1,8 @@
-import { theme, type CSS } from "@webstudio-is/design-system";
+import { rawTheme, theme, type CSS } from "@webstudio-is/design-system";
 import { getPagePath, type Pages } from "@webstudio-is/sdk";
 
-export const leftPanelWidth = theme.spacing[26];
-export const rightPanelWidth = theme.spacing[35];
+export const leftPanelWidth = rawTheme.spacing[26];
+export const rightPanelWidth = rawTheme.spacing[35];
 export const sectionSpacing: CSS = {
   paddingInline: theme.panel.paddingInline,
 };

packages/design-system/src/components/dialog.tsx

@@ -174,12 +174,21 @@ const useDraggable = ({
           width: "calc(100vw - 40px)",
           height: "calc(100vh - 40px)",
         }
-      : {
-          top: `max(20px, calc(50% - ${height ? height / 2 : 0}px))`,
-          left: `max(20px, calc(50% - ${width ? width / 2 : 0}px))`,
-          width,
-          height,
-        };
+      : !width || !height
+        ? {
+            inset: 0,
+            margin: "auto",
+            width,
+            height,
+          }
+        : {
+            top: `max(20px, calc(50% - ${height / 2}px))`,
+            bottom: `max(20px, calc(50% - ${height / 2}px))`,
+            left: `max(20px, calc(50% - ${width / 2}px))`,
+            right: `max(20px, calc(50% - ${width / 2}px))`,
+            width,
+            height,
+          };
 
     if (minWidth !== undefined) {
       style.minWidth = minWidth;
@@ -191,9 +200,13 @@ const useDraggable = ({
     if (isMaximized === false) {
       if (x !== undefined) {
         style.left = x;
+        style.right = "auto";
+        style.margin = 0;
       }
       if (y !== undefined) {
         style.top = y;
+        style.bottom = "auto";
+        style.margin = 0;
       }
     }
     return style;
@@ -438,6 +451,7 @@ const overlayStyle = css({
 const contentStyle = css(panelStyle, {
   position: "fixed",
   width: "min-content",
+  height: "min-content",
   minWidth: theme.sizes.sidebarWidth,
   minHeight: theme.spacing[22],
   maxWidth: `calc(100vw - ${theme.spacing[15]})`,