From dfc4cccb56c8e5d0000a61fd667d2a2c65080fa6 Mon Sep 17 00:00:00 2001
From: Timothy Cardoza <tcardoza@cardoza.construction>
Date: Fri, 13 Mar 2026 16:49:17 -0500
Subject: [PATCH] Layout Fixes

---
 src/components/ItemRow.tsx                    | 414 ++++++++++--------
 src/components/ScopeCard.tsx                  |  92 ++--
 src/components/SubScopeCard.tsx               |  82 ++--
 .../UnassignedItemsSection.tsx                |  51 ++-
 src/components/template/TemplateItemRow.tsx   | 192 ++++----
 5 files changed, 461 insertions(+), 370 deletions(-)

diff --git a/src/components/ItemRow.tsx b/src/components/ItemRow.tsx
index d5beefd..0570ba3 100644
--- a/src/components/ItemRow.tsx
+++ b/src/components/ItemRow.tsx
@@ -56,7 +56,7 @@ const ItemRow: Component<ItemRowProps> = (props) => {
 
     return (
         <div
-            class={`group flex items-start gap-4 p-3 border transition-all animate-in fade-in slide-in-from-left-2 
+            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
                 ${props.isSelected
                     ? 'bg-primary/5 border-primary shadow-premium z-10'
                     : 'bg-card border-border hover:shadow-premium-hover hover:border-border/80'
@@ -64,218 +64,268 @@ const ItemRow: Component<ItemRowProps> = (props) => {
                 ${isEditing() ? 'ring-1 ring-primary/20 shadow-premium border-primary/30' : 'rounded-2xl'}
             `}
         >
-            <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 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'}`}
-                title="Drag to move or click to select"
-            >
-                <GripVertical class="w-4 h-4" />
+            <div class="flex items-start gap-3">
+                <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 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'}`}
+                    title="Drag to move or click to select"
+                >
+                    <GripVertical class="w-4 h-4" />
+                </div>
+
+                <div class="flex-1 relative min-w-[200px]">
+                    <textarea
+                        ref={descriptionRef}
+                        value={localDescription()}
+                        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';
+                            }
+                        }}
+                        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
+                            ${props.anySelected ? 'cursor-default pointer-events-none' : ''}
+                        `}
+                        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) => {
+                            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>
 
-            <div class="flex-1 relative min-w-[200px]">
+            {/* 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();
+                            }}
+                            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>
 
-                <textarea
-                    ref={descriptionRef}
-                    value={localDescription()}
-                    onFocus={() => {
-                        if (!props.anySelected) setIsEditing(true);
-                    }}
-                    onBlur={handleBlur}
-                    onInput={(e) => {
-                        setLocalDescription(e.currentTarget.value);
+                    <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>
+                        <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"
+                            />
+                        </div>
+                    </div>
+                </div>
 
-                        // 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';
-                        }
-                    }}
-                    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
-                        ${props.anySelected ? 'cursor-default pointer-events-none' : ''}
-                    `}
-                    style={{
-                        "field-sizing": "content",
-                        "min-height": "1.5em"
-                    }}
-                    placeholder="Item description..."
-                />
-            </div>
-
-            <div class="w-20 shrink-0 mt-1">
-                <NumericInput
-                    dataFieldName="qty"
-                    value={props.item.quantity}
-                    onUpdate={(val) => props.onUpdate(props.item.id, { quantity: val })}
+                <div
+                    draggable="true"
                     onDragStart={(e) => {
-                        const val = props.item.quantity;
+                        const val = baseTotal();
                         const data = {
                             type: 'item-field',
                             itemId: props.item.id,
-                            fieldName: 'qty',
+                            fieldName: 'subtotal',
                             value: val,
-                            label: `${props.item.description || 'Unnamed Item'}: Qty`
+                            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();
                     }}
-                    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>
+                    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>
 
-            <div class="w-24 shrink-0 mt-1">
-                <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 })}
+                {/* 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>
+                            <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>
+                            </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="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>
+                            </div>
+                        </div>
+                    </div>
+                </Show>
+
+                <div class="flex items-center gap-3">
+                    <div
+                        draggable="true"
                         onDragStart={(e) => {
-                            const val = props.item.unitPrice;
+                            const val = total();
                             const data = {
                                 type: 'item-field',
                                 itemId: props.item.id,
-                                fieldName: 'price',
+                                fieldName: 'total',
                                 value: val,
-                                label: `${props.item.description || 'Unnamed Item'}: Price`
+                                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();
                         }}
-                        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>
-            </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={`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>
-
-            <Show when={props.isSidebarCollapsed() || !props.hideColumns}>
-                <div class="w-32 shrink-0 flex items-center gap-1.5 mt-1">
-                    <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"
+                        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'}`}
                     >
-                        {props.item.markupType === 'percent' ? '%' : '$'}
-                    </button>
-                </div>
-
-                <div class="w-32 shrink-0 flex items-center gap-1.5 mt-1">
-                    <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>
-                </div>
-            </Show>
-
-            <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 mt-2 cursor-grab hover:text-primary transition-colors ${props.isSelected ? 'text-primary' : 'text-foreground'}`}
-            >
-                ${formatNumber(total())}
-            </div>
-
-            <div class="w-16 shrink-0 flex 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 class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Total</div>
+                        ${formatNumber(total())}
                     </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 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>
                     </div>
-                </button>
+                </div>
             </div>
         </div>
     );
diff --git a/src/components/ScopeCard.tsx b/src/components/ScopeCard.tsx
index 368b43a..3c69aca 100644
--- a/src/components/ScopeCard.tsx
+++ b/src/components/ScopeCard.tsx
@@ -202,55 +202,59 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
 
                 <div
                     onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
-                    class="p-6 space-y-4 relative"
+                    class="relative overflow-x-auto min-w-0"
                 >
-                    <Show when={scopeItems().length > 0}>
-                        <div class="relative pb-4">
-                            {/* Column Headers - Sticky, Square Top */}
-                            <div class="sticky top-header 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 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>
+
+                                <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>
                             </div>
