refactor: clean up dialog styling

packages/danaus/src/web/primitives/dialog-actions.tsx

···
 
 const root = cva({
 	base: [
-		'box-border pt-2',
-		'h-fit',
-		// grid position: row 3
-		'row-start-3 row-end-3',
-		// mobile-first: stacked on mobile, inline on larger
-		'flex flex-col gap-2 justify-self-stretch',
-		'sm:flex-row sm:justify-self-auto',
+		'pt-2',
+		// stacked on small containers, inline row on larger
+		'flex flex-col gap-2',
+		'@sm/dialog-body:flex-row @sm/dialog-body:items-center',
 	],
 	variants: {
 		position: {
-			start: ['col-start-1 col-end-4 row-start-3', 'sm:col-end-2 sm:justify-self-start'],
-			end: ['col-start-1 col-end-4 row-start-4', 'sm:col-start-2 sm:row-start-3 sm:justify-self-end'],
-		},
-		fluid: {
-			true: [],
+			start: '@sm/dialog-body:justify-start',
+			end: '@sm/dialog-body:justify-end',
 		},
 	},
-	compoundVariants: [
-		{
-			position: 'start',
-			fluid: true,
-			class: 'sm:col-end-4',
-		},
-		{
-			position: 'end',
-			fluid: true,
-			class: 'sm:col-start-1',
-		},
-	],
 });
 
 export interface DialogActionsProps extends VariantProps<typeof root> {
···
 /**
  * footer container for dialog action buttons
  * @param props.position alignment of actions ('start' or 'end')
- * @param props.fluid whether actions should span full width
  * @param props.class additional CSS classes
  */
 const DialogActions = (props: DialogActionsProps) => {
-	const { position = 'end', fluid = false, class: className, children } = props;
+	const { position = 'end', class: className, children } = props;
 
-	return <div class={root({ position, fluid, className })}>{children}</div>;
+	return <div class={root({ position, className })}>{children}</div>;
 };
 
 export default DialogActions;

packages/danaus/src/web/primitives/dialog-body.tsx

···
 import type { Child } from 'hono/jsx';
 
 const root = cva({
-	base: [
-		'box-border',
-		'grid gap-2',
-		'grid-cols-[1fr_1fr_auto]',
-		// mobile-first: extra row for stacked actions
-		'grid-rows-[auto_1fr_auto_auto] sm:grid-rows-[auto_1fr_auto]',
-	],
+	base: ['grid gap-2', '@container/dialog-body'],
 });
 
 export interface DialogBodyProps {

packages/danaus/src/web/primitives/dialog-content.tsx

···
 import type { Child } from 'hono/jsx';
 
 const root = cva({
-	base: [
-		// grid position: row 2, col 1-3
-		'col-start-1 col-end-4 row-start-2 row-end-2',
-		'overflow-y-auto',
-		'text-base-300',
-	],
+	base: ['min-h-8 overflow-y-auto', 'text-base-300'],
 });
 
 export interface DialogContentProps {

packages/danaus/src/web/primitives/dialog-surface.tsx

···
-import { cva } from 'cva';
+import { cva, type VariantProps } from 'cva';
 import type { Child } from 'hono/jsx';
 
 import { useDialogContext } from './utils/dialog-context';
···
 		'border-none p-0',
 		'bg-transparent',
 		'overflow-visible',
-		// reset dialog defaults
-		'open:flex open:items-center open:justify-center',
+		'open:flex',
+		// bottom-aligned on mobile, centered on larger screens
+		'items-end justify-center',
+		'sm:items-center',
 		// backdrop
 		'backdrop:bg-background-overlay',
 	],
···
 	base: [
 		'relative z-10',
 		'box-border',
+		'w-full',
 		'max-h-[calc(100dvh-48px)]',
 		'p-6',
-		'rounded-xl',
+		// rounded top on mobile, all corners on larger screens
+		'rounded-t-xl sm:rounded-xl',
 		'bg-neutral-background-1 text-neutral-foreground-1',
 		'shadow-64',
-		// mobile-first: full width on mobile, constrained on larger
-		'max-w-full sm:max-w-150',
 	],
+	variants: {
+		size: {
+			small: 'max-w-120',
+			medium: 'max-w-150',
+		},
+	},
 });
 
