From cda92de9d2da9f3a04050cf70bc86205c0769985 Mon Sep 17 00:00:00 2001
From: Oleg <ogrechko@top-sysops.ru>
Date: Sun, 26 Jul 2026 15:10:57 +0000
Subject: [PATCH] Mobile-responsive admin nav/thread header, real dark theme
 pass
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nav overflowed the viewport on phones (confirmed via screenshot) — header
now wraps, nav row scrolls horizontally instead of pushing user/theme/
logout off-screen, ticket-thread's status/assignee selects stack full-width
below the subject on narrow screens.

Dark theme got a real pass instead of reusing near-identical values:
deeper/richer surfaces, punchier accent (#8b5cf6, matches the already-
validated dark chart-1), a subtle violet glow behind the page, and a
dark-appropriate card shadow (inset highlight + soft shadow — the flat
black shadow from light mode was invisible on a dark surface).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QcXH24ky6zjk2UyK5oZUPH
---
 src/app/(admin)/layout.tsx                    | 14 +++---
 src/app/(admin)/nav-links.tsx                 |  2 +-
 .../(admin)/tickets/[id]/ticket-thread.tsx    | 10 ++---
 src/app/globals.css                           | 45 ++++++++++++-------
 4 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/src/app/(admin)/layout.tsx b/src/app/(admin)/layout.tsx
