fix: ui inconsistencies

Author: kccarlos

.gitignore

@@ -161,3 +161,6 @@ src/web/test-results
 
 # But keep README.md
 !README.md
+
+agent/
+.cursor/

src/web/src/App.css

@@ -12,7 +12,7 @@
   --border-col: color-mix(in hsl, currentColor 18%, transparent);
   --ring: #646cff;
   --primary: #646cff;
-  --primary-contrast: white;
+  --primary-contrast: CanvasText;
 }
 [data-theme="dark"] {
   --surface-1: color-mix(in oklab, Canvas 88%, transparent);
@@ -545,6 +545,10 @@ button {
       'right';
     grid-template-columns: 1fr;
     grid-template-rows: auto auto 1fr;
+    /* Allow content to expand beyond viewport height for scrolling */
+    min-height: 100vh;
+    min-height: 100dvh;
+    height: auto;
   }
   .column-resizer { display: none; }
   .left-panel, .right-panel { padding: 0; }

src/web/src/App.tsx

@@ -745,7 +745,7 @@ function App() {
       <div className={`app-container${!projectLoaded ? ' landing-full' : ''}`} id="gc-app">
         <header className="header">
           <div className="brand">
-            <button type="button" onClick={() => resetRepo()} title="Go to landing" aria-label="Go to landing" className="btn btn-ghost">
+            <button type="button" onClick={() => resetRepo()} title="Go to landing" aria-label="Go to landing" className="btn btn-ghost" style={{ border: 'none', background: 'transparent' }}>
               <img
                 src={`${import.meta.env.BASE_URL}${effectiveTheme === 'dark' ? 'gitcontext-full-dark.svg' : 'gitcontext-full.svg'}`}
                 alt="GitContext"
@@ -821,12 +821,12 @@ function App() {
                     </a>
                   </div>
                   <div className="row" style={{ marginTop: 8 }}>
-                    <button type="button" onClick={toggleTheme} className="btn btn-ghost btn-icon" aria-label="Toggle color scheme" title="Toggle color scheme">
+                    <button type="button" onClick={toggleTheme} className="btn btn-ghost btn-icon" aria-label="Toggle color scheme" title="Toggle color scheme" style={{ border: 'none', background: 'transparent' }}>
                       {effectiveTheme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
                     </button>
-                    <button type="button" onClick={toggleTheme} className="hint btn btn-ghost">
+                    <a href="#" onClick={(e) => { e.preventDefault(); toggleTheme(); }} className="hint">
                       {effectiveTheme === 'dark' ? 'Turn on the light' : 'Turn off the light'}
-                    </button>
+                    </a>
                   </div>
                 </div>
               </div>

src/web/src/index.css

@@ -24,6 +24,15 @@ body,
   overflow: hidden;
 }
 
+/* Allow scrolling on narrow screens when content exceeds viewport */
+@media (max-width: 1100px) {
+  html,
+  body,
+  #root {
+    overflow: auto;
+  }
+}
+
 a {
   font-weight: 500;
   color: #646cff;