mostly fixed layouts

src/components/ItemRow.tsx

@@ -54,17 +54,27 @@ const ItemRow: Component<ItemRowProps> = (props) => {
         return num.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
     };
 
+    /* ─────────────────────────────────────────────
+       MOBILE layout  (<md): stacked card
+       DESKTOP layout (≥md): flat flex row, columns
+       match header widths exactly:
+         w-4 | flex-1 min-w-[200px] | w-20 | w-24 |
+         w-24 | w-32 | w-32 | w-28 | w-16
+    ──────────────────────────────────────────── */
     return (
         <div
-            class={`group flex flex-col md:flex-row items-stretch md:items-start gap-3 md:gap-4 p-3 border transition-all animate-in fade-in slide-in-from-left-2 w-full
+            class={`group transition-all animate-in fade-in slide-in-from-left-2 w-full border
                 ${props.isSelected
                     ? 'bg-primary/5 border-primary shadow-premium z-10'
                     : 'bg-card border-border hover:shadow-premium-hover hover:border-border/80'
                 }
-                ${isEditing() ? 'ring-1 ring-primary/20 shadow-premium border-primary/30' : 'rounded-2xl'}
+                ${isEditing() ? 'ring-1 ring-primary/20 shadow-premium border-primary/30 rounded-2xl' : 'rounded-2xl'}
             `}
         >
-            <div class="flex items-start gap-3">
+            {/* ── DESKTOP ROW ── */}
+            <div class="hidden md:flex items-center gap-4 px-3 py-2">
+
+                {/* Grip / Select — w-4 */}
                 <div
                     draggable={!isEditing() || props.anySelected}
                     onDragStart={(e) => props.onDragStart(e, props.item.id)}
@@ -72,24 +82,21 @@ const ItemRow: Component<ItemRowProps> = (props) => {
                         e.stopPropagation();
                         props.onToggleSelection(props.item.id, e.metaKey || e.ctrlKey, e.shiftKey);
                     }}
-                    class={`cursor-grab transition-colors shrink-0 w-4 mt-2 p-1 rounded hover:bg-muted ${props.isSelected ? 'text-primary' : 'text-muted-foreground/30 hover:text-muted-foreground/60'}`}
+                    class={`cursor-grab shrink-0 w-4 p-1 rounded hover:bg-muted transition-colors ${props.isSelected ? 'text-primary' : 'text-muted-foreground/30 hover:text-muted-foreground/60'}`}
                     title="Drag to move or click to select"
                 >
                     <GripVertical class="w-4 h-4" />
                 </div>
 
-                <div class="flex-1 relative min-w-[200px]">
+                {/* Description — flex-1 min-w-[200px] */}
+                <div class="flex-1 min-w-[200px] relative">
                     <textarea
                         ref={descriptionRef}
                         value={localDescription()}
-                        onFocus={() => {
+                        onFocus={() => { if (!props.anySelected) setIsEditing(true); }}
-                            if (!props.anySelected) setIsEditing(true);
-                        }}
                         onBlur={handleBlur}
                         onInput={(e) => {
                             setLocalDescription(e.currentTarget.value);
-
-                            // Fallback auto-resize for browsers without field-sizing support
                             if (!('fieldSizing' in document.documentElement.style)) {
                                 e.currentTarget.style.height = 'auto';
                                 e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px';
@@ -97,66 +104,23 @@ const ItemRow: Component<ItemRowProps> = (props) => {
                         }}
                         disabled={props.anySelected}
                         rows="1"
-                        class={`w-full bg-transparent border-b border-transparent hover:border-border/40 focus:border-primary outline-none py-1 transition-all resize-none block overflow-hidden align-top leading-normal text-base font-medium text-foreground/90
+                        class={`w-full bg-transparent border-b border-transparent hover:border-border/40 focus:border-primary outline-none py-1 transition-all resize-none block overflow-hidden align-top leading-normal text-sm font-medium text-foreground/90
                             ${props.anySelected ? 'cursor-default pointer-events-none' : ''}
                         `}
-                        style={{
+                        style={{ "field-sizing": "content", "min-height": "1.5em" }}
-                            "field-sizing": "content",
-                            "min-height": "1.5em"
-                        }}
                         placeholder="Item description..."
                     />
                 </div>
 
-                {/* Mobile Actions Container */}
+                {/* Qty — w-20 */}
-                <div class="flex md:hidden items-center gap-1.5 mt-1.5 px-1">
-                    <button
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            props.onDuplicateItem(props.item.id);
-                        }}
-                        class="text-muted-foreground/40 hover:text-primary transition-colors"
-                        title="Duplicate Item"
-                    >
-                        <div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-primary/10">
-                            <Copy class="w-3 h-3" />
-                        </div>
-                    </button>
-
-                    <button
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            props.onDelete(props.item.id);
-                        }}
-                        class="text-muted-foreground/40 hover:text-destructive transition-colors"
-                        title="Delete Item"
-                    >
-                        <div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-destructive/10">
-                            <Trash2 class="w-3 h-3" />
-                        </div>
-                    </button>
-                </div>
-            </div>
-
-            {/* Numeric Fields Group */}
-            <div class="flex flex-wrap md:flex-nowrap items-center gap-3 md:gap-4 pl-7 md:pl-0">
-                {/* Qty & Price Group */}
-                <div class="flex items-center gap-2">
                 <div class="w-20 shrink-0">
