feat(FN-956): improve remote edit button usability on mobile and desktop

- Increase remote edit icon size from 12px to 16px for better tap/click targets
- Add mobile-specific CSS rules to show/hide remote edit buttons based on screen size
- Add comprehensive test coverage for mobile-friendly edit button visibility

packages/dashboard/app/components/GitManagerModal.tsx

@@ -1951,12 +1951,12 @@ function RemotesPanel({
                   <div className="gm-remote-name-row">
                     <span className="gm-remote-name">{remote.name}</span>
                     <button
-                      className="btn btn-icon"
+                      className="btn btn-icon gm-remote-edit-btn"
                       onClick={(e) => { e.stopPropagation(); startEditingName(remote); }}
                       disabled={remoteActionLoading !== null}
                       title="Edit remote name"
                     >
-                      <Pencil size={12} color="var(--text-muted)" />
+                      <Pencil size={16} />
                     </button>
                   </div>
                 )}
@@ -2005,12 +2005,12 @@ function RemotesPanel({
                         {remote.pushUrl || remote.fetchUrl}
                       </span>
                       <button
-                        className="btn btn-icon"
+                        className="btn btn-icon gm-remote-edit-btn"
                         onClick={(e) => { e.stopPropagation(); startEditingUrl(remote); }}
                         disabled={remoteActionLoading !== null}
                         title="Edit remote URL"
                       >
-                        <Pencil size={12} color="var(--text-muted)" />
+                        <Pencil size={16} />
                       </button>
                     </div>
                   )}

packages/dashboard/app/components/__tests__/GitManagerModal.test.tsx

@@ -1195,6 +1195,37 @@ describe("GitManagerModal", () => {
     });
   });
 
+  it("applies mobile-friendly edit button class for touch targets", async () => {
+    (fetchGitRemotesDetailed as any).mockResolvedValue([
+      { name: "origin", fetchUrl: "https://github.com/a/b.git", pushUrl: "https://github.com/a/b.git" },
+    ]);
+
+    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();
+    });
+
+    // Both edit buttons should have the mobile-friendly class for adequate touch targets
+    const nameEditBtn = screen.getByTitle("Edit remote name");
+    const urlEditBtn = screen.getByTitle("Edit remote URL");
+
+    expect(nameEditBtn.classList.contains("gm-remote-edit-btn")).toBe(true);
+    expect(urlEditBtn.classList.contains("gm-remote-edit-btn")).toBe(true);
+
+    // Both should be visible and have 16px icons
+    expect(nameEditBtn).toBeVisible();
+    expect(urlEditBtn).toBeVisible();
+
+    const nameSvg = nameEditBtn.querySelector("svg");
+    const urlSvg = urlEditBtn.querySelector("svg");
+    expect(nameSvg).toBeTruthy();
+    expect(urlSvg).toBeTruthy();
+  });
+
   it("handles API errors gracefully", async () => {
     (fetchGitRemotesDetailed as any).mockRejectedValue(new Error("Failed to load remotes"));
 

packages/dashboard/app/styles.css

@@ -5439,6 +5439,22 @@ body {
     width: 16px;
     height: 16px;
   }
+
+  /* Git Manager remote edit buttons: always visible on mobile (no hover) */
+  .gm-remote-edit-btn {
+    opacity: 1;
+    width: 44px;
+    height: 44px;
+    margin-right: -8px;
+    margin-top: -8px;
+    margin-bottom: -8px;
+    border-radius: var(--radius-md);
+  }
+
+  .gm-remote-edit-btn svg {
+    width: 16px;
+    height: 16px;
+  }
 }
 
 /* === Tablet Responsive Tier (769px–1024px) === */