# 36 — Tasarımcı: navbar taşması + G1 merge öncesi denetimi Tarih: 22 Eylül 2026 · Rol: `tasarimci` · Taban: `main` `9bd448b` İşaret: **[D]** doğrulandı (canlı HTML / font metriği / hesap) · **[Ç]** koddan çıkarım · **[BİLAL]** karar Bilal'in --- ## Özet (5 madde) 1. **Navbar taşmasının kök nedeni tek satır değil, bir yapısal varsayım:** orta alan `absolute` olduğu için flex onu göremiyor, sağ küme `shrink-0` olduğu için çekilmiyor — çakışma sessiz. Tetikleyici ise `xl:inline`: **`max-w-6xl` konteyneri 1152 px'te kilitlendiği için `xl` (1280 px) hiç yeni yer açmıyor, ama o noktada ~229 px etiket geri geliyor.** [D, hesap aşağıda] 2. **P4 (`cb22faf`) dört ayrı genişlikte kırılma üretti:** ≥1280 px'te orta alanla çakışma (−28 … −220 px), 1024–1151 px'te dar bir bantta çakışma (−48 px), ve **640–1023 px'te header'ın 2 satırdan 3 satıra çıkması** (tasarımın kendi yorumu "lg altında 2 satır" diyor, `site-header.tsx:11`). 375 px'te de sınırda taşıyor. 3. **Önerilen düzeltme 2 satır:** `user-nav.tsx:59` ve `listem-butonu.tsx:39`'daki etiket span'lerinden **hem `xl:inline` hem `sm:inline`** kalkar. Bu etiketler yalnızca sığmadıkları iki bantta görünüyor. Kalan tek açık 1024–1151 bandı için ikinci, tek satırlık bir seçenek aşağıda. 4. **G1 merge edilebilir — ama bir düzeltmeyle.** Boş harita `null` olunca **hidrasyon CLS'i doğdu**: kayıtlı manuel listesi olan kullanıcıda sunucu 0 px, hidrasyondan sonra ~368 px harita sayfanın **tepesine** giriyor ve tadımlık + tablo aşağı kayıyor. Eski placeholder tam da bunu engelliyordu. G1 raporunda bu yok. 5. **Metinde bir artık kaldı:** buton "24 satırın tamamı" iddiasından arındırıldı ama **iki eleman yukarıdaki paragraf aynı vaadi sürdürüyor** — `tadimlik-satiri.tsx:135` "24 tercihlik listenin **her satırı** bu formatta kurulur". Maske girişsiz kullanıcıya 3 satır açıyor (`rapor-maske.ts:12`). --- # İŞ 1 · Navbar taşması ## Yöntem — neden koddan yetinmedim, ne yaptım Kural değişikliği geldi (tarayıcı serbest), ama bu oturumun araç setinde tarayıcı/önizleme aracı yok (`Bash`, `Read`, `Write`, `Edit`, `Skill`). `preview_stop` da çağıramıyorum, dolayısıyla açık sunucu bırakmadım. Onun yerine iki gerçek ölçüm yaptım: 1. **Canlı sunucu HTML'i çekildi** (`curl https://kolaytercih.com`, 392 KB) — navbar markup'ı `main` ile birebir aynı [D]. **Ama girişsiz ziyaretçide "Yapay Zeka Listem" pill'i HTML'de hiç yok** (`grep -c` → 0); yalnızca "Giriş yap" var. Pill sadece girişli kullanıcıda render ediliyor (`user-nav.tsx:40-76`), giriş yapmam ise yasak. **Yani taşmayı canlıda gözle göremem — Bilal kendi oturumunda görüyor.** *Düzeltme notu: orkestratörün "canlıda `Yapay Zeka listemi kur` etiketi duruyor" bilgisi yanlış; o dize navbar'ın değil hero formunun submit butonunun metni (`hero-form.tsx:194`). Navbar etiketi `Yapay Zeka Listem`.* 2. **Gerçek font metriğiyle ölçüm.** Tahmin yerine `src/fonts/og/ClarityCity-SemiBold.ttf` ve Bricolage `.woff` dosyalarının `hmtx`/`cmap` tablolarını ayrıştırıp her dizenin ilerleme genişliğini hesapladım [D]. Aşağıdaki piksellerin hepsi bu ölçümden gelir, yuvarlama dışında tahmin yok. | Dize | Boyut | Genişlik | |---|---|---| | `Yapay Zeka Listem` | 14 px / 600 | **129,7 px** | | `Kendi Listem` | 14 px / 600 | 89,4 px | | `Sıralamanı gir` | 16 px | 107,8 px | | `Nasıl çalışır?` | 16 px | 96,9 px | | `KolayTercih` (Bricolage) | 30 px | 168,6 px (tracking-tighter ile 152,1) | ## Kök neden — üç katman **(a) Orta alan akışın dışında.** `katalog-arama.tsx:270` → `absolute left-1/2 -translate-x-1/2 … lg:flex`. Konteyner `site-header.tsx:12`'de `relative`. Absolute eleman flex satırında yer kaplamaz, dolayısıyla sağ küme büyüdükçe **flex hiçbir şey fark etmez**; taşma yerine sessiz çakışma olur. Üstelik boyama sırası gereği (CSS 2.1 Ek E, adım 8 > adım 7) konumlanmış `