From 17fdf32a3c8f4eccc6fcf48c1d3cf5c8b79662cc Mon Sep 17 00:00:00 2001
From: Leonid Pershin <lpershin@syntellect.ru>
Date: Sat, 25 Jul 2026 00:50:26 +0300
Subject: [PATCH] Update RootLayout component to adjust container width based
 on route: integrate useRouterState for dynamic max-width handling, allowing
 admin pages to have a wider layout while keeping public pages compact.

---
 frontend/src/routes/__root.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
index a56692b..4db16c4 100644
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
+import { createRootRoute, Link, Outlet, useRouterState } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
 import { Menu, Radio, X } from 'lucide-react'
 import { useAuthStore } from '@/features/auth/store'
@@ -17,6 +17,10 @@ function RootLayout() {
   const { theme, setTheme } = useTheme()
   const [menuOpen, setMenuOpen] = useState(false)
 
+  // Админка — с таблицами; ей даём больше ширины, публичные страницы оставляем компактными.
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+  const containerMax = pathname.startsWith('/admin') ? 'max-w-screen-2xl' : 'max-w-5xl'
+
   useEffect(() => {
     void bootstrapSession()
   }, [])
@@ -32,7 +36,7 @@ function RootLayout() {
   return (
     <div className="flex min-h-screen flex-col">
       <header className="border-b border-border">
-        <div className="mx-auto flex max-w-5xl items-center justify-between gap-4 px-4 py-3">
+        <div className={cn('mx-auto flex items-center justify-between gap-4 px-4 py-3', containerMax)}>
           <Link to="/" className="crt-glow flex items-center gap-2 text-lg font-bold tracking-widest">
             <Radio className="h-5 w-5" />
             {t('appName')}
@@ -129,7 +133,7 @@ function RootLayout() {
         )}
       </header>
 
-      <main className={cn('mx-auto w-full max-w-5xl flex-1 px-4 py-8')}>
+      <main className={cn('mx-auto w-full flex-1 px-4 py-8', containerMax)}>
         <Outlet />
       </main>