diff --git a/packages/dashboard/README.md b/packages/dashboard/README.md
index 6116abfb3..8357d661f 100644
--- a/packages/dashboard/README.md
+++ b/packages/dashboard/README.md
@@ -372,6 +372,8 @@ The Git Manager provides comprehensive repository visualization and management d
 - Track free/used worktree count
 
 **Remotes Tab**: Perform remote operations with commit visibility:
+- Selector/detail presentation: remotes are listed in a dedicated selector column while sync status, URLs, and commit inspection render in a focused detail panel for the selected remote
+- Responsive flow: at mobile widths, remotes keep the same selector/detail workflow in a stacked layout so fetch/pull/push and edit actions remain reachable without horizontal crowding
 - Fetch from origin
 - Pull latest changes
 - Push current branch
diff --git a/packages/dashboard/app/components/GitManagerModal.tsx b/packages/dashboard/app/components/GitManagerModal.tsx
index 8d2a99bae..8784b1a85 100644
--- a/packages/dashboard/app/components/GitManagerModal.tsx
+++ b/packages/dashboard/app/components/GitManagerModal.tsx
@@ -370,7 +370,7 @@ export function GitManagerModal({ isOpen, onClose, tasks: _tasks, addToast, proj
     } catch (err) {
       addToast(getErrorMessage(err) || "Failed to discard changes", "error");
     }
-  }, [addToast, projectId, confirm]);
+  }, [addToast, projectId, confirmContext]);
 
   const handleCommit = useCallback(async (e: React.FormEvent) => {
     e.preventDefault();
@@ -565,7 +565,7 @@ export function GitManagerModal({ isOpen, onClose, tasks: _tasks, addToast, proj
     } finally {
       setLoading(false);
     }
-  }, [addToast, projectId, confirm]);
+  }, [addToast, projectId, confirmContext]);
 
   const filteredBranches = useMemo(() => {
     if (!branchSearch.trim()) return branches;
@@ -678,7 +678,7 @@ export function GitManagerModal({ isOpen, onClose, tasks: _tasks, addToast, proj
     } finally {
       setStashLoading(null);
     }
-  }, [addToast, projectId, confirm]);
+  }, [addToast, projectId, confirmContext]);
 
   // ── Remote Handlers ─────────────────────────────────────────────
 
