From ece0d74afbdd9710610e5cefaf51ec595bc1c020 Mon Sep 17 00:00:00 2001
From: Josh Knapp <jknapp85@gmail.com>
Date: Sun, 27 Sep 2026 06:41:43 -0700
Subject: [PATCH] Settings: let the shared-auth buttons wrap inside the sidebar

Re-authenticate, Revoke and Check snapshot images are each nowrap and
together wider than the settings sidebar, so the last one ran outside
its container.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/settings/SharedAuthSettings.test.tsx   | 11 +++++++++++
 app/src/components/settings/SharedAuthSettings.tsx    |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/src/components/settings/SharedAuthSettings.test.tsx b/app/src/components/settings/SharedAuthSettings.test.tsx
index d221894..dae02d7 100644
--- a/app/src/components/settings/SharedAuthSettings.test.tsx
+++ b/app/src/components/settings/SharedAuthSettings.test.tsx
@@ -140,6 +140,17 @@ describe("SharedAuthSettings", () => {
     await waitFor(() => expect(hasClaudeToken).toHaveBeenCalled());
   });
 
+  it("lets the action buttons wrap instead of running out of the sidebar", async () => {
+    // Re-authenticate, Revoke and Check snapshot images are each nowrap, and
+    // together they are wider than the settings sidebar.
+    projects = [running()];
+    hasClaudeToken.mockResolvedValue(true);
+    render(<SharedAuthSettings />);
+
+    const sweep = await screen.findByTestId("shared-auth-sweep");
+    expect(sweep.parentElement).toHaveClass("flex-wrap");
+  });
+
   it("enables Authenticate once a container is running", async () => {
     projects = [running()];
     render(<SharedAuthSettings />);
diff --git a/app/src/components/settings/SharedAuthSettings.tsx b/app/src/components/settings/SharedAuthSettings.tsx
index 23a1d1c..f2c5f5b 100644
--- a/app/src/components/settings/SharedAuthSettings.tsx
+++ b/app/src/components/settings/SharedAuthSettings.tsx
@@ -283,7 +283,7 @@ export default function SharedAuthSettings() {
         </div>
       )}
 
-      <div className="flex items-center gap-2">
+      <div className="flex flex-wrap items-center gap-2">
         <Button
           size="md"
           variant="primary"