-export interface DialogSurfaceProps {
+export interface DialogSurfaceProps extends VariantProps<typeof surface> {
 	children?: Child;
 }
 
 /**
  * visual container for dialog content
- * @param props.class additional CSS classes
+ * @param props.size dialog width ('small' or 'medium')
  */
 const DialogSurface = (props: DialogSurfaceProps) => {
-	const { children } = props;
+	const { size = 'small', children } = props;
 
 	const { dialogId, titleId } = useDialogContext();
 
 	return (
 		<dialog id={dialogId} aria-labelledby={titleId} class={root()}>
-			<div class={surface()}>{children}</div>
+			<div class={surface({ size })}>{children}</div>
 
 			<button
 				type="button"

packages/danaus/src/web/primitives/dialog-title.tsx

···
 import { useDialogContext } from './utils/dialog-context.tsx';
 
 const root = cva({
-	base: [
-		'm-0 pb-2',
-		'text-base-500 font-semibold',
-		// grid position: row 1, col 1-2 (leaves col 3 for action)
-		'col-start-1 col-end-3 row-start-1 row-end-1',
-	],
-	variants: {
-		hasAction: {
-			false: 'col-end-4',
-		},
-	},
+	base: ['m-0 flex items-start gap-2', 'text-base-500 font-semibold'],
 });
 
 const action = cva({
-	base: [
-		// grid position: row 1, col 3
-		'col-start-3 row-start-1 row-end-1',
-		'self-start justify-self-end',
-	],
+	base: ['ml-auto shrink-0'],
 });
 
 export interface DialogTitleProps {
···
 	const { action: actionSlot, class: className, children } = props;
 
 	const context = useDialogContext(null);
-	const hasAction = actionSlot !== undefined;
 
 	return (
-		<>
-			<h2 id={context?.titleId} class={root({ hasAction, className })}>
+		<div class={root({ className })}>
+			<h2 id={context?.titleId} class="m-0 grow">
 				{children}
 			</h2>
 
 			{actionSlot && <div class={action()}>{actionSlot}</div>}
-		</>
+		</div>
 	);
 };
 

packages/danaus/src/web/styles/main.css

···
 	}
 }
 
-:where(body) {
-	background: var(--color-neutral-background-2);
-	color: var(--color-neutral-foreground-1);
-	color-scheme: light dark;
+@layer base {
+	:where(body) {
+		background: var(--color-neutral-background-2);
+		color: var(--color-neutral-foreground-1);
+		color-scheme: light dark;
+	}
+
+	/* prevent body scroll when modal dialog is open */
+	:where(body:has(dialog:modal)) {
+		overflow: hidden;
+	}
 }
 
 /* #region anchor positioning */

packages/danaus/src/web/styles/main.out.css

···
   }
 }
 @layer utilities {
+  .\@container\/dialog-body {
+    container-type: inline-size;
+    container-name: dialog-body;
+  }
   .pointer-events-none {
     pointer-events: none;
   }
···
   .z-10 {
     z-index: 10;
   }
-  .col-start-1 {
-    grid-column-start: 1;
-  }
-  .col-start-3 {
-    grid-column-start: 3;
-  }
-  .col-end-3 {
-    grid-column-end: 3;
-  }
-  .col-end-4 {
-    grid-column-end: 4;
-  }
-  .row-start-1 {
-    grid-row-start: 1;
-  }
-  .row-start-2 {
-    grid-row-start: 2;
-  }
-  .row-start-3 {
-    grid-row-start: 3;
-  }
-  .row-start-4 {
-    grid-row-start: 4;
-  }
-  .row-end-1 {
-    grid-row-end: 1;
-  }
-  .row-end-2 {
-    grid-row-end: 2;
-  }
-  .row-end-3 {
-    grid-row-end: 3;
-  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
···
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
+  .ml-auto {
+    margin-left: auto;
+  }
   .box-border {
     box-sizing: border-box;
   }
···
   }
   .h-dvh {
     height: 100dvh;
-  }
-  .h-fit {
-    height: fit-content;
   }
   .h-full {
     height: 100%;
···
   .max-h-dvh {
     max-height: 100dvh;
   }
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
   .min-h-9 {
     min-height: calc(var(--spacing) * 9);
   }
···
   .max-w-96 {
     max-width: calc(var(--spacing) * 96);
   }
+  .max-w-120 {
+    max-width: calc(var(--spacing) * 120);
+  }
+  .max-w-150 {
+    max-width: calc(var(--spacing) * 150);
+  }
   .max-w-dvw {
     max-width: 100dvw;
   }
   .max-w-fit {
     max-width: fit-content;
-  }
-  .max-w-full {
-    max-width: 100%;
   }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
···
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-  .grid-cols-\[1fr_1fr_auto\] {
-    grid-template-columns: 1fr 1fr auto;
-  }
   .grid-cols-\[auto_1fr_auto\] {
     grid-template-columns: auto 1fr auto;
   }
   .grid-cols-\[auto_1fr_auto_auto\] {
     grid-template-columns: auto 1fr auto auto;
   }
-  .grid-rows-\[auto_1fr_auto_auto\] {
-    grid-template-rows: auto 1fr auto auto;
-  }
   .flex-col {
     flex-direction: column;
   }
···
   }
   .items-center {
     align-items: center;
+  }
+  .items-end {
+    align-items: flex-end;
   }
   .items-start {
     align-items: flex-start;
···
   .self-start {
     align-self: flex-start;
   }
-  .justify-self-end {
-    justify-self: flex-end;
-  }
-  .justify-self-stretch {
-    justify-self: stretch;
-  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
···
   }
   .rounded-xl {
     border-radius: 8px;
+  }
+  .rounded-t-xl {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
   }
   .border {
     border-style: var(--tw-border-style);
···
       display: flex;
     }
   }
-  .open\:items-center {
+  .open\:items-end {
     &:is([open], :popover-open, :open) {
-      align-items: center;
+      align-items: flex-end;
     }
   }
   .open\:justify-center {
···
       color: var(--color-neutral-foreground-disabled);
     }
   }
-  .sm\:col-start-1 {
-    @media (width >= 40rem) {
-      grid-column-start: 1;
-    }
-  }
-  .sm\:col-start-2 {
-    @media (width >= 40rem) {
-      grid-column-start: 2;
-    }
-  }
-  .sm\:col-end-2 {
-    @media (width >= 40rem) {
-      grid-column-end: 2;
-    }
-  }
-  .sm\:col-end-4 {
-    @media (width >= 40rem) {
-      grid-column-end: 4;
-    }
-  }
-  .sm\:row-start-3 {
-    @media (width >= 40rem) {
-      grid-row-start: 3;
-    }
-  }
   .sm\:ml-0 {
     @media (width >= 40rem) {
       margin-left: calc(var(--spacing) * 0);
···
       display: none;
     }
   }
-  .sm\:max-w-150 {
-    @media (width >= 40rem) {
-      max-width: calc(var(--spacing) * 150);
-    }
-  }
   .sm\:grid-cols-3 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
···
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
-  .sm\:grid-rows-\[auto_1fr_auto\] {
-    @media (width >= 40rem) {
-      grid-template-rows: auto 1fr auto;
-    }
-  }
-  .sm\:flex-row {
-    @media (width >= 40rem) {
-      flex-direction: row;
-    }
-  }
-  .sm\:justify-self-auto {
-    @media (width >= 40rem) {
-      justify-self: auto;
-    }
-  }
-  .sm\:justify-self-end {
+  .sm\:items-center {
     @media (width >= 40rem) {
-      justify-self: flex-end;
+      align-items: center;
     }
   }
-  .sm\:justify-self-start {
+  .sm\:rounded-xl {
     @media (width >= 40rem) {
-      justify-self: flex-start;
+      border-radius: 8px;
     }
   }
   .sm\:p-16 {
···
       padding-top: calc(var(--spacing) * 24);
     }
   }
+  .open\:sm\:items-center {
+    &:is([open], :popover-open, :open) {
+      @media (width >= 40rem) {
+        align-items: center;
+      }
+    }
+  }
   .lg\:grid {
     @media (width >= 64rem) {
       display: grid;
···
   .lg\:justify-center {
     @media (width >= 64rem) {
       justify-content: center;
+    }
+  }
+  .\@sm\/dialog-body\:flex-row {
+    @container dialog-body (width >= 24rem) {
+      flex-direction: row;
+    }
+  }
+  .\@sm\/dialog-body\:items-center {
+    @container dialog-body (width >= 24rem) {
+      align-items: center;
+    }
+  }
+  .\@sm\/dialog-body\:justify-end {
+    @container dialog-body (width >= 24rem) {
+      justify-content: flex-end;
+    }
+  }
+  .\@sm\/dialog-body\:justify-start {
+    @container dialog-body (width >= 24rem) {
+      justify-content: flex-start;
     }
   }
 }
···
     --shadow-64: 0 0 8px rgba(0, 0, 0, 0.24), 0 32px 64px rgba(0, 0, 0, 0.28);
   }
 }
-:where(body) {
-  background: var(--color-neutral-background-2);
-  color: var(--color-neutral-foreground-1);
-  color-scheme: light dark;
+@layer base {
+  :where(body) {
+    background: var(--color-neutral-background-2);
+    color: var(--color-neutral-foreground-1);
+    color-scheme: light dark;
+  }
+  :where(body:has(dialog:modal)) {
+    overflow: hidden;
+  }
 }
 @property --tw-divide-y-reverse {
   syntax: "*";