@@ -2062,7 +2062,7 @@ function RemotesPanel({
                 value={newRemoteName}
                 onChange={(e) => setNewRemoteName(e.target.value)}
                 disabled={remoteActionLoading === "add"}
-                className="gm-input"
+                className="input gm-input"
               />
               <input
                 type="text"
@@ -2070,7 +2070,7 @@ function RemotesPanel({
                 value={newRemoteUrl}
                 onChange={(e) => setNewRemoteUrl(e.target.value)}
                 disabled={remoteActionLoading === "add"}
-                className="gm-input gm-input-url"
+                className="input gm-input gm-input-url"
               />
               <button
                 type="submit"
@@ -2103,20 +2103,26 @@ function RemotesPanel({
                 onClick={() => setSelectedRemote(remote.name)}
                 role="button"
                 tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    setSelectedRemote(remote.name);
+                  }
+                }}
               >
                 <div className="gm-remote-selector-info">
                   <span className="gm-remote-selector-name">
-                    {remote.name}
+                    <span className="gm-remote-selector-name-text">{remote.name}</span>
                     {remote.name === "origin" && (
                       <span className="gm-remote-default-badge">default</span>
                     )}
                   </span>
-                  <span className="gm-remote-selector-host">
+                  <span className="gm-remote-selector-host" title={remote.fetchUrl}>
                     {getHostFromUrl(remote.fetchUrl)}
                   </span>
                 </div>
                 <button
-                  className="btn btn-icon btn-sm"
+                  className="btn btn-icon btn-sm gm-remote-remove-btn"
                   onClick={(e) => { e.stopPropagation(); handleRemoveRemote(remote.name); }}
                   disabled={remoteActionLoading !== null}
                   title="Remove remote"
@@ -2140,12 +2146,14 @@ function RemotesPanel({
                     <div className="gm-remote-status">
                       {status.ahead > 0 && (
                         <div className="gm-remote-indicator ahead">
+                          <span className="status-dot status-dot--online" aria-hidden="true" />
                           <ArrowUp size={14} />
                           {status.ahead} to push
                         </div>
                       )}
                       {status.behind > 0 && (
                         <div className="gm-remote-indicator behind">
+                          <span className="status-dot status-dot--pending" aria-hidden="true" />
                           <ArrowDown size={14} />
                           {status.behind} to pull
                         </div>
@@ -2205,7 +2213,7 @@ function RemotesPanel({
                           type="text"
                           value={editUrlValue}
                           onChange={(e) => setEditUrlValue(e.target.value)}
-                          className="gm-input"
+                          className="input gm-input"
                           autoFocus
                         />
                         <button
@@ -2230,23 +2238,25 @@ function RemotesPanel({
                     ) : (
                       <>
                         <span className="gm-url-value" title={selectedRemoteData.fetchUrl}>
-                          {selectedRemoteData.fetchUrl}
+                          <bdo dir="ltr">{selectedRemoteData.fetchUrl}</bdo>
                         </span>
-                        <button
-                          className="btn btn-icon btn-sm"
-                          onClick={() => copyToClipboard(selectedRemoteData.fetchUrl, "fetch URL")}
-                          title="Copy fetch URL"
-                        >
-                          <Copy size={14} />
-                        </button>
-                        <button
-                          className="btn btn-icon btn-sm"
-                          onClick={() => startEditingUrl(selectedRemoteData)}
-                          disabled={remoteActionLoading !== null}
-                          title="Edit remote URL"
-                        >
-                          <Pencil size={14} />
-                        </button>
+                        <div className="gm-remote-inline-actions">
+                          <button
+                            className="btn btn-icon btn-sm"
+                            onClick={() => copyToClipboard(selectedRemoteData.fetchUrl, "fetch URL")}
+                            title="Copy fetch URL"
+                          >
+                            <Copy size={14} />
+                          </button>
+                          <button
+                            className="btn btn-icon btn-sm"
+                            onClick={() => startEditingUrl(selectedRemoteData)}
+                            disabled={remoteActionLoading !== null}
+                            title="Edit remote URL"
+                          >
+                            <Pencil size={14} />
+                          </button>
+                        </div>
                       </>
                     )}
                   </div>
@@ -2256,15 +2266,17 @@ function RemotesPanel({
                     <div className="gm-remote-detail-url-row">
                       <span className="gm-url-label">Push:</span>
                       <span className="gm-url-value" title={selectedRemoteData.pushUrl}>
-                        {selectedRemoteData.pushUrl}
+                        <bdo dir="ltr">{selectedRemoteData.pushUrl}</bdo>
                       </span>
-                      <button
-                        className="btn btn-icon btn-sm"
-                        onClick={() => copyToClipboard(selectedRemoteData.pushUrl!, "push URL")}
-                        title="Copy push URL"
-                      >
-                        <Copy size={14} />
-                      </button>
+                      <div className="gm-remote-inline-actions">
+                        <button
+                          className="btn btn-icon btn-sm"
+                          onClick={() => copyToClipboard(selectedRemoteData.pushUrl!, "push URL")}
+                          title="Copy push URL"
+                        >
+                          <Copy size={14} />
+                        </button>
+                      </div>
                     </div>
                   )}
                 </div>
@@ -2277,7 +2289,7 @@ function RemotesPanel({
                         type="text"
                         value={editNameValue}
                         onChange={(e) => setEditNameValue(e.target.value)}
-                        className="gm-input"
+                        className="input gm-input"
                         autoFocus
                       />
                       <button
@@ -2335,6 +2347,12 @@ function RemotesPanel({
                             onClick={() => handleCompactCommitClick(commit.hash, "ahead")}
                             role="button"
                             tabIndex={0}
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                handleCompactCommitClick(commit.hash, "ahead");
+                              }
+                            }}
                             title="Click to view diff"
                           >
                             <div className="gm-commit-compact-hash">
@@ -2416,6 +2434,12 @@ function RemotesPanel({
                           onClick={() => handleCompactCommitClick(commit.hash, "remote")}
                           role="button"
                           tabIndex={0}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              handleCompactCommitClick(commit.hash, "remote");
+                            }
+                          }}
                           title="Click to view diff"
                         >
                           <div className="gm-commit-compact-hash">
diff --git a/packages/dashboard/app/components/ScriptsModal.css b/packages/dashboard/app/components/ScriptsModal.css
index 79b5d4cb4..8de651231 100644
--- a/packages/dashboard/app/components/ScriptsModal.css
+++ b/packages/dashboard/app/components/ScriptsModal.css
@@ -1749,7 +1749,7 @@
   width: 160px;
   min-width: 160px;
   border-right: 1px solid var(--border);
-  background: rgba(0, 0, 0, 0.05);
+  background: color-mix(in srgb, var(--bg) 35%, transparent);
   padding: var(--space-sm) 0;
   overflow-y: auto;
 }
@@ -1772,12 +1772,12 @@
 
 .gm-nav-item:hover {
   color: var(--text);
-  background: rgba(255, 255, 255, 0.05);
+  background: color-mix(in srgb, var(--text) 5%, transparent);
 }
 
 .gm-nav-item.active {
   color: var(--text);
-  background: rgba(88, 166, 255, 0.08);
+  background: color-mix(in srgb, var(--todo) 8%, transparent);
   border-left-color: var(--todo);
   font-weight: 500;
 }
@@ -1819,8 +1819,8 @@
   align-items: center;
   gap: var(--space-sm);
   padding: var(--space-lg);
-  background: rgba(248, 81, 73, 0.1);
-  border: 1px solid rgba(248, 81, 73, 0.2);
+  background: color-mix(in srgb, var(--color-error) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-error) 20%, transparent);
   border-radius: var(--radius-md);
   color: var(--color-error);
   font-size: 13px;
@@ -1911,18 +1911,18 @@
 
 .gm-status-badge.clean {
   color: var(--color-success);
-  background: rgba(63, 185, 80, 0.1);
+  background: color-mix(in srgb, var(--color-success) 10%, transparent);
 }
 
 .gm-status-badge.dirty {
   color: var(--color-error);
-  background: rgba(248, 81, 73, 0.1);
+  background: color-mix(in srgb, var(--color-error) 10%, transparent);
 }
 
 .gm-hash {
   font-family: var(--font-mono);
   font-size: 12px;
-  background: rgba(255, 255, 255, 0.05);
+  background: color-mix(in srgb, var(--text) 5%, transparent);
   padding: 2px 6px;
   border-radius: var(--radius-sm);
   color: var(--todo);
@@ -1972,7 +1972,7 @@
 }
 
 .gm-icon-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: color-mix(in srgb, var(--text) 10%, transparent);
   color: var(--text);
 }
 
@@ -2031,7 +2031,7 @@
   font-weight: 600;
   padding: 2px 6px;
   border-radius: var(--radius-sm);
-  background: rgba(248, 81, 73, 0.1);
+  background: color-mix(in srgb, var(--color-error) 10%, transparent);
   color: var(--color-error);
 }
 
@@ -2128,7 +2128,7 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--space-sm) var(--space-md);
-  background: rgba(0, 0, 0, 0.1);
+  background: color-mix(in srgb, var(--bg) 55%, transparent);
   border-bottom: 1px solid var(--border);
 }
 
@@ -2158,7 +2158,7 @@
   align-items: center;
   gap: var(--space-sm);
   padding: var(--space-xs) var(--space-md);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid color-mix(in srgb, var(--text) 3%, transparent);
   font-size: 13px;
   transition: background var(--transition-fast);
   cursor: pointer;
@@ -2169,11 +2169,11 @@
 }
 
 .gm-file-item:hover {
-  background: rgba(255, 255, 255, 0.03);
+  background: color-mix(in srgb, var(--text) 3%, transparent);
 }
 
 .gm-file-item.staged {
-  background: rgba(63, 185, 80, 0.03);
+  background: color-mix(in srgb, var(--color-success) 3%, transparent);
 }
 
 .gm-file-item.active {
@@ -2235,23 +2235,23 @@
 
 .gm-file-badge-added,
 .gm-file-badge-untracked {
-  background: rgba(63, 185, 80, 0.15);
+  background: color-mix(in srgb, var(--color-success) 15%, transparent);
   color: var(--color-success);
 }
 
 .gm-file-badge-modified {
-  background: rgba(88, 166, 255, 0.15);
+  background: color-mix(in srgb, var(--todo) 15%, transparent);
   color: var(--todo);
 }
 
 .gm-file-badge-deleted {
-  background: rgba(248, 81, 73, 0.15);
+  background: color-mix(in srgb, var(--color-error) 15%, transparent);
   color: var(--color-error);
 }
 
 .gm-file-badge-renamed,
 .gm-file-badge-copied {
-  background: rgba(188, 140, 255, 0.15);
+  background: color-mix(in srgb, var(--in-progress) 15%, transparent);
   color: var(--in-progress);
 }
 
@@ -2520,7 +2520,7 @@
 }
 
 .gm-commit-header:hover {
-  background: rgba(255, 255, 255, 0.03);
+  background: color-mix(in srgb, var(--text) 3%, transparent);
 }
 
 .gm-commit-top-row {
@@ -2551,7 +2551,7 @@
   font-weight: 600;
   padding: 1px 5px;
   border-radius: var(--radius-sm);
-  background: rgba(188, 140, 255, 0.15);
+  background: color-mix(in srgb, var(--in-progress) 15%, transparent);
   color: var(--in-progress);
   text-transform: uppercase;
 }
@@ -2588,7 +2588,7 @@
 .gm-load-more:hover {
   color: var(--text);
   border-color: var(--text-muted);
-  background: rgba(255, 255, 255, 0.03);
+  background: color-mix(in srgb, var(--text) 3%, transparent);
 }
 
 /* ── Create Form (branches, stashes) ── */
@@ -2637,7 +2637,7 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--space-sm) var(--space-md);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid color-mix(in srgb, var(--text) 3%, transparent);
   transition: background var(--transition-fast);
 }
 
