fix(Dialog): set correct minimum dialog size

Author: tenphi

.changeset/silver-dots-sleep.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix minimum dialog size.

src/components/GlobalStyles.tsx

@@ -166,7 +166,7 @@ const GlobalStylesElement = createGlobalStyle<GlobalStylesElementProps>`
   }
 
   .cube-notification-container {
-    min-width: 288px;
+    min-width: var(--min-dialog-size);
     max-width: 340px;
     width: calc(100vw - 32px);
     position: fixed;

src/components/organisms/Modal/Modal.tsx

@@ -209,7 +209,7 @@ export function Modal(allProps: CubeModalProps) {
           shadow={true}
           border={false}
           radius="1x"
-          width={`288px (100% - 32px) ${
+          width={`@min-dialog-size (100% - 32px) ${
             typeof width === 'number' ? `${width}px` : width || '360px'
           }`}
           style={{ textAlign: 'left' }}

src/components/overlays/Dialog/Dialog.tsx

@@ -42,7 +42,7 @@ const DialogElement = tasty({
     placeItems: 'stretch',
     placeContent: 'stretch',
     width: {
-      '': '288px @dialog-size 90vw',
+      '': '@min-dialog-size @dialog-size 90vw',
       '[data-type="fullscreen"]': '90vw 90vw',
       '[data-type="fullscreenTakeover"]': '100vw 100vw',
       '[data-type="panel"]': 'auto',
@@ -287,7 +287,7 @@ const DialogContent = forwardRef(function DialogContent(
       {...dialogProps}
       tabIndex={undefined}
       mods={{ dismissable: isDismissable }}
-      style={{ '--dialog-size': `${sizePxMap[size] || 288}px` }}
+      style={{ '--dialog-size': `${sizePxMap[size] || sizePxMap.small}px` }}
       data-type={type}
       data-size={size}
     >

src/components/overlays/Modal/Modal.tsx

@@ -52,7 +52,7 @@ const ModalElement = tasty({
       '[data-type="panel"]': 'auto',
     },
     width: {
-      '': '288px 90vw',
+      '': '@min-dialog-size 90vw',
       '[data-type="panel"]': 'auto',
     },
     pointerEvents: 'none',

src/components/overlays/Modal/Tray.tsx

@@ -34,7 +34,7 @@ const TrayElement = tasty({
     },
     zIndex: 10,
     height: 'max 90dvh',
-    width: '288px 90vw',
+    width: '@min-dialog-size 90vw',
     pointerEvents: 'auto',
     transition:
       'transform .25s ease-in-out, opacity .25s linear, visibility 0ms linear',

src/tokens.ts

@@ -48,6 +48,7 @@ const TOKENS = {
   'leaf-sharp-radius': '0px',
   'fade-width': '32px',
   transition: '80ms',
+  'min-dialog-size': 'min(288px, calc(100vw - (2 * var(--gap))))',
   'clear-color': 'transparent',
   'border-color': color('dark', 0.1),
   'border-opaque-color': 'rgb(227 227 233)',