From c804bee0880948886b0090759bc142664dd6172b Mon Sep 17 00:00:00 2001
From: Viktor Liu <viktor@netbird.io>
Date: Thu, 27 Aug 2026 18:36:12 +0200
Subject: [PATCH] Put the approval prompt's Deny and Allow buttons on one row

---
 .../src/modules/approval/ApprovalDialog.tsx   | 47 ++++++++++---------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/client/ui/frontend/src/modules/approval/ApprovalDialog.tsx b/client/ui/frontend/src/modules/approval/ApprovalDialog.tsx
index dd442368b..ea862a85d 100644
--- a/client/ui/frontend/src/modules/approval/ApprovalDialog.tsx
+++ b/client/ui/frontend/src/modules/approval/ApprovalDialog.tsx
@@ -133,21 +133,14 @@ export default function ApprovalDialog() {
                 {t("approval.countdown", { seconds: remaining })}
             </div>
 
-            <DialogActions>
-                <Button
-                    autoFocus
-                    variant={"primary"}
-                    size={"md"}
-                    className={"w-full"}
-                    onClick={() => respond(true, false)}
-                    disabled={busy}
-                >
-                    {t("approval.action.allow")}
-                </Button>
+            {/* Deny and Allow sit side by side, in the same order as the app's
+                other confirmations. The view-only variant is a wordier label than
+                either, so it gets its own row rather than squeezing all three. */}
+            <DialogActions className={"max-w-[260px] gap-2.5"}>
                 {showViewOnly && (
                     <Button
                         variant={"secondary"}
-                        size={"md"}
+                        size={"sm"}
                         className={"w-full"}
                         onClick={() => respond(true, true)}
                         disabled={busy}
@@ -155,15 +148,27 @@ export default function ApprovalDialog() {
                         {t("approval.action.allowViewOnly")}
                     </Button>
                 )}
-                <Button
-                    variant={"danger"}
-                    size={"md"}
-                    className={"w-full"}
-                    onClick={() => respond(false, false)}
-                    disabled={busy}
-                >
-                    {t("approval.action.deny")}
-                </Button>
+                <div className={"flex flex-row gap-2.5"}>
+                    <Button
+                        variant={"danger"}
+                        size={"sm"}
+                        className={"flex-1"}
+                        onClick={() => respond(false, false)}
+                        disabled={busy}
+                    >
+                        {t("approval.action.deny")}
+                    </Button>
+                    <Button
+                        autoFocus
+                        variant={"primary"}
+                        size={"sm"}
+                        className={"flex-1"}
+                        onClick={() => respond(true, false)}
+                        disabled={busy}
+                    >
+                        {t("approval.action.allow")}
+                    </Button>
+                </div>
             </DialogActions>
         </ConfirmDialog>
     );