position ui and owliver update

src/components/ds/Drawer.jsx

@@ -2,11 +2,22 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 
+/**
+ * Panel widths.
+ *
+ * Each entry states its `max-w` as well as its `w`. The underlying Sheet caps a
+ * side panel at `sm:max-w-sm` (24rem), so a width alone was silently ignored on
+ * desktop and every "large" drawer in the app was drawn at phone width — the
+ * reason detail panels wrapped and scrolled far more than their content needed.
+ */
 const WIDTHS = {
-  sm: 'w-full sm:w-80',
-  default: 'w-full sm:w-[28rem]',
-  lg: 'w-full sm:w-[36rem]',
-  xl: 'w-full sm:w-[44rem]',
+  sm: 'w-full sm:w-80 sm:max-w-[20rem]',
+  default: 'w-full sm:w-[28rem] sm:max-w-[28rem]',
+  lg: 'w-full sm:w-[36rem] sm:max-w-[36rem]',
+  /* A record with a two-column body: 704px on desktop, 768px from `2xl`
+     (1536px and up), and never the whole screen — the page behind it stays
+     visible, which is what keeps the drawer a drawer. */
+  xl: 'w-full sm:w-[44rem] sm:max-w-[44rem] 2xl:w-[48rem] 2xl:max-w-[48rem]',
 };
 
 /**
@@ -43,7 +54,7 @@ export function Drawer({
         )}
       >
         {!bare && (
-          <SheetHeader className="px-5 pt-5 pb-4 border-b border-border shrink-0 space-y-0 text-left">
+          <SheetHeader className="px-5 sm:px-6 pt-5 pb-4 border-b border-border shrink-0 space-y-0 text-left">
             <div className="flex items-start gap-3">
               {Icon && (
                 <span className="grid place-items-center w-9 h-9 rounded-xl bg-krow-blue-tint text-krow-blue shrink-0">
@@ -62,10 +73,10 @@ export function Drawer({
           </SheetHeader>
         )}
 
-        <div className="flex-1 overflow-y-auto px-5 py-5">{children}</div>
+        <div className="flex-1 overflow-y-auto px-5 py-5 sm:px-6">{children}</div>
 
         {footer && (
-          <div className="px-5 py-4 border-t border-border bg-surface-subtle shrink-0 flex items-center justify-end gap-2">
+          <div className="px-5 sm:px-6 py-4 border-t border-border bg-surface-subtle shrink-0 flex items-center justify-end gap-2">
             {footer}
           </div>
         )}