From 4be7d24aec5571d52281b3eee7f9eac6641994f2 Mon Sep 17 00:00:00 2001
From: mrhid6 <dominic.richardson1@hotmail.co.uk>
Date: Mon, 27 Jul 2026 23:01:30 +0100
Subject: [PATCH] feat(web): collapse remaining fixed layouts on small screens

---
 web/app/(app)/secrets/page.tsx              | 2 +-
 web/app/(app)/servers/[id]/console/page.tsx | 4 ++--
 web/app/(app)/servers/[id]/page.tsx         | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/app/(app)/secrets/page.tsx b/web/app/(app)/secrets/page.tsx
index e935803..f8c28ad 100644
--- a/web/app/(app)/secrets/page.tsx
+++ b/web/app/(app)/secrets/page.tsx
@@ -50,7 +50,7 @@ function NewGroupModal({ onClose }: { onClose: () => void }) {
               className={`${inputClass} font-mono`}
             />
           </div>
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
             <div>
               <label className="mb-1.5 block text-sm font-medium text-text-secondary">First key</label>
               <input
diff --git a/web/app/(app)/servers/[id]/console/page.tsx b/web/app/(app)/servers/[id]/console/page.tsx
index c99411b..8705175 100644
--- a/web/app/(app)/servers/[id]/console/page.tsx
+++ b/web/app/(app)/servers/[id]/console/page.tsx
@@ -165,7 +165,7 @@ export default function ServerConsolePage() {
     }
 
     return (
-        <div className="flex h-full flex-col p-8">
+        <div className="flex h-full flex-col p-4 sm:p-6 lg:p-8">
             <div className="mb-4 flex items-center gap-3">
                 <Link href={`/servers/${serverId}`} className="text-text-secondary hover:text-text-primary text-sm">
                     ← {server.hostname}
@@ -267,7 +267,7 @@ export default function ServerConsolePage() {
                     </div>
                 </Card>
             ) : (
-                <div className="mb-4 flex items-center gap-3">
+                <div className="mb-4 flex flex-wrap items-center gap-3">
                     <Button variant="danger" onClick={handleDisconnect}>
                         Disconnect
                     </Button>
diff --git a/web/app/(app)/servers/[id]/page.tsx b/web/app/(app)/servers/[id]/page.tsx
index 28b3356..0fff5ee 100644
--- a/web/app/(app)/servers/[id]/page.tsx
+++ b/web/app/(app)/servers/[id]/page.tsx
@@ -161,7 +161,7 @@ function GenerateKeyModal({ onClose, onSubmit, isPending }: { onClose: () => voi
 
                     <div>
                         <label className="mb-1.5 block text-sm font-medium text-text-secondary">Key Type</label>
-                        <div className="grid grid-cols-3 gap-2">
+                        <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
                             {(["ed25519", "rsa", "ecdsa"] as const).map((t) => (
                                 <button
                                     key={t}
@@ -492,7 +492,7 @@ export default function ServerDetailPage() {
                         >
                             {updateSuccess ? "Update Sent!" : "Update Agent"}
                         </Button>
-                        <div className="relative flex-1 min-w-64 rounded-lg border border-border bg-well px-4 py-2.5 font-mono text-sm">
+                        <div className="relative flex-1 min-w-0 overflow-x-auto rounded-lg border border-border bg-well px-4 py-2.5 font-mono text-sm">
                             <span className="text-accent">{server.os_info?.toLowerCase().includes("windows") ? "PS>" : "$"}</span>{" "}
                             <span className="text-text-primary">{api.getUpdateCommand(server.os_info)}</span>
                             <button