@@ -2646,11 +2646,11 @@
 }
 
 .gm-branch-item:hover {
-  background: rgba(255, 255, 255, 0.03);
+  background: color-mix(in srgb, var(--text) 3%, transparent);
 }
 
 .gm-branch-item.current {
-  background: rgba(88, 166, 255, 0.05);
+  background: color-mix(in srgb, var(--todo) 5%, transparent);
 }
 
 .gm-branch-info {
@@ -2693,17 +2693,17 @@
 /* ── Branch Selection Details ── */
 
 .gm-branch-item.selected {
-  background: rgba(88, 166, 255, 0.08);
+  background: color-mix(in srgb, var(--todo) 8%, transparent);
   cursor: pointer;
 }
 
 .gm-branch-item.selected:hover {
-  background: rgba(88, 166, 255, 0.12);
+  background: color-mix(in srgb, var(--todo) 12%, transparent);
 }
 
 .gm-branch-details {
-  background: rgba(0, 0, 0, 0.15);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  background: color-mix(in srgb, var(--bg) 65%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--text) 5%, transparent);
   padding: var(--space-sm) var(--space-md);
 }
 
@@ -2738,7 +2738,7 @@
 }
 
 .gm-branch-commit {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid color-mix(in srgb, var(--text) 3%, transparent);
 }
 
 .gm-branch-commit:last-child {
@@ -2761,7 +2761,7 @@
 }
 
 .gm-branch-commit-row:hover {
-  background: rgba(255, 255, 255, 0.03);
+  background: color-mix(in srgb, var(--text) 3%, transparent);
 }
 
 /* ── Worktrees Panel ── */
