fix: ui responsiveness

Author: kccarlos

src/web/src/App.css

@@ -175,10 +175,13 @@ button.icon-only {
   grid-template-areas:
     'header header header'
     'left   resizer right';
-  grid-template-columns: var(--left-col, minmax(320px, 1fr)) 6px 1fr;
+  /* Clamp the left column so saved px widths don't break on smaller viewports */
+  grid-template-columns: clamp(240px, var(--left-col, 40%), 55%) 6px 1fr;
   grid-template-rows: auto 1fr;
   gap: 1.25rem;
+  /* Mobile browser chrome friendly */
   height: 100vh;
+  height: 100dvh;
   padding: 2rem;
   padding-bottom: 4.5rem; /* space for fixed status footer */
   box-sizing: border-box;
@@ -238,6 +241,12 @@ button.icon-only {
   user-select: none;
 }
 
+.column-resizer:focus-visible {
+  outline: 2px solid #646cff;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
 .column-resizer:hover {
   background:
     linear-gradient(
@@ -422,3 +431,56 @@ button.icon-only {
   text-decoration: underline;
   text-underline-offset: 2px;
 }
+
+/* ---------- Responsiveness ---------- */
+/* Stack columns on narrower screens; hide the resizer */
+@media (max-width: 1100px) {
+  .app-container {
+    grid-template-areas:
+      'header'
+      'left'
+      'right';
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto 1fr;
+  }
+  .column-resizer { display: none; }
+  .left-panel, .right-panel { padding: 0; }
+}
+
+/* Tighten padding and let header wrap nicely on small devices */
+@media (max-width: 700px) {
+  .app-container {
+    padding: 1rem;
+    padding-bottom: 4.5rem;
+  }
+  .header { flex-wrap: wrap; gap: 0.5rem; }
+  .header img[alt="GitContext"] { height: 40px; }
+}
+
+/* Selected Files: rows wrap on small screens; token count drops under filename */
+.selected-file-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  flex-wrap: nowrap;
+}
+.selected-file-row .tokens {
+  opacity: 0.8;
+  min-width: 64px;
+  text-align: right;
+}
+@media (max-width: 700px) {
+  .selected-file-row { flex-wrap: wrap; }
+  .selected-file-row .tokens {
+    order: 3;
+    width: 100%;
+    min-width: 0;
+    text-align: left;
+  }
+}
+
+/* Make generic icon-only targets a bit friendlier to tap */
+@media (hover: none) and (pointer: coarse) {
+  button.icon-only { padding: 0.75em; }
+}

src/web/src/App.tsx

@@ -135,7 +135,32 @@ function App() {
     if (!handle) return
 
     const minLeft = 240 // px
-    const maxLeft = Math.max(480, Math.floor((appEl.clientWidth - 100) * 0.85))
+    const computeMaxLeft = () => Math.max(480, Math.floor((appEl.clientWidth - 100) * 0.85))
+    let maxLeft = computeMaxLeft()
+
+    // ARIA setup for accessibility
+    try {
+      handle.setAttribute('role', 'separator')
+      handle.setAttribute('aria-orientation', 'vertical')
+      handle.setAttribute('aria-valuemin', String(minLeft))
+      handle.setAttribute('aria-valuemax', String(maxLeft))
+      ;(handle as HTMLElement).tabIndex = 0
+      const current = Number((getComputedStyle(appEl).getPropertyValue('--left-col') || '').replace('px','')) || minLeft
+      handle.setAttribute('aria-valuenow', String(current))
+      handle.setAttribute('aria-label', 'Resize panels')
+    } catch {}
+
+    const applyLeft = (px: number) => {
+      const clamped = Math.min(Math.max(px, minLeft), maxLeft)
+      appEl.style.setProperty('--left-col', `${clamped}px`)
+      try {
+        localStorage.setItem('gc.leftCol', String(clamped))
+      } catch (e) {
+        logError('leftColSave', e)
+      }
+      try { handle.setAttribute('aria-valuenow', String(clamped)) } catch {}
+    }
+
     let dragging = false
 
     const onPointerDown = (e: PointerEvent) => {
@@ -149,26 +174,60 @@ function App() {
       const rect = appEl.getBoundingClientRect()
       const x = e.clientX - rect.left
       const clamped = Math.min(Math.max(x - 12, minLeft), maxLeft)
-      appEl.style.setProperty('--left-col', `${clamped}px`)
-      try {
-        localStorage.setItem('gc.leftCol', String(clamped))
-      } catch (e) {
-        logError('leftColSave', e)
-      }
+      applyLeft(clamped)
     }
     const onPointerUp = (e: PointerEvent) => {
       dragging = false
       appEl.classList.remove('resizing')
       ;(e.target as HTMLElement).releasePointerCapture?.(e.pointerId)
     }
 
+    // Keyboard support: ArrowLeft/Right, Home/End
+    const onKeyDown = (e: KeyboardEvent) => {
+      const step = e.ctrlKey ? 50 : 16
+      const curr = Number((getComputedStyle(appEl).getPropertyValue('--left-col') || '').replace('px','')) || minLeft
+      switch (e.key) {
+        case 'ArrowLeft':
+          applyLeft(curr - step)
+          e.preventDefault()
+          break
+        case 'ArrowRight':
+          applyLeft(curr + step)
+          e.preventDefault()
+          break
+        case 'Home':
+          applyLeft(minLeft)
+          e.preventDefault()
+          break
+        case 'End':
+          applyLeft(maxLeft)
+          e.preventDefault()
+          break
+      }
+    }
+
+    // Clamp saved width on window resize so layout never overflows
+    const onWindowResize = () => {
+      const nextMax = computeMaxLeft()
+      if (nextMax !== maxLeft) {
+        maxLeft = nextMax
+        try { handle.setAttribute('aria-valuemax', String(maxLeft)) } catch {}
+        const curr = Number((getComputedStyle(appEl).getPropertyValue('--left-col') || '').replace('px','')) || minLeft
+        applyLeft(curr) // re-clamp
+      }
+    }
+
     handle.addEventListener('pointerdown', onPointerDown)
+    handle.addEventListener('keydown', onKeyDown)
     window.addEventListener('pointermove', onPointerMove)
     window.addEventListener('pointerup', onPointerUp)
+    window.addEventListener('resize', onWindowResize)
     return () => {
       handle.removeEventListener('pointerdown', onPointerDown)
+      handle.removeEventListener('keydown', onKeyDown)
       window.removeEventListener('pointermove', onPointerMove)
       window.removeEventListener('pointerup', onPointerUp)
+      window.removeEventListener('resize', onWindowResize)
     }
   }, [uiHasResizer])
 
@@ -859,7 +918,14 @@ function App() {
             </div>
 
             {/* Resizer handle between columns */}
-            <div className="column-resizer" id="gc-col-resizer" />
+            <div
+              className="column-resizer"
+              id="gc-col-resizer"
+              role="separator"
+              aria-orientation="vertical"
+              aria-label="Resize panels"
+              tabIndex={0}
+            />
 
             <div className="right-panel">
               <div className="panel-section">

src/web/src/components/SelectedFilesPanel.tsx

@@ -112,7 +112,7 @@ export function SelectedFilesPanel({ gitClient, baseRef, compareRef, selectedPat
       ) : (
         <div style={{ border: '1px solid color-mix(in hsl, currentColor 20%, transparent)', borderRadius: 8, padding: '0.5rem', flex: 1, minHeight: 0, overflowY: 'auto' }}>
           {items.map((it) => (
-            <div key={it.path} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0' }}>
+            <div key={it.path} className="selected-file-row">
               <span title={pathTreeTooltip(it.path)} style={{ display: 'flex', alignItems: 'center', gap: 6, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                 <StatusIcon status={it.status} />
                 <span style={{ display: 'flex', alignItems: 'center', gap: 4, overflow: 'hidden', textOverflow: 'ellipsis' }}>
@@ -124,7 +124,7 @@ export function SelectedFilesPanel({ gitClient, baseRef, compareRef, selectedPat
                   <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.name}</span>
                 </span>
               </span>
-              <span style={{ opacity: 0.8, minWidth: 64, textAlign: 'right' }}>{it.tokens.toLocaleString()}</span>
+              <span className="tokens">{it.tokens.toLocaleString()}</span>
               <button
                 type="button"
                 onClick={() => onPreview(it.path, it.status)}