From 502d4ade1cc2211c2febbc4f29f1628cff18e2e0 Mon Sep 17 00:00:00 2001
From: Michael Han <107991372+shimmyshimmer@users.noreply.github.com>
Date: Fri, 12 Jun 2026 20:01:18 -0700
Subject: [PATCH] Tidy update banner and auth button spacing (#6279)

* Fix update banner button spacing

* Reduce auth submit button horizontal padding

* Wrap web update banner actions on narrow widths

---------

Co-authored-by: Unsloth <michaelhan@Michaels-MacBook-Pro.local>
---
 .../src/components/llama-update-banner.tsx    |  8 ++--
 .../src/components/web/update-banner.tsx      | 39 ++++++++++---------
 .../features/auth/components/auth-form.tsx    |  2 +-
 3 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/studio/frontend/src/components/llama-update-banner.tsx b/studio/frontend/src/components/llama-update-banner.tsx
index 8f8bc5ca7f..1aa9fc4e60 100644
--- a/studio/frontend/src/components/llama-update-banner.tsx
+++ b/studio/frontend/src/components/llama-update-banner.tsx
@@ -203,11 +203,11 @@ export function LlamaUpdateBanner({
                 />
               </div>
             ) : (
-              <div className="mt-4 flex flex-wrap items-center justify-between gap-y-2">
+              <div className="mt-4 flex flex-wrap items-center justify-end gap-x-1 gap-y-2">
                 <Button
                   size="sm"
                   variant="ghost"
-                  className="-ml-2 h-auto rounded-full px-2.5 py-2 text-[13px] font-medium text-foreground"
+                  className="h-auto rounded-full px-3 py-2 text-[13px] font-medium text-foreground"
                   onClick={snooze}
                   data-testid="llama-update-snooze-button"
                 >
@@ -215,8 +215,8 @@ export function LlamaUpdateBanner({
                 </Button>
                 <Button
                   size="sm"
-                  // ml offsets the pill's filled edge so visual gaps stay equal
-                  className="ml-2.5 h-auto rounded-full px-3.5 py-2 text-[13px]"
+                  // -mr optically aligns the filled pill's edge with the card padding
+                  className="-mr-1 h-auto rounded-full px-3.5 py-2 text-[13px]"
                   onClick={handleUpdate}
                   data-testid="llama-update-button"
                 >
diff --git a/studio/frontend/src/components/web/update-banner.tsx b/studio/frontend/src/components/web/update-banner.tsx
index 57fcb98e95..55ef06166b 100644
--- a/studio/frontend/src/components/web/update-banner.tsx
+++ b/studio/frontend/src/components/web/update-banner.tsx
@@ -137,24 +137,27 @@ export function WebUpdateBanner({
               >
                 Release notes
               </a>
-              <Button
-                size="sm"
-                variant="ghost"
-                className="h-auto rounded-full px-2.5 py-2 text-[13px] font-medium text-foreground"
-                onClick={snooze}
-                data-testid="web-update-snooze-button"
-              >
-                Remind me later
-              </Button>
-              <Button
-                size="sm"
-                // ml offsets the pill's filled edge so visual gaps stay equal
-                className="ml-2.5 h-auto rounded-full px-3.5 py-2 text-[13px]"
-                onClick={handleCopyCommand}
-                data-testid="web-update-copy-button"
-              >
-                {copied ? "Copied" : "Copy command"}
-              </Button>
+              {/* wrap + right-align so buttons stack instead of clipping on very narrow banners */}
+              <div className="flex flex-wrap items-center justify-end gap-x-1 gap-y-2">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="h-auto rounded-full px-3 py-2 text-[13px] font-medium text-foreground"
+                  onClick={snooze}
+                  data-testid="web-update-snooze-button"
+                >
+                  Remind me later
+                </Button>
+                <Button
+                  size="sm"
+                  // -mr optically aligns the filled pill's edge with the card padding
+                  className="-mr-1 h-auto rounded-full px-3.5 py-2 text-[13px]"
+                  onClick={handleCopyCommand}
+                  data-testid="web-update-copy-button"
+                >
+                  {copied ? "Copied" : "Copy command"}
+                </Button>
+              </div>
             </div>
           </div>
         </motion.div>
diff --git a/studio/frontend/src/features/auth/components/auth-form.tsx b/studio/frontend/src/features/auth/components/auth-form.tsx
index f32ef6abcf..731993077f 100644
--- a/studio/frontend/src/features/auth/components/auth-form.tsx
+++ b/studio/frontend/src/features/auth/components/auth-form.tsx
@@ -443,7 +443,7 @@ export function AuthForm({ mode }: AuthFormProps): ReactElement | null {
 
         <Button
           type="submit"
-          className="mx-auto flex w-fit px-8"
+          className="mx-auto flex w-fit px-6"
           disabled={
             loading ||
             statusLoading ||