fix(navbar): pill etiketleri her genişlikte gizli — çakışma kapanır #3

bilal · 2026-09-22T23:29:09+03:00

bilal commented

2026-09-22 23:29:09 +03:00

Canlıdaki kırık. Girişli kullanıcıda navbar'ın sağ kümesi ortadaki menünün altında kalıyor; koyu "Ara" butonu "Yapay Zeka Listem" etiketinin sol ucunu kapatıyor.

Kök neden (tasarımcı raporu, gerçek font metrikleriyle ölçüldü): konteyner max-w-6xl = 1152 px'te kilitli, yani xl (1280 px) yeni yer açmıyor — ama tam o noktada xl:inline ~229 px etiketi geri getiriyor. Orta nav absolute konumlu ve sağ küme shrink-0 olduğu için flex çakışmayı göremiyor; taşma sessiz oluyor ve boyama sırası gereği konumlanmış nav statik pill'lerin üstüne biniyor.

Dört genişlikte kırıktı: ≥1280 px'te 28–220 px çakışma, 1024–1151 px'te 48 px, 640–1023 px'te header 2 satırdan 3 satıra çıkıyor, 375 px'te sınırda.

Değişiklik: user-nav.tsx ve listem-butonu.tsx etiket span'lerinden sm:inline ve xl:inline kaldırıldı, etiketler her genişlikte gizli. aria-label'lar ikisinde de zaten vardı — erişilebilirlik değişmedi.

Sonuç: 375 → 284,5/351 · 768 → 555,8/736 · 1280+ → pozitif boşluk.

Kapsam dışı (ayrı iş olarak kuyrukta): orta nav'ı absolute olmaktan çıkarıp normal flex öğesi yapmak — çakışmayı yapısal olarak imkânsız kılar, ama navbar'ın iskeletini değiştirir.

Doğrulama: next typegen ✓ · tsc --noEmit 0 · lint 0 · dört dalın entegrasyon build'i temiz.

Canlıdaki kırık. Girişli kullanıcıda navbar'ın sağ kümesi ortadaki menünün altında kalıyor; koyu "Ara" butonu "Yapay Zeka Listem" etiketinin sol ucunu kapatıyor. **Kök neden (tasarımcı raporu, gerçek font metrikleriyle ölçüldü):** konteyner `max-w-6xl` = 1152 px'te kilitli, yani `xl` (1280 px) yeni yer açmıyor — ama tam o noktada `xl:inline` ~229 px etiketi geri getiriyor. Orta nav `absolute` konumlu ve sağ küme `shrink-0` olduğu için flex çakışmayı göremiyor; taşma sessiz oluyor ve boyama sırası gereği konumlanmış nav statik pill'lerin üstüne biniyor. Dört genişlikte kırıktı: ≥1280 px'te 28–220 px çakışma, 1024–1151 px'te 48 px, 640–1023 px'te header 2 satırdan 3 satıra çıkıyor, 375 px'te sınırda. **Değişiklik:** `user-nav.tsx` ve `listem-butonu.tsx` etiket span'lerinden `sm:inline` ve `xl:inline` kaldırıldı, etiketler her genişlikte gizli. `aria-label`'lar ikisinde de zaten vardı — erişilebilirlik değişmedi. Sonuç: 375 → 284,5/351 · 768 → 555,8/736 · 1280+ → pozitif boşluk. **Kapsam dışı (ayrı iş olarak kuyrukta):** orta nav'ı `absolute` olmaktan çıkarıp normal flex öğesi yapmak — çakışmayı yapısal olarak imkânsız kılar, ama navbar'ın iskeletini değiştirir. Doğrulama: `next typegen` ✓ · `tsc --noEmit` 0 · `lint` 0 · dört dalın entegrasyon build'i temiz.

bilal added 1 commit 2026-09-22 23:29:10 +03:00

fix(navbar): pill etiketleri her genişlikte gizli — çakışma kapanır 9abfdf4aa9

Konteyner max-w-6xl = 1152 px'te kilitli; xl (1280 px) içeriğe yeni yer
açmıyor ama eski görünürlük deseni tam orada iki etiketi birden geri
getiriyordu (+229 px). Orta nav absolute (katalog-arama.tsx:270), sağ küme
shrink-0 — flex çakışmayı göremiyor, koyu "Ara" butonu pill'in üstüne
boyanıyor (konumlanmış eleman statik elemanın üstünde).

user-nav.tsx ve listem-butonu.tsx etiket span'lerinden hem xl hem sm
görünürlük sınıfları kaldırıldı; anlamı ikon + aria-label + title taşıyor
(ikisi de yerinde, erişilebilirlik değişmedi).

Tasarımcı ölçümü (36-tasarimci-g1-ve-navbar.md, gerçek font metriği):
375 px → 284,5/351 tek satır · 768 px → 555,8/736 tek satır ·
1280+ → boşluk +15,5 … +110 px, çakışma yok.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

bilal merged commit 6f1af5be65 into main

2026-09-22 23:32:15 +03:00

bilal referenced this issue from a commit

2026-09-22 23:32:16 +03:00

Merge pull request 'fix(navbar): pill etiketleri her genişlikte gizli — çakışma kapanır' (#3) from duzeltme/navbar-tasmasi into main

bilal deleted branch duzeltme/navbar-tasmasi

2026-09-22 23:32:29 +03:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: bilal/kolaytercih#3