fix mobile screen issues

src/components/ds/DataTable.jsx

@@ -194,7 +194,7 @@ export function DataTable({
         <LoadingOverlay show={refreshing} />
 
         <div className="overflow-x-auto">
-          <table className="w-full border-collapse">
+          <table className="w-full min-w-[36rem] border-collapse">
             {caption && <caption className="sr-only">{caption}</caption>}
 
             <thead className={cn(stickyHeader && 'sticky top-0 z-10')}>

src/components/ds/MetricStrip.jsx

@@ -83,7 +83,14 @@ export function MetricStrip({ items = [], columns, className, loading = false })
             <div>
               {/* Header: Label & Icon */}
               <div className="flex items-center justify-between gap-1.5">
-                <p className="truncate text-[10px] font-bold uppercase tracking-wider text-ink-4">
+                {/* Wraps on a phone, clips on everything wider.
+                    Two of these sit side by side at 320px, which leaves about
+                    110px for the label — enough for "OPEN POSITIONS" over two
+                    lines and not enough for it on one, so a flat `truncate`
+                    turned every metric on the Control Center into "OPEN POSI…".
+                    From `sm` the strip is three or six across with room for the
+                    label on one line, which is where clipping was the intent. */}
+                <p className="min-w-0 line-clamp-2 text-[10px] font-bold uppercase tracking-wider text-ink-4 sm:line-clamp-1">
                   {item.label}
                 </p>
                 {IconComponent && (

src/components/ds/Modal.jsx

@@ -43,7 +43,11 @@ export function Modal({
   return (
     <Dialog open={open} onOpenChange={busy ? undefined : onOpenChange}>
       <DialogContent
-        className={cn('p-0 gap-0 overflow-hidden max-h-[90vh] flex flex-col', WIDTHS[size], className)}
+        /* `dvh`, not `vh`: on a phone `100vh` is the *large* viewport, which
+           includes the browser chrome that is currently covering the bottom of
+           the screen — so a `90vh` dialog put its footer, and its confirm
+           button, under the address bar. */
+        className={cn('p-0 gap-0 overflow-hidden max-h-[calc(100dvh-2rem)] flex flex-col', WIDTHS[size], className)}
         onInteractOutside={busy ? (e) => e.preventDefault() : undefined}
         onEscapeKeyDown={busy ? (e) => e.preventDefault() : undefined}
       >