From a8bd13ef43097119160b151d2b0d7bc5c24c8ae0 Mon Sep 17 00:00:00 2001
From: bilalgursen <bilalgursen777@gmail.com>
Date: Sun, 2 Aug 2026 04:53:38 +0300
Subject: [PATCH] Refactor KatalogArama, SiteHeader, and UserNav components for
 improved layout and responsiveness. Adjusted flex properties and aria-labels
 for better accessibility and visual clarity across screen sizes. Enhanced
 styling to ensure consistent presentation of elements in mobile and desktop
 views.

---
 src/components/katalog-arama.tsx |  8 ++++----
 src/components/site-header.tsx   | 14 ++++++++------
 src/components/user-nav.tsx      |  9 ++++++---
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/components/katalog-arama.tsx b/src/components/katalog-arama.tsx
index 98687de..9dacea7 100644
--- a/src/components/katalog-arama.tsx
+++ b/src/components/katalog-arama.tsx
@@ -274,14 +274,14 @@ export function KatalogArama({ rehberler }: { rehberler: RehberOzet[] }) {
         </button>
       </nav>
 
-      {/* lg altında ortadaki nav gizli; sıralama + ara burada yaşar */}
-      <div className="ml-auto flex items-center gap-1.5 lg:hidden">
+      {/* lg altında 2. satır: sıralama + ara (header flex-wrap + order-3) */}
+      <div className="order-3 flex w-full basis-full items-center gap-1.5 lg:hidden">
         {profil ? (
           <button
             type="button"
             onClick={profilDuzenlemeyiAc}
             aria-label={`Sıralamanı ve tercihlerini değiştir (${profil.sira.toLocaleString("tr-TR")} · ${PUAN_TURU_ETIKET[profil.tur] ?? profil.tur})`}
-            className="flex h-9 max-w-52 cursor-pointer items-center gap-1.5 rounded-full border border-slate-200 bg-white py-1 pl-2.5 pr-1.5 text-xs font-semibold text-slate-900 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:h-12 sm:max-w-none sm:gap-2 sm:pl-3.5 sm:pr-2 sm:text-sm"
+            className="flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-full border border-slate-200 bg-white py-1 pl-2.5 pr-1.5 text-xs font-semibold text-slate-900 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:h-12 sm:gap-2 sm:pl-3.5 sm:pr-2 sm:text-sm"
           >
             <Trophy
               className="size-3.5 shrink-0 text-orange-500 sm:size-4"
@@ -306,7 +306,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberOzet[] }) {
             type="button"
             onClick={siralamaGirVeyaSonucaGit}
             aria-label="Başarı sıralamanı gir"
-            className="flex h-9 cursor-pointer items-center gap-1.5 rounded-full border border-slate-200 bg-white py-1 pl-2.5 pr-2.5 text-xs font-semibold text-slate-900 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:h-12 sm:gap-2 sm:pl-3.5 sm:pr-3 sm:text-sm"
+            className="flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-full border border-slate-200 bg-white py-1 pl-2.5 pr-2.5 text-xs font-semibold text-slate-900 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:h-12 sm:gap-2 sm:pl-3.5 sm:pr-3 sm:text-sm"
           >
             <Trophy
               className="size-3.5 shrink-0 text-orange-500 sm:size-4"
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index f9268e0..a5252bb 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -8,11 +8,12 @@ import { getAllRehberler } from "@/lib/rehber";
 export function SiteHeader() {
   return (
     <header className="sticky top-4 z-50 mt-4 sm:top-6 sm:mt-6 print:hidden">
-      <div className="relative mx-auto flex h-12 max-w-6xl items-center justify-between gap-2 px-3 sm:h-16 sm:gap-3 sm:px-4">
+      {/* lg altında 2 satır: logo+UserNav / sıralama+ara. lg+: tek satır, ortada nav. */}
+      <div className="relative mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-x-2 gap-y-2 px-3 sm:gap-x-3 sm:px-4 lg:h-16 lg:flex-nowrap">
         <Link
           href="/"
           aria-label="KolayTercih"
-          className="group flex min-w-0 shrink items-center font-bricolage"
+          className="group order-1 flex min-w-0 shrink items-center font-bricolage"
         >
           <Image
             src="/kolay-tercih-mark.svg"
@@ -22,10 +23,11 @@ export function SiteHeader() {
             aria-hidden="true"
             className="size-8 shrink-0 sm:size-11"
           />
-          {/* Yazı yalnızca sm+: mobilde logo yeter, header sıkışmasın */}
-          <span className="hidden truncate sm:inline">
-            <span className="text-3xl font-light tracking-tighter">Kolay</span>
-            <span className="text-3xl font-semibold tracking-tighter">
+          <span className="truncate">
+            <span className="text-lg font-light tracking-tighter sm:text-3xl">
+              Kolay
+            </span>
+            <span className="text-lg font-semibold tracking-tighter sm:text-3xl">
               Tercih
             </span>
           </span>
diff --git a/src/components/user-nav.tsx b/src/components/user-nav.tsx
index 1fa8e96..8fb0604 100644
--- a/src/components/user-nav.tsx
+++ b/src/components/user-nav.tsx
@@ -11,7 +11,10 @@ import { SignOutButton } from "./sign-out-button";
  */
 export function UserNavFallback() {
   return (
-    <div className="flex shrink-0 items-center gap-1.5 sm:gap-2" aria-hidden>
+    <div
+      className="order-2 flex shrink-0 items-center gap-1.5 sm:gap-2"
+      aria-hidden
+    >
       <div className="h-9 w-16 rounded-full bg-slate-900/10 sm:h-12 sm:w-28" />
     </div>
   );
@@ -23,7 +26,7 @@ export async function UserNav() {
   // Manuel liste localStorage'ta yaşadığı için Listem girişsiz de çalışır
   if (!u) {
     return (
-      <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
+      <div className="order-2 flex shrink-0 items-center gap-1.5 sm:gap-2">
         <ListemButonu />
         <Button
           asChild
@@ -36,7 +39,7 @@ export async function UserNav() {
   }
 
   return (
-    <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
+    <div className="order-2 flex shrink-0 items-center gap-1.5 sm:gap-2">
       <ListemButonu />
       <Link
         href="/paket"