@@ -2837,7 +2837,7 @@
   font-weight: 600;
   padding: 1px 6px;
   border-radius: var(--radius-sm);
-  background: rgba(88, 166, 255, 0.12);
+  background: color-mix(in srgb, var(--todo) 12%, transparent);
   color: var(--todo);
 }
 
@@ -2850,12 +2850,12 @@
 }
 
 .gm-badge.main {
-  background: rgba(63, 185, 80, 0.15);
+  background: color-mix(in srgb, var(--color-success) 15%, transparent);
   color: var(--color-success);
 }
 
 .gm-badge.bare {
-  background: rgba(139, 148, 158, 0.15);
+  background: color-mix(in srgb, var(--text-muted) 15%, transparent);
   color: var(--text-muted);
 }
 
@@ -2925,34 +2925,44 @@
 
 .gm-remote-status {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
   gap: var(--space-sm);
 }
 
 .gm-remote-indicator {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: var(--space-sm);
-  padding: var(--space-sm) var(--space-md);
-  border-radius: var(--radius-sm);
-  font-size: 13px;
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-pill);
+  font-size: var(--text-xs, 12px);
+  font-weight: 500;
+}
+
+.gm-remote-indicator .status-dot {
+  margin-right: 0;
 }
 
 .gm-remote-indicator.ahead {
-  background: rgba(63, 185, 80, 0.08);
+  background: color-mix(in srgb, var(--color-success) 10%, transparent);
   color: var(--color-success);
 }
 
 .gm-remote-indicator.behind {
-  background: rgba(248, 81, 73, 0.08);
-  color: var(--color-error);
+  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
+  color: var(--color-warning);
 }
 
 .gm-remote-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: var(--space-sm);
 }
 
