From c72da2fad5cba2b634692e6a237d28e05d956eb2 Mon Sep 17 00:00:00 2001
From: Timothy Cardoza <tcardoza@cardoza.construction>
Date: Fri, 13 Mar 2026 18:31:21 -0500
Subject: [PATCH] mostly fixed layouts

---
 src/components/ItemRow.tsx              | 404 ++++++++++++------------
 src/components/ScopeCard.tsx            |  93 +++---
 src/components/SubScopeCard.tsx         |  36 +--
 src/components/ui/ScopeScaleWrapper.tsx |  95 ++++++
 src/index.css                           |  26 ++
 5 files changed, 391 insertions(+), 263 deletions(-)
 create mode 100644 src/components/ui/ScopeScaleWrapper.tsx

diff --git a/src/components/ItemRow.tsx b/src/components/ItemRow.tsx
index 0570ba3..c7d918a 100644
--- a/src/components/ItemRow.tsx
+++ b/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={() => {
-                            if (!props.anySelected) setIsEditing(true);
-                        }}
+                        onFocus={() => { 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,24 +104,138 @@ 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={{
-                            "field-sizing": "content",
-                            "min-height": "1.5em"
-                        }}
+                        style={{ "field-sizing": "content", "min-height": "1.5em" }}
                         placeholder="Item description..."
                     />
                 </div>
 
-                {/* Mobile Actions Container */}
-                <div class="flex md:hidden items-center gap-1.5 mt-1.5 px-1">
-                    <button
-                        onClick={(e) => {
+                {/* Qty — w-20 */}
+                <div class="w-20 shrink-0">
+                    <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 = { 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';
                             e.stopPropagation();
-                            props.onDuplicateItem(props.item.id);
                         }}
+                        draggable="true"
+                        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 cursor-text font-bold text-foreground/80 transition-all"
+                        placeholder="Qty"
+                    />
+                </div>
+
+                {/* Price — w-24 */}
+                <div class="w-24 shrink-0 relative">
+                    <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground/50 text-[10px] pointer-events-none">$</span>
+                    <NumericInput
+                        dataFieldName="price"
+                        step="0.1"
+                        value={props.item.unitPrice}
+                        onUpdate={(val) => props.onUpdate(props.item.id, { unitPrice: val })}
+                        onDragStart={(e) => {
+                            const val = props.item.unitPrice;
+                            const data = { 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';
+                            e.stopPropagation();
+                        }}
+                        draggable="true"
+                        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 cursor-text font-bold text-foreground/80 transition-all"
+                        placeholder="Price"
+                    />
+                </div>
+
+                {/* Subtotal — w-24 */}
+                <div
+                    draggable="true"
+                    onDragStart={(e) => {
+                        const val = baseTotal();
+                        const data = { 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="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 — w-32 (conditional) */}
+                <Show when={props.isSidebarCollapsed() || !props.hideColumns}>
+                    <div class="w-32 shrink-0">
+                        <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="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>
+
+                    {/* Contingency — w-32 */}
+                    <div class="w-32 shrink-0">
+                        <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="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>
+
+                {/* Total — w-28 */}
+                <div
+                    draggable="true"
+                    onDragStart={(e) => {
+                        const val = total();
+                        const data = { 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 cursor-grab hover:text-primary transition-colors ${props.isSelected ? 'text-primary' : 'text-foreground'}`}
+                >
+                    ${formatNumber(total())}
+                </div>
+
+                {/* 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) => { e.stopPropagation(); props.onDuplicateItem(props.item.id); }}
                         class="text-muted-foreground/40 hover:text-primary transition-colors"
                         title="Duplicate Item"
                     >
@@ -122,12 +243,8 @@ const ItemRow: Component<ItemRowProps> = (props) => {
                             <Copy class="w-3 h-3" />
                         </div>
                     </button>
-
                     <button
-                        onClick={(e) => {
-                            e.stopPropagation();
-                            props.onDelete(props.item.id);
-                        }}
+                        onClick={(e) => { e.stopPropagation(); props.onDelete(props.item.id); }}
                         class="text-muted-foreground/40 hover:text-destructive transition-colors"
                         title="Delete Item"
                     >
@@ -138,192 +255,83 @@ const ItemRow: Component<ItemRowProps> = (props) => {
                 </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 = {
-                                    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';
-                                e.stopPropagation();
+            {/* ── 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';
+                                }
                             }}
-                            draggable="true"
                             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 cursor-text font-bold text-foreground/80 transition-all"
-                            placeholder="Qty"
+                            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>
-
-                    <div class="w-24 shrink-0">
-                        <div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Price</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
-                                dataFieldName="price"
-                                step="0.1"
-                                value={props.item.unitPrice}
-                                onUpdate={(val) => props.onUpdate(props.item.id, { unitPrice: val })}
-                                onDragStart={(e) => {
-                                    const val = props.item.unitPrice;
-                                    const data = {
-                                        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';
-                                    e.stopPropagation();
-                                }}
-                                draggable="true"
-                                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 cursor-text font-bold text-foreground/80 transition-all"
-                                placeholder="Price"
-                            />
+                            <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>
-                </div>
-
-                <div
-                    draggable="true"
-                    onDragStart={(e) => {
-                        const val = baseTotal();
-                        const data = {
-                            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`}
-                >
-                    ${formatNumber(baseTotal())}
-                </div>
-
-                {/* Markup & Contingency Group */}
-                <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>
+                    <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
-                                    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"
-                                    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>
+                                <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 shrink-0">
-                            <div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Contingency</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
-                                    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"
-                                    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>
+                                <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>
-                    </div>
-                </Show>
-
-                <div class="flex items-center gap-3">
-                    <div
-                        draggable="true"
-                        onDragStart={(e) => {
-                            const val = total();
-                            const data = {
-                                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'}`}
-                    >
-                        <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">
-                        <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>
+                    </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>
diff --git a/src/components/ScopeCard.tsx b/src/components/ScopeCard.tsx
index 3c69aca..6745268 100644
--- a/src/components/ScopeCard.tsx
+++ b/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,49 +201,47 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
                     </div>
                 </Show>
 
-                <div
-                    onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
-                    class="relative overflow-x-auto min-w-0"
-                >
-                    <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>
-                                    <div class="w-24 shrink-0 text-right">Price</div>
-                                    <div class="w-24 shrink-0 text-right">Subtotal</div>
-                                    <Show when={props.isSidebarCollapsed() || !props.hideColumns}>
-                                        <div class="w-32 shrink-0 text-center">Markup</div>
-                                        <div class="w-32 shrink-0 text-center">Contingency</div>
-                                    </Show>
-                                    <div class="w-28 shrink-0 text-right">Total</div>
-                                    <div class="w-16 shrink-0"></div> {/* Action space */}
-                                </div>
+                <ScopeScaleWrapper>
+                    {/* Sticky Column Headers */}
+                    <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="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>
+                        <div class="w-24 shrink-0 text-right">Price</div>
+                        <div class="w-24 shrink-0 text-right">Subtotal</div>
+                        <Show when={props.isSidebarCollapsed() || !props.hideColumns}>
+                            <div class="w-32 shrink-0 text-center">Markup</div>
+                            <div class="w-32 shrink-0 text-center">Contingency</div>
+                        </Show>
+                        <div class="w-28 shrink-0 text-right">Total</div>
+                        <div class="w-16 shrink-0"></div> {/* Action space */}
+                    </div>
 
-                                <div class="grid gap-2">
-                                    {/* Scope Level Items */}
-                                    <For each={props.items.filter(i => !i.subScopeId)}>
-                                        {(item) => (
-                                            <LazyItem estimatedHeight={60}>
-                                                <ItemRow
-                                                    item={item}
-                                                    onUpdate={props.onUpdateItem}
-                                                    onDelete={props.onDeleteItem}
-                                                    onDragStart={props.onDragStart}
-                                                    onDuplicateItem={props.onDuplicateItem}
-                                                    isSidebarCollapsed={props.isSidebarCollapsed}
-                                                    isSelected={props.selectedIds.includes(item.id)}
-                                                    anySelected={props.selectedIds.length > 0}
-                                                    onToggleSelection={props.onToggleSelection}
-                                                    hideColumns={props.hideColumns}
-                                                />
-                                            </LazyItem>
-                                        )}
-                                    </For>
-                                </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">
+                                <For each={props.items.filter(i => !i.subScopeId)}>
+                                    {(item) => (
+                                        <LazyItem estimatedHeight={60}>
+                                            <ItemRow
+                                                item={item}
+                                                onUpdate={props.onUpdateItem}
+                                                onDelete={props.onDeleteItem}
+                                                onDragStart={props.onDragStart}
+                                                onDuplicateItem={props.onDuplicateItem}
+                                                isSidebarCollapsed={props.isSidebarCollapsed}
+                                                isSelected={props.selectedIds.includes(item.id)}
+                                                anySelected={props.selectedIds.length > 0}
+                                                onToggleSelection={props.onToggleSelection}
+                                                hideColumns={props.hideColumns}
+                                            />
+                                        </LazyItem>
+                                    )}
+                                </For>
                             </div>
                         </Show>
 
@@ -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 */}
-                    <div class="space-y-6 pt-4">
+                    {/* Sub-scopes — rendered inside the same scale wrapper so they zoom together */}
+                    <div class="px-3 pb-3 space-y-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">
diff --git a/src/components/SubScopeCard.tsx b/src/components/SubScopeCard.tsx
index 18ad7cd..fac5ba6 100644
--- a/src/components/SubScopeCard.tsx
+++ b/src/components/SubScopeCard.tsx
@@ -166,26 +166,26 @@ 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="w-4 shrink-0"></div>
-                                <div class="flex-1 min-w-[200px]">Description</div>
-                                <div class="w-20 shrink-0 text-right">Qty</div>
-                                <div class="w-24 shrink-0 text-right">Price</div>
-                                <div class="w-24 shrink-0 text-right">Subtotal</div>
-                                <Show when={props.isSidebarCollapsed() || !props.hideColumns}>
-                                    <div class="w-32 shrink-0 text-center">Markup</div>
-                                    <div class="w-32 shrink-0 text-center">Contingency</div>
-                                </Show>
-                                <div class="w-28 shrink-0 text-right px-2">Total</div>
-                                <div class="w-16 shrink-0"></div>
-                            </div>
-                        </Show>
+                    {/* SubScope Column Headers */}
+                    <Show when={props.items.length > 0}>
+                        <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>
+                            <div class="w-24 shrink-0 text-right">Price</div>
+                            <div class="w-24 shrink-0 text-right">Subtotal</div>
+                            <Show when={props.isSidebarCollapsed() || !props.hideColumns}>
+                                <div class="w-32 shrink-0 text-center">Markup</div>
+                                <div class="w-32 shrink-0 text-center">Contingency</div>
+                            </Show>
+                            <div class="w-28 shrink-0 text-right px-2">Total</div>
+                            <div class="w-16 shrink-0"></div>
+                        </div>
+                    </Show>
 
+                    <div class="px-3 pb-3 space-y-1.5">
                         <For each={props.items}>
                             {(item) => (
                                 <LazyItem estimatedHeight={60}>
diff --git a/src/components/ui/ScopeScaleWrapper.tsx b/src/components/ui/ScopeScaleWrapper.tsx
new file mode 100644
index 0000000..98a9e55
--- /dev/null
+++ b/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;
diff --git a/src/index.css b/src/index.css
index 6806d7a..3a8114b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -104,4 +104,30 @@
   .print-only {
     @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);
 }
\ No newline at end of file