index ff3e057..1689c4f 100644
--- a/src/app/(admin)/layout.tsx
+++ b/src/app/(admin)/layout.tsx
@@ -14,22 +14,24 @@ export default async function AdminLayout({ children }: { children: React.ReactN
   return (
     <div className="flex min-h-screen flex-col bg-bg">
       <header className="border-b border-border bg-surface">
-        <div className="mx-auto flex max-w-7xl items-center gap-6 px-6 py-3">
+        <div className="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-4 py-3 sm:px-6">
           <div className="flex items-center gap-2 font-display text-[15px] font-bold tracking-tight">
-            <div className="flex h-7 w-7 items-center justify-center rounded-md bg-accent text-white">
+            <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-accent text-white">
               <Ticket size={15} strokeWidth={2.5} />
             </div>
             top-tickets
           </div>
-          <NavLinks />
-          <div className="ml-auto flex items-center gap-3">
-            <span className="text-sm text-text-muted">{session.user.name}</span>
+          <div className="ml-auto flex items-center gap-2 sm:gap-3">
+            <span className="hidden text-sm text-text-muted sm:inline">{session.user.name}</span>
             <ThemeToggle />
             <LogoutButton />
           </div>
+          <div className="order-last w-full overflow-x-auto sm:order-none sm:w-auto sm:overflow-visible">
+            <NavLinks />
+          </div>
         </div>
       </header>
-      <main className="mx-auto w-full max-w-7xl flex-1 px-6 py-6">{children}</main>
+      <main className="mx-auto w-full max-w-7xl flex-1 px-4 py-6 sm:px-6">{children}</main>
     </div>
   );
 }
diff --git a/src/app/(admin)/nav-links.tsx b/src/app/(admin)/nav-links.tsx
index 1fcad24..c52f826 100644
--- a/src/app/(admin)/nav-links.tsx
+++ b/src/app/(admin)/nav-links.tsx
@@ -23,7 +23,7 @@ export function NavLinks() {
           <Link
             key={href}
             href={href}
-            className={`flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
+            className={`flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
               active ? "bg-accent-soft text-accent-soft-text" : "text-text-muted hover:bg-surface-hover hover:text-text"
             }`}
           >
diff --git a/src/app/(admin)/tickets/[id]/ticket-thread.tsx b/src/app/(admin)/tickets/[id]/ticket-thread.tsx
index 5a4f74c..584c8a4 100644
--- a/src/app/(admin)/tickets/[id]/ticket-thread.tsx
+++ b/src/app/(admin)/tickets/[id]/ticket-thread.tsx
@@ -82,8 +82,8 @@ export function TicketThread({
   }
 
   return (
-    <div className="flex h-[calc(100vh-6.5rem)] flex-col">
-      <div className="mb-4 flex items-start justify-between gap-4">
+    <div className="flex h-[calc(100vh-11rem)] flex-col sm:h-[calc(100vh-6.5rem)]">
+      <div className="mb-4 flex flex-wrap items-start justify-between gap-3">
         <div className="min-w-0">
           <Link href="/dashboard" className="mb-1 flex items-center gap-1 text-xs text-text-muted hover:text-text">
             <ArrowLeft size={13} />
@@ -96,11 +96,11 @@ export function TicketThread({
           </span>
         </div>
 
-        <div className="flex shrink-0 items-center gap-2">
+        <div className="flex w-full shrink-0 items-center gap-2 sm:w-auto">
           <select
             value={ticket.status}
             onChange={(e) => updateStatus(e.target.value as TicketStatus)}
-            className="rounded-md border border-border bg-surface px-2 py-1.5 text-sm outline-none focus:border-accent"
+            className="min-w-0 flex-1 rounded-md border border-border bg-surface px-2 py-1.5 text-sm outline-none focus:border-accent sm:flex-none"
           >
             {Object.entries(STATUS_LABEL).map(([value, label]) => (
               <option key={value} value={value}>
@@ -111,7 +111,7 @@ export function TicketThread({
           <select
             value={ticket.assigneeId ?? ""}
             onChange={(e) => updateAssignee(e.target.value)}
-            className="rounded-md border border-border bg-surface px-2 py-1.5 text-sm outline-none focus:border-accent"
+            className="min-w-0 flex-1 rounded-md border border-border bg-surface px-2 py-1.5 text-sm outline-none focus:border-accent sm:flex-none"
           >
             <option value="">Не назначено</option>
             {agents.map((agent) => (
diff --git a/src/app/globals.css b/src/app/globals.css
index 8c40999..e278726 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -99,23 +99,26 @@
   --radius-md-val: 12px;
   --radius-lg-val: 18px;
 
+  --bg-glow: none;
+  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+
   color-scheme: light;
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --bg: #0f0d17;
-    --surface: #17141f;
-    --surface-hover: #1e1a2b;
-    --border: #2b2438;
-    --border-strong: #3a3150;
+    --bg: #0b0a12;
+    --surface: #161320;
+    --surface-hover: #1d1929;
+    --border: #2d2640;
+    --border-strong: #453c60;
     --text: #f1eefb;
     --text-muted: #a79fc4;
     --text-faint: #6f6790;
 
-    --accent: #a78bfa;
-    --accent-hover: #c4b5fd;
-    --accent-soft: #241b3d;
+    --accent: #8b5cf6;
+    --accent-hover: #7c3aed;
+    --accent-soft: #251c3f;
     --accent-soft-text: #c4b5fd;
 
     --danger: #f87171;
@@ -146,23 +149,26 @@
     --chart-4: #d97706;
     --chart-muted: var(--border-strong);
 
+    --bg-glow: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(139, 92, 246, 0.12), transparent 60%);
+    --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
+
     color-scheme: dark;
   }
 }
 
 :root[data-theme="dark"] {
-  --bg: #0f0d17;
-  --surface: #17141f;
-  --surface-hover: #1e1a2b;
-  --border: #2b2438;
-  --border-strong: #3a3150;
+  --bg: #0b0a12;
+  --surface: #161320;
+  --surface-hover: #1d1929;
+  --border: #2d2640;
+  --border-strong: #453c60;
   --text: #f1eefb;
   --text-muted: #a79fc4;
   --text-faint: #6f6790;
 
-  --accent: #a78bfa;
-  --accent-hover: #c4b5fd;
-  --accent-soft: #241b3d;
+  --accent: #8b5cf6;
+  --accent-hover: #7c3aed;
+  --accent-soft: #251c3f;
   --accent-soft-text: #c4b5fd;
 
   --danger: #f87171;
@@ -191,6 +197,9 @@
   --chart-4: #d97706;
   --chart-muted: var(--border-strong);
 
+  --bg-glow: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(139, 92, 246, 0.12), transparent 60%);
+  --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
+
   color-scheme: dark;
 }
 
@@ -228,6 +237,8 @@ body {
 
 body {
   background: var(--bg);
+  background-image: var(--bg-glow, none);
+  background-attachment: fixed;
   color: var(--text);
   font-family: var(--font-sans);
   -webkit-font-smoothing: antialiased;
@@ -261,7 +272,7 @@ body {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  box-shadow: var(--card-shadow);
 }
 
 .btn {