+                        </Show>
 
-                            <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>
+                        <Show when={scopeItems().length === 0 && props.subScopes.length === 0}>
+                            <div class="text-center py-8 text-muted-foreground/50 italic text-sm">
+                                Empty scope. Drag items here or add sub-scopes.
                             </div>
-                        </div>
-                    </Show>
-
-                    <Show when={scopeItems().length === 0 && props.subScopes.length === 0}>
-                        <div class="text-center py-8 text-muted-foreground/50 italic text-sm">
-                            Empty scope. Drag items here or add sub-scopes.
-                        </div>
-                    </Show>
+                        </Show>
+                    </div>
+                </div>
 
+                <div class="p-6 pt-0 space-y-4 relative">
                     {/* Sub-scopes */}
                     <div class="space-y-6 pt-4">
                         <For each={props.subScopes}>
diff --git a/src/components/SubScopeCard.tsx b/src/components/SubScopeCard.tsx
index 9842870..18ad7cd 100644
--- a/src/components/SubScopeCard.tsx
+++ b/src/components/SubScopeCard.tsx
@@ -166,48 +166,50 @@ const SubScopeCard: Component<SubScopeCardProps> = (props) => {
             <Show when={!isCollapsed()}>
                 <div
                     onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
-                    class="p-2 space-y-1.5 relative"
+                    class="relative overflow-x-auto min-w-0"
                 >
-                    {/* SubScope Column Headers */}
-                    <Show when={props.items.length > 0}>
-                        <div class="sticky top-header 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>
+                    <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>
 
-                    <For each={props.items}>
-                        {(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>
-                    <Show when={props.items.length === 0}>
-                        <div class="text-center py-4 text-[10px] font-bold text-muted-foreground/40 uppercase tracking-widest italic">
-                            Empty Sub-scope
-                        </div>
-                    </Show>
+                        <For each={props.items}>
+                            {(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>
+                        <Show when={props.items.length === 0}>
+                            <div class="text-center py-4 text-[10px] font-bold text-muted-foreground/40 uppercase tracking-widest italic">
+                                Empty Sub-scope
+                            </div>
+                        </Show>
+                    </div>
                 </div>
             </Show>
         </div>
diff --git a/src/components/estimate-builder/UnassignedItemsSection.tsx b/src/components/estimate-builder/UnassignedItemsSection.tsx
index 475cd86..0c3d0b5 100644
--- a/src/components/estimate-builder/UnassignedItemsSection.tsx
+++ b/src/components/estimate-builder/UnassignedItemsSection.tsx
@@ -43,9 +43,13 @@ export const UnassignedItemsSection: Component<UnassignedItemsSectionProps> = (p
                         {props.unassignedItems.length} Items Pending
                     </span>
                 </div>
-                <div class="relative pb-4">
-                    {/* Sticky Column Headers for Unassigned */}
-                        <div class="sticky top-header z-10 bg-background/95 backdrop-blur-sm border-b border-border py-3 mb-4 hidden md:flex items-center gap-4 text-[10px] font-black text-muted-foreground/60 uppercase tracking-[0.2em] px-3">
+                <div
+                    onClick={(e) => { if (e.target === e.currentTarget) props.clearSelection(e); }}
+                    class="relative overflow-x-auto min-w-0 px-6"
+                >
+                    <div class="min-w-full md:min-w-max flex flex-col items-stretch pb-4">
+                        {/* Sticky Column Headers for Unassigned */}
+                        <div class="sticky top-0 z-10 bg-background/95 backdrop-blur-sm border-b border-border py-3 mb-4 hidden md:flex items-center gap-4 text-[10px] font-black text-muted-foreground/60 uppercase tracking-[0.2em] 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>
@@ -59,28 +63,29 @@ export const UnassignedItemsSection: Component<UnassignedItemsSectionProps> = (p
                             <div class="w-16 shrink-0"></div>
                         </div>
 
-                <div class="grid gap-2">
-                    <For each={props.unassignedItems}>
-                        {(item) => (
-                            <LazyItem estimatedHeight={60}>
-                                <ItemRow
-                                    item={item}
-                                    onUpdate={props.updateItem}
-                                    onDelete={props.deleteItem}
-                                    onDragStart={props.handleDragStart}
-                                    onDuplicateItem={props.duplicateItem}
-                                    isSidebarCollapsed={props.isSidebarCollapsed}
-                                    isSelected={props.selectedIds.includes(item.id)}
-                                    anySelected={props.selectedIds.length > 0}
-                                    onToggleSelection={(id, isMulti, isShift) => props.toggleSelection(id, isMulti, isShift)}
-                                    hideColumns={props.anyDescriptionIsLong()}
-                                />
-                            </LazyItem>
-                        )}
-                    </For>
+                        <div class="grid gap-2">
+                            <For each={props.unassignedItems}>
+                                {(item) => (
+                                    <LazyItem estimatedHeight={60}>
+                                        <ItemRow
+                                            item={item}
+                                            onUpdate={props.updateItem}
+                                            onDelete={props.deleteItem}
+                                            onDragStart={props.handleDragStart}
+                                            onDuplicateItem={props.duplicateItem}
+                                            isSidebarCollapsed={props.isSidebarCollapsed}
+                                            isSelected={props.selectedIds.includes(item.id)}
+                                            anySelected={props.selectedIds.length > 0}
+                                            onToggleSelection={(id, isMulti, isShift) => props.toggleSelection(id, isMulti, isShift)}
+                                            hideColumns={props.anyDescriptionIsLong()}
+                                        />
+                                    </LazyItem>
+                                )}
+                            </For>
+                        </div>
+                    </div>
                 </div>
             </div>
-            </div>
         </Show>
     );
 };
diff --git a/src/components/template/TemplateItemRow.tsx b/src/components/template/TemplateItemRow.tsx
index 9f155e7..7343d75 100644
--- a/src/components/template/TemplateItemRow.tsx
+++ b/src/components/template/TemplateItemRow.tsx
@@ -30,94 +30,124 @@ const TemplateItemRow: Component<TemplateItemRowProps> = (props) => {
     };
 
     return (
-        <div class={`group flex items-start gap-4 p-3 border transition-all animate-in fade-in slide-in-from-left-2 rounded-2xl bg-card border-border hover:shadow-premium-hover hover:border-border/80 ${isEditing() ? 'ring-1 ring-primary/20 shadow-premium border-primary/30' : ''}`}>
+        <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 rounded-2xl bg-card border-border hover:shadow-premium-hover hover:border-border/80 ${isEditing() ? 'ring-1 ring-primary/20 shadow-premium border-primary/30' : ''}`}>
             
-            <div class="cursor-grab transition-colors shrink-0 w-4 mt-2 p-1 -m-1 rounded hover:bg-muted text-muted-foreground/30 hover:text-muted-foreground/60" title="Drag to reorder (Coming soon)">
-                <GripVertical class="w-4 h-4" />
-            </div>
+            <div class="flex items-start gap-3">
+                <div class="cursor-grab transition-colors shrink-0 w-4 mt-2 p-1 rounded hover:bg-muted text-muted-foreground/30 hover:text-muted-foreground/60" title="Drag to reorder (Coming soon)">
+                    <GripVertical class="w-4 h-4" />
+                </div>
 
-            <div class="flex-1 relative">
-                <textarea
-                    ref={descriptionRef}
-                    value={localDescription()}
-                    onFocus={() => 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';
-                        }
-                    }}
-                    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 mt-1">
-                <NumericInput
-                    value={props.item.quantity}
-                    onUpdate={(val) => props.onUpdate(props.item.id, { quantity: val })}
-                    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 font-bold text-foreground/80 transition-all"
-                    placeholder="Qty"
-                />
-            </div>
-
-            <div class="w-32 shrink-0 mt-1">
-                <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 })}
-                        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 font-bold text-foreground/80 transition-all"
-                        placeholder="Price"
+                <div class="flex-1 relative min-w-[200px]">
+                    <textarea
+                        ref={descriptionRef}
+                        value={localDescription()}
+                        onFocus={() => 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';
+                            }
+                        }}
+                        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 Container */}
+                <div class="flex md:hidden items-center gap-1.5 mt-1.5 px-1">
+                    <button
+                        onClick={() => 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>
 
-            <div class="w-28 shrink-0 flex items-center gap-1.5 mt-1">
-                <NumericInput
-                    value={props.item.markup}
-                    onUpdate={(val) => props.onUpdate(props.item.id, { markup: val })}
-                    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 font-bold text-primary transition-all"
-                    placeholder="Markup"
-                />
-                <button
-                    onClick={() => props.onUpdate(props.item.id, { markupType: props.item.markupType === 'percent' ? 'amount' : 'percent' })}
-                    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] transition-colors border border-border/40"
-                >
-                    {props.item.markupType === 'percent' ? '%' : '$'}
-                </button>
-            </div>
-
-            <div class="w-28 shrink-0 flex items-center gap-1.5 mt-1">
-                <NumericInput
-                    value={props.item.contingency}
-                    onUpdate={(val) => props.onUpdate(props.item.id, { contingency: val })}
-                    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 font-bold text-foreground/80 transition-all"
-                    placeholder="Cont"
-                />
-                <button
-                    onClick={() => props.onUpdate(props.item.id, { contingencyType: props.item.contingencyType === 'percent' ? 'amount' : 'percent' })}
-                    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] transition-colors border border-border/40"
-                >
-                    {props.item.contingencyType === 'percent' ? '%' : '$'}
-                </button>
-            </div>
-
-            <div class="w-10 shrink-0 flex items-center justify-end gap-1.5 mt-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
-                <button
-                    onClick={() => 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" />
+            {/* Numeric Fields Group */}
+            <div class="flex flex-wrap md:flex-nowrap items-center gap-3 md:gap-4 pl-7 md:pl-0">
+                <div class="flex items-center gap-2">
+                    <div class="w-24 shrink-0">
+                        <div class="md:hidden 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 })}
+                            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 font-bold text-foreground/80 transition-all"
+                            placeholder="Qty"
+                        />
                     </div>
-                </button>
+
+                    <div class="w-32 shrink-0">
+                        <div class="md:hidden 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 })}
+                                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 font-bold text-foreground/80 transition-all"
+                                placeholder="Price"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex items-center gap-2">
+                    <div class="w-28 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
+                                value={props.item.markup}
+                                onUpdate={(val) => props.onUpdate(props.item.id, { markup: val })}
+                                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 font-bold text-primary transition-all"
+                                placeholder="Markup"
+                            />
+                            <button
+                                onClick={() => props.onUpdate(props.item.id, { markupType: props.item.markupType === 'percent' ? 'amount' : 'percent' })}
+                                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] transition-colors border border-border/40"
+                            >
+                                {props.item.markupType === 'percent' ? '%' : '$'}
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="w-28 shrink-0">
+                        <div class="md:hidden text-[9px] font-bold text-muted-foreground/60 uppercase mb-1 ml-1">Cont</div>
+                        <div class="flex items-center gap-1.5">
+                            <NumericInput
+                                value={props.item.contingency}
+                                onUpdate={(val) => props.onUpdate(props.item.id, { contingency: val })}
+                                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 font-bold text-foreground/80 transition-all"
+                                placeholder="Cont"
+                            />
+                            <button
+                                onClick={() => props.onUpdate(props.item.id, { contingencyType: props.item.contingencyType === 'percent' ? 'amount' : 'percent' })}
+                                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] transition-colors border border-border/40"
+                            >
+                                {props.item.contingencyType === 'percent' ? '%' : '$'}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="hidden md:flex w-10 shrink-0 items-center justify-end gap-1.5 mt-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button
+                        onClick={() => 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>
         </div>
     );