-                        <div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Qty</div>
                     <NumericInput
                         dataFieldName="qty"
                         value={props.item.quantity}
                         onUpdate={(val) => props.onUpdate(props.item.id, { quantity: val })}
                         onDragStart={(e) => {
                             const val = props.item.quantity;
-                                const data = {
+                            const data = { type: 'item-field', itemId: props.item.id, fieldName: 'qty', value: val, label: `${props.item.description || 'Unnamed Item'}: Qty` };
-                                    type: 'item-field',
-                                    itemId: props.item.id,
-                                    fieldName: 'qty',
-                                    value: val,
-                                    label: `${props.item.description || 'Unnamed Item'}: Qty`
-                                };
                             e.dataTransfer!.setData('application/json', JSON.stringify(data));
                             e.dataTransfer!.setData('text/plain', String(val));
                             e.dataTransfer!.effectAllowed = 'copy';
@@ -169,10 +133,9 @@ const ItemRow: Component<ItemRowProps> = (props) => {
                     />
                 </div>
 
-                    <div class="w-24 shrink-0">
+                {/* Price — w-24 */}
-                        <div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Price</div>
+                <div class="w-24 shrink-0 relative">
-                        <div class="relative">
+                    <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/50 text-[10px] pointer-events-none">$</span>
-                            <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/50 text-[10px]">$</span>
                     <NumericInput
                         dataFieldName="price"
                         step="0.1"
@@ -180,13 +143,7 @@ const ItemRow: Component<ItemRowProps> = (props) => {
                         onUpdate={(val) => props.onUpdate(props.item.id, { unitPrice: val })}
                         onDragStart={(e) => {
                             const val = props.item.unitPrice;
-                                    const data = {
+                            const data = { type: 'item-field', itemId: props.item.id, fieldName: 'price', value: val, label: `${props.item.description || 'Unnamed Item'}: Price` };
-                                        type: 'item-field',
-                                        itemId: props.item.id,
-                                        fieldName: 'price',
-                                        value: val,
-                                        label: `${props.item.description || 'Unnamed Item'}: Price`
-                                    };
                             e.dataTransfer!.setData('application/json', JSON.stringify(data));
                             e.dataTransfer!.setData('text/plain', String(val));
                             e.dataTransfer!.effectAllowed = 'copy';
@@ -198,49 +155,37 @@ const ItemRow: Component<ItemRowProps> = (props) => {
                         placeholder="Price"
                     />
                 </div>
-                    </div>
-                </div>
 
+                {/* Subtotal — w-24 */}
                 <div
                     draggable="true"
                     onDragStart={(e) => {
                         const val = baseTotal();
-                        const data = {
+                        const data = { type: 'item-field', itemId: props.item.id, fieldName: 'subtotal', value: val, label: `${props.item.description || 'Unnamed Item'}: Subtotal` };
-                            type: 'item-field',
-                            itemId: props.item.id,
-                            fieldName: 'subtotal',
-                            value: val,
-                            label: `${props.item.description || 'Unnamed Item'}: Subtotal`
-                        };
                         e.dataTransfer!.setData('application/json', JSON.stringify(data));
                         e.dataTransfer!.setData('text/plain', String(val));
                         e.dataTransfer!.effectAllowed = 'copy';
                         e.stopPropagation();
                     }}
-                    class={`hidden md:block w-24 shrink-0 text-right text-muted-foreground/60 text-[11px] mt-2 font-bold uppercase tracking-tighter cursor-grab hover:text-primary transition-colors`}
+                    class="w-24 shrink-0 text-right text-muted-foreground/60 text-[11px] font-bold uppercase tracking-tighter cursor-grab hover:text-primary transition-colors"
                 >
                     ${formatNumber(baseTotal())}
                 </div>
 
-                {/* Markup & Contingency Group */}
+                {/* Markup — w-32 (conditional) */}
                 <Show when={props.isSidebarCollapsed() || !props.hideColumns}>
-                    <div class="flex items-center gap-2">
                     <div class="w-32 shrink-0">
-                            <div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Markup</div>
                         <div class="flex items-center gap-1.5">
                             <NumericInput
                                 dataFieldName="markup"
                                 value={props.item.markup}
                                 onUpdate={(val) => props.onUpdate(props.item.id, { markup: val })}
                                 disabled={props.anySelected}
-                                    class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-primary transition-all"
+                                class="flex-1 min-w-0 bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-primary transition-all"
                                 placeholder="Markup"
                             />
                             <button
-                                    onClick={(e) => {
+                                onClick={(e) => { e.stopPropagation(); props.onUpdate(props.item.id, { markupType: props.item.markupType === 'percent' ? 'amount' : 'percent' }); }}
-                                        e.stopPropagation();
-                                        props.onUpdate(props.item.id, { markupType: props.item.markupType === 'percent' ? 'amount' : 'percent' });
-                                    }}
                                 disabled={props.anySelected}
                                 class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] disabled:opacity-50 transition-colors border border-border/40"
                             >
@@ -249,22 +194,19 @@ const ItemRow: Component<ItemRowProps> = (props) => {
                         </div>
                     </div>
 
+                    {/* Contingency — w-32 */}
                     <div class="w-32 shrink-0">
-                            <div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Contingency</div>
                         <div class="flex items-center gap-1.5">
                             <NumericInput
                                 dataFieldName="contingency"
                                 value={props.item.contingency}
                                 onUpdate={(val) => props.onUpdate(props.item.id, { contingency: val })}
                                 disabled={props.anySelected}
-                                    class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-foreground/80 transition-all"
+                                class="flex-1 min-w-0 bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-foreground/80 transition-all"
                                 placeholder="Contingency"
                             />
                             <button
-                                    onClick={(e) => {
+                                onClick={(e) => { e.stopPropagation(); props.onUpdate(props.item.id, { contingencyType: props.item.contingencyType === 'percent' ? 'amount' : 'percent' }); }}
-                                        e.stopPropagation();
-                                        props.onUpdate(props.item.id, { contingencyType: props.item.contingencyType === 'percent' ? 'amount' : 'percent' });
-                                    }}
                                 disabled={props.anySelected}
                                 class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] disabled:opacity-50 transition-colors border border-border/40"
                             >
@@ -272,38 +214,28 @@ const ItemRow: Component<ItemRowProps> = (props) => {
                             </button>
                         </div>
                     </div>
-                    </div>
                 </Show>
 
-                <div class="flex items-center gap-3">
+                {/* Total — w-28 */}
                 <div
                     draggable="true"
                     onDragStart={(e) => {
                         const val = total();
-                            const data = {
+                        const data = { type: 'item-field', itemId: props.item.id, fieldName: 'total', value: val, label: `${props.item.description || 'Unnamed Item'}: Total` };
-                                type: 'item-field',
-                                itemId: props.item.id,
-                                fieldName: 'total',
-                                value: val,
-                                label: `${props.item.description || 'Unnamed Item'}: Total`
-                            };
                         e.dataTransfer!.setData('application/json', JSON.stringify(data));
                         e.dataTransfer!.setData('text/plain', String(val));
                         e.dataTransfer!.effectAllowed = 'copy';
                         e.stopPropagation();
                     }}
-                        class={`w-28 shrink-0 text-right font-black text-sm md:mt-2 cursor-grab hover:text-primary transition-colors ${props.isSelected ? 'text-primary' : 'text-foreground'}`}
+                    class={`w-28 shrink-0 text-right font-black text-sm cursor-grab hover:text-primary transition-colors ${props.isSelected ? 'text-primary' : 'text-foreground'}`}
                 >
-                        <div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Total</div>
                     ${formatNumber(total())}
                 </div>
 
-                    <div class="hidden md:flex w-16 shrink-0 items-center justify-end gap-1.5 mt-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                {/* Actions — w-16 */}
+                <div class="w-16 shrink-0 flex items-center justify-end gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
                     <button
-                            onClick={(e) => {
+                        onClick={(e) => { e.stopPropagation(); props.onDuplicateItem(props.item.id); }}
-                                e.stopPropagation();
-                                props.onDuplicateItem(props.item.id);
-                            }}
                         class="text-muted-foreground/40 hover:text-primary transition-colors"
                         title="Duplicate Item"
                     >
@@ -311,12 +243,8 @@ const ItemRow: Component<ItemRowProps> = (props) => {
                             <Copy class="w-3 h-3" />
                         </div>
                     </button>
-
                     <button
-                            onClick={(e) => {
+                        onClick={(e) => { e.stopPropagation(); props.onDelete(props.item.id); }}
-                                e.stopPropagation();
-                                props.onDelete(props.item.id);
-                            }}
                         class="text-muted-foreground/40 hover:text-destructive transition-colors"
                         title="Delete Item"
                     >
@@ -326,6 +254,86 @@ const ItemRow: Component<ItemRowProps> = (props) => {
                     </button>
                 </div>
             </div>
+
+            {/* ── MOBILE LAYOUT ── (stacked card, shown below md) */}
+            <div class="md:hidden flex flex-col gap-3 p-3">
+                <div class="flex items-start gap-3">
+                    {/* Grip */}
+                    <div
+                        draggable={!isEditing() || props.anySelected}
+                        onDragStart={(e) => props.onDragStart(e, props.item.id)}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            props.onToggleSelection(props.item.id, e.metaKey || e.ctrlKey, e.shiftKey);
+                        }}
+                        class={`cursor-grab shrink-0 w-4 mt-2 p-1 rounded hover:bg-muted transition-colors ${props.isSelected ? 'text-primary' : 'text-muted-foreground/30 hover:text-muted-foreground/60'}`}
+                    >
+                        <GripVertical class="w-4 h-4" />
+                    </div>
+                    {/* Description */}
+                    <div class="flex-1 relative">
+                        <textarea
+                            value={localDescription()}
+                            onFocus={() => { if (!props.anySelected) setIsEditing(true); }}
+                            onBlur={handleBlur}
+                            onInput={(e) => {
+                                setLocalDescription(e.currentTarget.value);
+                                if (!('fieldSizing' in document.documentElement.style)) {
+                                    e.currentTarget.style.height = 'auto';
+                                    e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px';
+                                }
+                            }}
+                            disabled={props.anySelected}
+                            rows="1"
+                            class="w-full bg-transparent border-b border-transparent hover:border-border/40 focus:border-primary outline-none py-1 transition-all resize-none block overflow-hidden align-top leading-normal text-base font-medium text-foreground/90"
+                            style={{ "field-sizing": "content", "min-height": "1.5em" }}
+                            placeholder="Item description..."
+                        />
+                    </div>
+                    {/* Mobile actions */}
+                    <div class="flex items-center gap-1.5 mt-1">
+                        <button onClick={(e) => { e.stopPropagation(); props.onDuplicateItem(props.item.id); }} class="text-muted-foreground/40 hover:text-primary transition-colors">
+                            <div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-primary/10"><Copy class="w-3 h-3" /></div>
+                        </button>
+                        <button onClick={(e) => { e.stopPropagation(); props.onDelete(props.item.id); }} class="text-muted-foreground/40 hover:text-destructive transition-colors">
+                            <div class="p-1 px-1.5 bg-muted rounded-lg border border-border/40 hover:bg-destructive/10"><Trash2 class="w-3 h-3" /></div>
+                        </button>
+                    </div>
+                </div>
+                {/* Numeric fields — wrapping grid on mobile */}
+                <div class="flex flex-wrap gap-3 pl-7">
+                    <div class="w-20">
+                        <div class="text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Qty</div>
+                        <NumericInput value={props.item.quantity} onUpdate={(val) => props.onUpdate(props.item.id, { quantity: val })} disabled={props.anySelected} class="w-full bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-foreground/80 transition-all" placeholder="Qty" />
+                    </div>
+                    <div class="w-24">
+                        <div class="text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Price</div>
+                        <div class="relative">
+                            <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/50 text-[10px]">$</span>
+                            <NumericInput step="0.1" value={props.item.unitPrice} onUpdate={(val) => props.onUpdate(props.item.id, { unitPrice: val })} disabled={props.anySelected} class="w-full bg-muted/30 border border-border/60 rounded-xl pl-5 pr-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-foreground/80 transition-all" placeholder="Price" />
+                        </div>
+                    </div>
+                    <Show when={props.isSidebarCollapsed() || !props.hideColumns}>
+                        <div class="w-32">
+                            <div class="text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Markup</div>
+                            <div class="flex items-center gap-1.5">
+                                <NumericInput value={props.item.markup} onUpdate={(val) => props.onUpdate(props.item.id, { markup: val })} disabled={props.anySelected} class="flex-1 min-w-0 bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-primary transition-all" placeholder="Markup" />
+                                <button onClick={(e) => { e.stopPropagation(); props.onUpdate(props.item.id, { markupType: props.item.markupType === 'percent' ? 'amount' : 'percent' }); }} disabled={props.anySelected} class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] disabled:opacity-50 transition-colors border border-border/40">{props.item.markupType === 'percent' ? '%' : '$'}</button>
+                            </div>
+                        </div>
+                        <div class="w-32">
+                            <div class="text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Contingency</div>
+                            <div class="flex items-center gap-1.5">
+                                <NumericInput value={props.item.contingency} onUpdate={(val) => props.onUpdate(props.item.id, { contingency: val })} disabled={props.anySelected} class="flex-1 min-w-0 bg-muted/30 border border-border/60 rounded-xl px-2 py-1.5 text-xs text-right focus:bg-background focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none disabled:opacity-50 font-bold text-foreground/80 transition-all" placeholder="Contingency" />
+                                <button onClick={(e) => { e.stopPropagation(); props.onUpdate(props.item.id, { contingencyType: props.item.contingencyType === 'percent' ? 'amount' : 'percent' }); }} disabled={props.anySelected} class="text-[9px] font-black px-1.5 py-1.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary/10 hover:text-primary min-w-[24px] disabled:opacity-50 transition-colors border border-border/40">{props.item.contingencyType === 'percent' ? '%' : '$'}</button>
+                            </div>
+                        </div>
+                    </Show>
+                    <div class="w-28">
+                        <div class="text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Total</div>
+                        <div class={`font-black text-sm text-right ${props.isSelected ? 'text-primary' : 'text-foreground'}`}>${formatNumber(total())}</div>
+                    </div>
+                </div>
             </div>
         </div>
     );

src/components/ScopeCard.tsx

@@ -7,6 +7,7 @@ import ItemRow from './ItemRow';
 import SubScopeCard from './SubScopeCard';
 import NoteEditor from './NoteEditor';
 import LazyItem from './LazyItem';
+import ScopeScaleWrapper from './ui/ScopeScaleWrapper';
 
 interface ScopeCardProps {
     scope: Scope;
@@ -200,15 +201,9 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
                     </div>
                 </Show>
 
-                <div
+                <ScopeScaleWrapper>
-                    onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
+                    {/* Sticky Column Headers */}
-                    class="relative overflow-x-auto min-w-0"
+                    <div class="scope-sticky-header py-2 mb-2 hidden md:flex items-center gap-4 text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-3">
-                >
-                    <div class="p-6 space-y-4 min-w-full md:min-w-max flex flex-col items-stretch">
-                        <Show when={scopeItems().length > 0}>
-                            <div class="relative">
-                                {/* Column Headers - Sticky, Square Top */}
-                                <div class="sticky top-0 z-20 bg-background/95 backdrop-blur-sm border-b border-border py-2 mb-2 hidden md:flex items-center gap-4 text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-3 rounded-none">
                         <div class="w-4 shrink-0"></div> {/* Grip space */}
                         <div class="flex-1 min-w-[200px]">Description</div>
                         <div class="w-20 shrink-0 text-right">Qty</div>
@@ -222,8 +217,13 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
                         <div class="w-16 shrink-0"></div> {/* Action space */}
                     </div>
 
+                    {/* Scope-level items */}
+                    <div
+                        onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
+                        class="px-3 pb-3 space-y-2"
+                    >
+                        <Show when={scopeItems().length > 0}>
                             <div class="grid gap-2">
-                                    {/* Scope Level Items */}
                                 <For each={props.items.filter(i => !i.subScopeId)}>
                                     {(item) => (
                                         <LazyItem estimatedHeight={60}>
@@ -243,7 +243,6 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
                                     )}
                                 </For>
                             </div>
-                            </div>
                         </Show>
 
                         <Show when={scopeItems().length === 0 && props.subScopes.length === 0}>
@@ -252,11 +251,9 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
                             </div>
                         </Show>
                     </div>
-                </div>
 
-                <div class="p-6 pt-0 space-y-4 relative">
+                    {/* Sub-scopes — rendered inside the same scale wrapper so they zoom together */}
-                    {/* Sub-scopes */}
+                    <div class="px-3 pb-3 space-y-4">
-                    <div class="space-y-6 pt-4">
                         <For each={props.subScopes}>
                             {(subScope) => (
                                 <SubScopeCard
@@ -281,9 +278,11 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
                             )}
                         </For>
                     </div>
+                </ScopeScaleWrapper>
 
+                <div class="p-6 pt-4 space-y-4">
                     {/* Scope Extras & Totals */}
-                    <div class="mt-8 pt-6 border-t border-border space-y-3">
+                    <div class="mt-4 pt-6 border-t border-border space-y-3">
                         {/* Management Line */}
                         <div class="flex items-center justify-between group">
                             <div class="flex items-center gap-3">

src/components/SubScopeCard.tsx

@@ -166,12 +166,11 @@ const SubScopeCard: Component<SubScopeCardProps> = (props) => {
             <Show when={!isCollapsed()}>
                 <div
                     onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
-                    class="relative overflow-x-auto min-w-0"
+                    class="relative"
                 >
-                    <div class="p-2 space-y-1.5 min-w-full md:min-w-max flex flex-col items-stretch">
                     {/* SubScope Column Headers */}
                     <Show when={props.items.length > 0}>
-                            <div class="sticky top-0 z-20 bg-background/95 backdrop-blur-sm hidden md:flex items-center gap-4 text-[9px] font-bold text-muted-foreground/60 uppercase tracking-wider px-3 pb-2 pt-1 mb-2 border-b border-border/40">
+                        <div class="scope-sticky-header py-2 mb-2 hidden md:flex items-center gap-4 text-[9px] font-bold text-muted-foreground/60 uppercase tracking-wider px-3">
                             <div class="w-4 shrink-0"></div>
                             <div class="flex-1 min-w-[200px]">Description</div>
                             <div class="w-20 shrink-0 text-right">Qty</div>
@@ -186,6 +185,7 @@ const SubScopeCard: Component<SubScopeCardProps> = (props) => {
                         </div>
                     </Show>
 
+                    <div class="px-3 pb-3 space-y-1.5">
                         <For each={props.items}>
                             {(item) => (
                                 <LazyItem estimatedHeight={60}>

src/components/ui/ScopeScaleWrapper.tsx

@@ -0,0 +1,95 @@
+/**
+ * ScopeScaleWrapper
+ *
+ * Wraps a scope's grid area (header + rows) in a container that:
+ *  1. Scales the inner content DOWN to fit the available width on
+ *     small screens, so there is no excess horizontal scroll.
+ *  2. If content is even too wide at minScale, falls back to
+ *     horizontal scroll only at that point.
+ *
+ * Key behaviour:
+ *  - When content fits (scale = 1): inner is width:100%, outer has
+ *    overflow-x:hidden — zero unused scroll space.
+ *  - When too wide to fit: inner is width:max-content so it renders
+ *    at its natural size, scale transform shrinks it visually, and
+ *    outer height is corrected for the scaled layout height.
+ */
+
+import type { Component, JSX } from 'solid-js';
+import { onMount, onCleanup, createSignal } from 'solid-js';
+
+interface ScopeScaleWrapperProps {
+    children: JSX.Element;
+    class?: string;
+    /** minimum scale — won't zoom below this (default 0.65) */
+    minScale?: number;
+}
+
+const ScopeScaleWrapper: Component<ScopeScaleWrapperProps> = (props) => {
+    let outerEl: HTMLDivElement | undefined;
+    let innerEl: HTMLDivElement | undefined;
+    const [scale, setScale] = createSignal(1);
+    const [isZooming, setIsZooming] = createSignal(false);
+
+    const recalculate = () => {
+        if (!outerEl || !innerEl) return;
+
+        // Temporarily switch inner to max-content so we can measure
+        // its natural width without being constrained by the parent.
+        innerEl.style.width = 'max-content';
+        const naturalWidth = innerEl.scrollWidth;
+
+        const outerWidth = outerEl.clientWidth;
+
+        if (naturalWidth <= outerWidth) {
+            // Content fits — no zoom, no excess scroll
+            setScale(1);
+            setIsZooming(false);
+            innerEl.style.width = '100%';
+            innerEl.style.height = '';
+            innerEl.style.removeProperty('--scale-factor');
+        } else {
+            const min = props.minScale ?? 0.65;
+            const newScale = Math.max(min, outerWidth / naturalWidth);
+            setScale(newScale);
+            setIsZooming(true);
+            // Keep width:max-content so content renders at natural size
+            innerEl.style.width = 'max-content';
+            // Correct height so the card shrinks with the scaled content
+            const naturalHeight = innerEl.scrollHeight;
+            innerEl.style.height = (naturalHeight * newScale) + 'px';
+            innerEl.style.setProperty('--scale-factor', String(newScale));
+        }
+    };
+
+    let ro: ResizeObserver;
+
+    onMount(() => {
+        ro = new ResizeObserver(recalculate);
+        if (outerEl) ro.observe(outerEl);
+        recalculate();
+    });
+
+    onCleanup(() => ro?.disconnect());
+
+    return (
+        <div
+            ref={outerEl}
+            class={`relative ${isZooming() ? 'overflow-x-auto' : 'overflow-x-hidden'} overflow-y-visible ${props.class ?? ''}`}
+        >
+            <div
+                ref={innerEl}
+                style={{
+                    'transform-origin': 'top left',
+                    'transform': `scale(${scale()})`,
+                    'transition': 'transform 0.2s ease',
+                    'will-change': 'transform',
+                }}
+            >
+                {props.children}
+            </div>
+        </div>
+    );
+};
+
+export default ScopeScaleWrapper;

src/index.css

@@ -105,3 +105,29 @@
     @apply hidden;
   }
 }
+
+/* =========================================================
+   Scope Sticky Header
+   A shared class for scope and sub-scope column headers.
+   position:sticky works inside the ScopeScaleWrapper because
+   the outer container has overflow-y:visible.
+   ========================================================= */
+
+.scope-sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: hsl(0 0% 100% / 0.97);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  border-bottom: 1px solid hsl(240 5.9% 90%);
+}
+
+/* shadow-premium custom utility */
+.shadow-premium {
+  box-shadow: var(--shadow-premium);
+}
+
+.shadow-premium-hover:hover {
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 10px -6px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
+}