fix: mobile UX — hide mode switcher, single-column git, hide terminal button

Author: BunsDev

app/page.tsx

@@ -541,7 +541,7 @@ export default function EditorLayout() {
                 <button
                   type="button"
                   onClick={() => layout.toggle('terminal')}
-                  className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border transition ${
+                  className={`hidden sm:flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border transition ${
                     terminalVisible
                       ? 'border-[color-mix(in_srgb,var(--brand)_36%,var(--border))] bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] text-[var(--brand)]'
                       : 'border-[var(--border)] bg-[color-mix(in_srgb,var(--bg)_92%,transparent)] text-[var(--text-secondary)] hover:bg-[color-mix(in_srgb,var(--text-primary)_5%,transparent)] hover:text-[var(--text-primary)]'
@@ -585,18 +585,6 @@ export default function EditorLayout() {
                 </span>
               </div>
 
-              <div className="shell-mode-switcher shrink-0">
-                {MODE_BUTTONS.map((m, index) => (
-                  <button
-                    key={m.id}
-                    onClick={() => setMode(m.id)}
-                    className={`shell-mode-button ${mode === m.id ? 'shell-mode-button--active' : ''}`}
-                    title={`${m.label} mode (⌘⇧${index + 1})`}
-                  >
-                    <Icon icon={m.icon} width={15} height={15} />
-                  </button>
-                ))}
-              </div>
             </div>
           </div>
         ) : (

components/views/git-view.tsx

@@ -689,8 +689,8 @@ export function GitView() {
 
   return (
     <div className="flex flex-1 min-h-0 overflow-hidden">
-      {/* Left panel — source control */}
-      <div className="w-[300px] flex flex-col border-r border-[var(--border)] bg-[var(--bg)] shrink-0">
+      {/* Left panel — source control (full-width on mobile) */}
+      <div className="w-full sm:w-[300px] flex flex-col border-r border-[var(--border)] bg-[var(--bg)] shrink-0">
         {/* Header */}
         <div className="flex items-center gap-2 h-[34px] px-3 border-b border-[var(--border)] shrink-0">
           <button
@@ -1564,8 +1564,8 @@ export function GitView() {
         )}
       </div>
 
-      {/* Right panel — diff viewer */}
-      <div className="flex-1 flex flex-col bg-[var(--bg-elevated)] overflow-hidden">
+      {/* Right panel — diff viewer (hidden on mobile, shown when file selected) */}
+      <div className="hidden sm:flex flex-1 flex-col bg-[var(--bg-elevated)] overflow-hidden">
         {tab === 'changes' && activeDiff ? (
           <>
             <DiffHeader path={activeDiff.path} lines={activeDiff.lines} />