+.gm-remote-actions .btn {
+  flex: 1 1 calc(var(--space-2xl) * 5);
+}
+
 .gm-remote-result {
   padding: var(--space-sm) var(--space-md);
   background: var(--card);
@@ -2972,24 +2982,24 @@
 }
 
 .gm-remotes-layout {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(calc(var(--space-2xl) * 6), calc(var(--space-2xl) * 8)) minmax(0, 1fr);
   gap: var(--space-md);
   flex: 1;
   min-height: 0;
-  overflow: hidden;
 }
 
 /* ── Remote Selector (Left Column) ── */
 
 .gm-remote-selector {
-  width: 200px;
-  min-width: 200px;
-  border-right: 1px solid var(--border);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
-  padding-right: var(--space-sm);
+  padding: var(--space-sm);
+  background: color-mix(in srgb, var(--surface) 55%, transparent);
 }
 
 .gm-remote-selector-header {
@@ -3015,25 +3025,33 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: var(--space-sm);
   padding: var(--space-sm);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
   cursor: pointer;
-  transition: background var(--transition-fast);
+  transition: background var(--transition-fast), border-color var(--transition-fast);
 }
 
 .gm-remote-selector-item:hover {
-  background: var(--hover);
+  background: var(--card-hover);
+}
+
+.gm-remote-selector-item:focus-visible {
+  outline: none;
+  border-color: var(--todo);
+  box-shadow: var(--focus-ring-strong);
 }
 
 .gm-remote-selector-item.selected {
-  border: 1px solid var(--primary);
-  background: var(--primary-bg, color-mix(in srgb, var(--primary) 8%, transparent));
+  border-color: var(--todo);
+  background: color-mix(in srgb, var(--todo) 12%, transparent);
 }
 
 .gm-remote-selector-info {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--space-xs);
   min-width: 0;
   flex: 1;
 }
@@ -3042,18 +3060,27 @@
   display: flex;
   align-items: center;
   gap: var(--space-xs);
+  min-width: 0;
   font-weight: 600;
   font-size: 14px;
   color: var(--text);
 }
 
+.gm-remote-selector-name-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .gm-remote-default-badge {
   font-size: 10px;
-  font-weight: 500;
-  padding: 1px 6px;
+  font-weight: 600;
+  padding: 0 var(--space-xs);
   border-radius: var(--radius-pill);
-  background: color-mix(in srgb, var(--primary) 15%, transparent);
-  color: var(--primary);
+  background: color-mix(in srgb, var(--todo) 16%, transparent);
+  color: var(--todo);
+  line-height: 1.6;
 }
 
 .gm-remote-selector-host {
@@ -3074,6 +3101,7 @@
   gap: var(--space-md);
   overflow-y: auto;
   min-width: 0;
+  padding-right: var(--space-xs);
 }
 
 /* ── Sync Card ── */
@@ -3085,7 +3113,7 @@
   border-radius: var(--radius-md);
   display: flex;
   flex-direction: column;
-  gap: var(--space-sm);
+  gap: var(--space-md);
 }
 
 .gm-remote-sync-card-header {
@@ -3114,6 +3142,23 @@
   gap: var(--space-sm);
 }
 
