From 4556d991cc6c94adccc543ed412331c58947f1e7 Mon Sep 17 00:00:00 2001
From: ndmg <dimetylhydrtazine@gmail.com>
Date: Sat, 7 Nov 2026 14:40:38 +0000
Subject: [PATCH] fix layout

---
 src/components/Layout.jsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 38bae0e..cfc04d9 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -37,19 +37,23 @@ export default function Layout() {
             <div className="pointer-events-none fixed inset-x-0 top-0 -z-0 h-80 bg-[radial-gradient(60%_100%_at_50%_0%,rgba(244,63,94,0.16),transparent)]" />
 
             <header className="sticky top-0 z-40 border-b border-white/10 bg-zinc-950/75 backdrop-blur-xl">
-                <div className="mx-auto flex max-w-6xl items-center gap-4 px-4 py-3 sm:px-6">
+                <div className="mx-auto flex max-w-6xl flex-wrap items-center gap-x-4 gap-y-2 px-4 py-3 sm:px-6">
+                    {/* 1. Логотип */}
                     <NavLink
                         to="/"
                         end
                         aria-label="На главную"
-                        className="flex shrink-0 items-center gap-2.5 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400"
+                        className="order-1 flex shrink-0 items-center gap-2.5 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400"
                     >
-                        <span className="hidden text-lg font-bold tracking-tight text-white sm:block">ndmg's media library</span>
+                        <span className="text-base font-bold tracking-tight text-white sm:text-lg">
+                            ndmg's media library
+                        </span>
                     </NavLink>
 
+                    {/* 3 (mobile: вторая строка) / 2 (desktop) */}
                     <nav
                         aria-label="Основная навигация"
-                        className="flex min-w-0 flex-1 gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+                        className="order-3 flex w-full min-w-0 gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden md:order-2 md:w-auto md:flex-1"
                     >
                         {NAV.map(({ to, label, icon, end }) => (
                             <NavLink key={to} to={to} end={end} className={linkClass}>
@@ -71,7 +75,11 @@ export default function Layout() {
                             </NavLink>
                         ))}
                     </nav>
-                    <SearchBox />
+
+                    {/* 2 (mobile: справа от логотипа) / 3 (desktop) */}
+                    <div className="order-2 ml-auto min-w-0 flex-1 sm:flex-none md:order-3">
+                        <SearchBox />
+                    </div>
                 </div>
             </header>