From 5dfe83decb723bf86b9cf93e8f0427260a05643a Mon Sep 17 00:00:00 2001
From: Mark Wylde <mark@wylde.net>
Date: Mon, 1 Jun 2026 19:21:58 +0100
Subject: [PATCH] fix(ui): wrap key unlock actions

---
 .../src/components/KeyUnlockPanel.module.css  | 46 +++++++++++++------
 .../user-ui/src/components/KeyUnlockPanel.tsx |  2 +
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/packages/user-ui/src/components/KeyUnlockPanel.module.css b/packages/user-ui/src/components/KeyUnlockPanel.module.css
index 884d3933..024d19b8 100644
--- a/packages/user-ui/src/components/KeyUnlockPanel.module.css
+++ b/packages/user-ui/src/components/KeyUnlockPanel.module.css
@@ -3,29 +3,32 @@
   border: 1px solid #f59e0b;
   border-radius: 0.75rem;
   background: #fffbeb;
-  padding: 1rem;
+  padding: 1.125rem;
   text-align: left;
 }
 
 .inlinePanel {
   border: 0;
   background: transparent;
-  padding: 0;
+  padding: 1rem 1.125rem;
+  text-align: left;
 }
 
 .summary {
-  display: flex;
-  gap: 1rem;
-  justify-content: space-between;
-  align-items: center;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 1rem 1.5rem;
+  align-items: start;
 }
 
 .copy {
+  display: grid;
+  gap: 0.25rem;
   min-width: 0;
 }
 
 .title {
-  margin: 0 0 0.25rem;
+  margin: 0;
   color: #92400e;
   font-size: 1rem;
   font-weight: 700;
@@ -40,15 +43,15 @@
 
 .form {
   display: grid;
-  gap: 0.75rem;
+  gap: 0.875rem;
   margin-top: 1rem;
 }
 
 .approval {
   display: grid;
-  gap: 0.75rem;
-  margin-top: 1rem;
-  padding-top: 1rem;
+  gap: 0.875rem;
+  margin-top: 1.125rem;
+  padding-top: 1.125rem;
   border-top: 1px solid #fbbf24;
 }
 
@@ -118,6 +121,15 @@
   align-items: center;
 }
 
+.summary > .actions {
+  justify-content: flex-end;
+}
+
+.summary .unlockAction {
+  max-width: 100%;
+  white-space: normal;
+}
+
 .error,
 .success {
   border-radius: 0.5rem;
@@ -139,8 +151,16 @@
 
 @media (max-width: 768px) {
   .summary {
-    align-items: stretch;
-    flex-direction: column;
+    grid-template-columns: 1fr;
+  }
+
+  .summary > .actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .summary .unlockAction {
+    width: 100%;
   }
 }
 
diff --git a/packages/user-ui/src/components/KeyUnlockPanel.tsx b/packages/user-ui/src/components/KeyUnlockPanel.tsx
index 723d3d98..dabfd420 100644
--- a/packages/user-ui/src/components/KeyUnlockPanel.tsx
+++ b/packages/user-ui/src/components/KeyUnlockPanel.tsx
@@ -427,6 +427,7 @@ export default function KeyUnlockPanel({
             <Button
               type="button"
               variant="primary"
+              className={styles.unlockAction}
               onClick={requestDeviceApproval}
               disabled={deviceApprovalLoading}
             >
@@ -437,6 +438,7 @@ export default function KeyUnlockPanel({
             <Button
               type="button"
               variant={trustedDeviceAllowed ? "secondary" : "primary"}
+              className={styles.unlockAction}
               onClick={() => setExpanded(true)}
               disabled={deviceApprovalLoading}
             >