+.gm-section-subheader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-xs) 0;
+}
+
+.gm-section-subheader h5 {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-size: var(--text-xs, 12px);
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
 .gm-remote-detail-urls {
   display: flex;
   flex-direction: column;
@@ -3122,9 +3167,9 @@
 
 .gm-remote-detail-url-row {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--space-sm);
-  font-size: 12px;
+  font-size: var(--text-xs, 12px);
   font-family: var(--font-mono);
 }
 
@@ -3136,10 +3181,21 @@
 
 .gm-url-value {
   color: var(--text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   flex: 1;
+  min-width: 0;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.gm-remote-inline-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  flex-shrink: 0;
+}
+
+.gm-remote-remove-btn {
+  flex-shrink: 0;
 }
 
 .gm-remote-detail-name-row {
@@ -3207,7 +3263,7 @@
 }
 
 .gm-commit-item-compact:hover {
-  background: var(--hover);
+  background: var(--card-hover);
 }
 
 .gm-commit-compact-hash {
@@ -3255,6 +3311,11 @@
   background: var(--card-hover);
 }
 
+.gm-commit-clickable:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-strong);
+}
+
 .gm-commit-expand-icon {
   flex-shrink: 0;
   color: var(--text-muted);
@@ -3272,7 +3333,7 @@
   font-size: 13px;
   font-weight: 600;
   color: var(--text);
-  background: var(--bg-surface);
+  background: var(--bg-surface, var(--surface-subtle));
   border-bottom: 1px solid var(--border);
   white-space: pre-wrap;
   word-break: break-word;
@@ -3288,6 +3349,41 @@
 
 /* ── Responsive ── */
 
+@media (max-width: 768px) {
+  .gm-remotes-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .gm-remote-selector {
+    max-height: calc(var(--space-2xl) * 8);
+  }
+
+  .gm-remote-selector-header {
+    position: static;
+  }
+
+  .gm-remote-selector-item {
+    align-items: flex-start;
+  }
+
+  .gm-remote-selector-name {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .gm-remote-detail {
+    padding-right: 0;
+  }
+
+  .gm-remote-detail-url-row {
+    flex-wrap: wrap;
+  }
+
+  .gm-remote-inline-actions {
+    margin-left: auto;
+  }
+}
+
 @media (max-width: 640px) {
   /* Full-screen sheet on mobile — drop overlay padding so the modal
      actually fills the viewport instead of being pushed below it. */
@@ -3401,18 +3497,17 @@
   }
 
   .gm-remotes-layout {
+    display: flex;
     flex-direction: column;
   }
 
   .gm-remote-selector {
     width: 100%;
-    min-width: unset;
-    border-right: none;
-    border-bottom: 1px solid var(--border);
+    min-width: 0;
+    border-right: 1px solid var(--border);
     flex-direction: row;
     overflow-x: auto;
     overflow-y: hidden;
-    padding-right: 0;
     padding-bottom: var(--space-sm);
   }
 
@@ -3504,7 +3599,7 @@
 
 [data-theme="light"] .gm-remote-selector {
   background: var(--surface-subtle);
-  border-right-color: rgba(0, 0, 0, 0.08);
+  border-color: var(--border);
 }
 
 [data-theme="light"] .gm-remote-selector-item:hover {
@@ -3521,21 +3616,21 @@
 
 [data-theme="light"] .gm-remote-sync-card {
   background: var(--surface-subtle);
-  border-color: rgba(0, 0, 0, 0.08);
+  border-color: var(--border);
 }
 
 [data-theme="light"] .gm-remote-detail-card {
   background: var(--surface-subtle);
-  border-color: rgba(0, 0, 0, 0.08);
+  border-color: var(--border);
 }
 
 [data-theme="light"] .gm-remote-form {
   background: var(--surface-subtle);
-  border-color: rgba(0, 0, 0, 0.08);
+  border-color: var(--border);
 }
 
 [data-theme="light"] .gm-remote-detail-name-row {
-  border-top-color: rgba(0, 0, 0, 0.08);
+  border-top-color: var(--border);
 }
 
 [data-theme="light"] .gm-remote-default-badge {
diff --git a/packages/dashboard/app/components/__tests__/GitManagerModal.test.tsx b/packages/dashboard/app/components/__tests__/GitManagerModal.test.tsx
index 8c689f938..c02024c0e 100644
--- a/packages/dashboard/app/components/__tests__/GitManagerModal.test.tsx
+++ b/packages/dashboard/app/components/__tests__/GitManagerModal.test.tsx
@@ -3,6 +3,7 @@ import { render, screen, fireEvent, waitFor, within } from "@testing-library/rea
 import userEvent from "@testing-library/user-event";
 import { GitManagerModal } from "../GitManagerModal";
 import type { Task } from "@fusion/core";
+import { loadAllAppCss } from "../../test/cssFixture";
 
 // Mock the API module with all functions
 vi.mock("../../api", async () => {
@@ -1225,20 +1226,59 @@ describe("GitManagerModal", () => {
 
   // ── Remote Management Tests ───────────────────────────────────
 
-  it("shows list of remotes with URLs", async () => {
+  it("shows selector/detail split and selected highlight in remotes tab", async () => {
     (fetchGitRemotesDetailed as any).mockResolvedValue([
       { name: "origin", fetchUrl: "https://github.com/dustinbyrne/kb.git", pushUrl: "https://github.com/dustinbyrne/kb.git" },
       { name: "upstream", fetchUrl: "https://github.com/upstream/kb.git", pushUrl: "git@github.com:upstream/kb.git" },
     ]);
 
-    render(
+    const user = userEvent.setup();
+    const { container } = render(
       <GitManagerModal isOpen={true} onClose={vi.fn()} tasks={mockTasks} addToast={mockAddToast} />
     );
     fireEvent.click(screen.getByRole("tab", { name: /remotes/i }));
 
     await waitFor(() => {
-      expect(screen.getByText("origin")).toBeInTheDocument();
-      expect(screen.getByText("upstream")).toBeInTheDocument();
+      expect(screen.getByTestId("remote-selector")).toBeInTheDocument();
+      expect(screen.getByTestId("remote-detail-panel")).toBeInTheDocument();
+    });
+
+    await waitFor(() => {
+      const selectedOrigin = container.querySelector(".gm-remote-selector-item.selected");
+      expect(selectedOrigin).toBeTruthy();
+      expect(selectedOrigin?.textContent ?? "").toContain("origin");
+    });
+
+    const remoteSelector = screen.getByTestId("remote-selector");
+    const upstreamButton = within(remoteSelector).getByText("upstream").closest(".gm-remote-selector-item");
+    expect(upstreamButton).toBeTruthy();
+    await user.click(upstreamButton as HTMLElement);
+
+    await waitFor(() => {
+      const selectedUpstream = container.querySelector(".gm-remote-selector-item.selected");
+      expect(selectedUpstream).toBeTruthy();
+      expect(selectedUpstream?.textContent ?? "").toContain("upstream");
+    });
+  });
+
+  it("renders full URL in selected detail card and not in selector row", async () => {
+    (fetchGitRemotesDetailed as any).mockResolvedValue([
+      { name: "origin", fetchUrl: "https://github.com/dustinbyrne/kb.git", pushUrl: "https://github.com/dustinbyrne/kb.git" },
+      { name: "upstream", fetchUrl: "https://example.com/some/very/long/path/repository-name.git", pushUrl: "https://example.com/some/very/long/path/repository-name.git" },
+    ]);
+
+    const user = userEvent.setup();
+    render(
+      <GitManagerModal isOpen={true} onClose={vi.fn()} tasks={mockTasks} addToast={mockAddToast} />
+    );
+    fireEvent.click(screen.getByRole("tab", { name: /remotes/i }));
+
+    await user.click(await screen.findByText("upstream"));
+
+    await waitFor(() => {
+      const detailCard = screen.getByTestId("remote-detail-card");
+      expect(within(detailCard).getByText("https://example.com/some/very/long/path/repository-name.git")).toBeInTheDocument();
+      expect(screen.getByText("example.com")).toBeInTheDocument();
     });
   });
 
@@ -2533,4 +2573,24 @@ describe("GitManagerModal", () => {
       });
     });
   });
+
+  describe("remotes CSS regression coverage", () => {
+    it("includes remotes layout selectors and mobile rules", () => {
+      const css = loadAllAppCss();
+      expect(css).toContain(".gm-remotes-layout");
+      expect(css).toContain(".gm-remote-selector");
+      expect(css).toContain(".gm-remote-detail");
+      expect(css).toContain(".gm-remote-sync-card");
+      expect(css).toContain(".gm-remote-detail-card");
+      expect(css).toMatch(/@media \(max-width: 768px\)\s*\{[\s\S]*?\.gm-remotes-layout[\s\S]*?\.gm-remote-selector[\s\S]*?\}/);
+    });
+
+    it("keeps remotes-specific status/surface styles tokenized", () => {
+      const css = loadAllAppCss();
+      const remoteSection = css.slice(css.indexOf("/* ── Remote Panel ── */"), css.indexOf("/* ── Commit Items (shared) ── */"));
+      expect(remoteSection).toContain("color-mix(");
+      expect(remoteSection).not.toMatch(/rgba\(/i);
+      expect(remoteSection).not.toMatch(/#[0-9a-f]{3,8}/i);
+    });
+  });
 });