fix(sonuc): harita tablonun altına alınır — hidrasyon kayması kapanır

Liste store'unun sunucu snapshot'ı her zaman boş liste döner
(liste-store.ts:86), kayıtlı manuel liste ancak hidrasyondan sonra
okunur. Harita sayfanın tepesindeyken kayıtlı listesi olan dönüş
ziyaretçisinde ~368 px yüksekliğinde sonradan beliriyor ve tadımlık ile
tabloyu aşağı itiyordu; main'in ilk çocuğu olduğu için impact fraction
~1, CLS eşiğinin çok üstü. Silinen placeholder bunu yeri sunucuda
rezerve ederek engelliyordu.

Harita tablonun altına alındı: sonradan belirdiğinde yalnızca sihirbaz
ile dipnotu iter, ikisi de katlanın altında. Bilgi mimarisi olarak da
doğru sıra — harita, tablodan kurulan listenin görselleştirmesi.

Yeni sıra: tadımlık → tablo → harita → sihirbaz → dipnot.
Sıraya bağlı stiller yeni sıraya göre doğrulandı: tadımlığın
first:mt-0'ı artık her durumda geçerli (üstünde kardeş kalmadı), harita
kendi mt-16'sını alıyor (tablo section'ı ve sihirbaz kartlarıyla aynı
ritim — eskiden üst boşluğu main'in py-12'sinden geliyordu).

Bulgu: 36-tasarimci-g1-ve-navbar.md B1.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-09-22 23:20:34 +03:00
parent d2e11908ba
commit e9126650c3
3 changed files with 27 additions and 13 deletions

View File

@@ -97,14 +97,21 @@ export default function SonucPage({
return ( return (
<div className="min-h-screen bg-slate-50 text-slate-900"> <div className="min-h-screen bg-slate-50 text-slate-900">
<main className="mx-auto max-w-4xl px-4 py-12"> <main className="mx-auto max-w-4xl px-4 py-12">
{/* Sayfa hiyerarşisi: manuel listenin haritası (yalnız liste {/* Sayfa hiyerarşisi: tadımlık → ham tablo → manuel listenin
doluyken) → tadımlık → ham tablo. Tadımlık, ödeme öncesi haritası. Tadımlık, ödeme öncesi gösterebildiğimiz TEK gerçek
gösterebildiğimiz TEK gerçek önizleme olduğu için tablonun önizleme olduğu için ilk ekranda durur.
üstünde, ilk ekranda durur; harita ise ancak kullanıcı
tablodan "+" ile bir şey ekledikten sonra anlam taşır, o yüzden Harita neden TABLONUN ALTINDA: liste store'unun sunucu
boş durumda hiç render edilmez (bkz. manuel-harita.tsx). Liste snapshot'ı her zaman boş liste döner (liste-store.ts), kayıtlı
store'una abone olduğundan eklenenler buraya canlı yansır. */} liste ancak hidrasyondan sonra okunur. Harita yukarıda olsaydı
<ManuelHarita /> dönüş ziyaretçisinde sayfa açıldıktan saniyeler sonra ~368 px
yüksekliğinde belirip tadımlığı ve tabloyu aşağı itecekti
(impact fraction ~1, CLS eşiğinin çok üstü). Aşağıda belirince
yalnızca sihirbaz ile dipnotu iter, ikisi de katlanın altında.
Bilgi mimarisi olarak da doğru sıra: harita, tablodan kurulan
listenin görselleştirmesidir. Liste boşken hiç render edilmez
(bkz. manuel-harita.tsx); store'a abone olduğu için tablodan
"+" ile eklenenler buraya canlı yansır. */}
{/* Girişsiz tadımlık: gerçek rapor satırı formatında tek örnek. {/* Girişsiz tadımlık: gerçek rapor satırı formatında tek örnek.
Havuzda içerik yoksa bileşen hiç render edilmez. */} Havuzda içerik yoksa bileşen hiç render edilmez. */}
@@ -121,6 +128,8 @@ export default function SonucPage({
uniturGrubu={uniturGrubu} uniturGrubu={uniturGrubu}
/> />
<ManuelHarita />
{/* Sihirbaz akışı (CTA + modal) — üretim ve liste /listem'de {/* Sihirbaz akışı (CTA + modal) — üretim ve liste /listem'de
yaşar, burada yalnızca funnel kartları render edilir */} yaşar, burada yalnızca funnel kartları render edilir */}
<SonucSihirbazi <SonucSihirbazi

View File

@@ -70,8 +70,12 @@ export function ManuelHarita() {
// geometrisi yine ancak o anda iner (TercihHaritasiLazy zaten `dynamic`). // geometrisi yine ancak o anda iner (TercihHaritasiLazy zaten `dynamic`).
if (liste.length === 0) return null; if (liste.length === 0) return null;
// mt-16: /sonuc'ta harita artık tablonun ALTINDA duruyor (bkz. sonuc/page.tsx)
// ve sayfanın bölüm ritmini paylaşıyor — tablo <section>'ı ve sihirbaz
// kartları da mt-16 kullanır. Eskiden main'in ilk çocuğu olduğu için üst
// boşluğu main'in py-12'sinden alıyordu, kendi margin'i yoktu.
return ( return (
<div> <div className="mt-16">
<TercihHaritasiLazy <TercihHaritasiLazy
pinler={pinler} pinler={pinler}
seciliIl={seciliIl} seciliIl={seciliIl}

View File

@@ -120,10 +120,11 @@ export function TadimlikSatiri({
const girisUrl = `/giris?callback=${encodeURIComponent(listemUretHref("tadimlik"))}`; const girisUrl = `/giris?callback=${encodeURIComponent(listemUretHref("tadimlik"))}`;
return ( return (
// first:mt-0 — /sonuc'ta manuel liste boşken ManuelHarita null döndüğü // first:mt-0 — /sonuc'ta bu <section> main'in ilk DOM çocuğudur (harita
// için bu <section> main'in gerçek ilk DOM çocuğu olabiliyor (JSX // artık tablonun altında, üstte hiçbir kardeş yok; JSX yorumları düğüm
// yorumları düğüm üretmez); o durumda main'in py-12'si tek başına yeterli // üretmez): main'in py-12'si tek başına yeterli üst boşluğu verir.
// üst boşluğu verir. Harita görünürken mt-16 aynen çalışır. // Tadımlığın render edilmediği durumlarda (girişli kullanıcı, boş havuz)
// bu bileşen hiç dönmediği için kural ilk gerçek bölüme geçer.
<section ref={gorunumRef} className="mt-16 min-w-0 first:mt-0"> <section ref={gorunumRef} className="mt-16 min-w-0 first:mt-0">
<div className="flex flex-col items-center text-center"> <div className="flex flex-col items-center text-center">
<SectionEyebrow>Yapay zekâdan örnek satır</SectionEyebrow> <SectionEyebrow>Yapay zekâdan örnek satır</SectionEyebrow>