src/lib/components/calendar.svelte

@@ -49,7 +49,7 @@
     type="single"
     bind:value
     bind:placeholder
-    class="rounded-lg border shadow-sm [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]"
+    class="rounded-lg border shadow-sm md:[--cell-size:--spacing(14)]"
 >
     {#snippet day({ day })}
         <CalendarDay>

src/lib/components/ui/calendar/calendar-cell.svelte

@@ -12,7 +12,7 @@
 <CalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-md",
+		"relative flex-1 aspect-square p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-md",
 		className
 	)}
 	{...restProps}

src/lib/components/ui/calendar/calendar-month.svelte

@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<div {...restProps} bind:this={ref} class={cn("flex flex-col", className)}>
+<div {...restProps} bind:this={ref} class={cn("flex w-full flex-col", className)}>
 	{@render children?.()}
 </div>