CSS layout debug
Mobil taşmayı düzelten Tailwind odaklı layout debug.
Prompt Metni
Aşağıdaki Tailwind düzeninde uzun başlık mobilde yatay taşma oluşturuyor. Üç çözümü en az müdahaleden en çok müdahaleye doğru sırala ve minimum class değişikliklerini göster.
<div className="flex gap-4">
<aside className="w-64 shrink-0">Menü</aside>
<main className="flex-1">
<h1 className="whitespace-nowrap">{longTitle}</h1>
</main>
</div>Prompt Sonucu
1. En az müdahale — main öğesinin küçülmesine izin ver:
<main className="min-w-0 flex-1">
Flex çocuklarında varsayılan min-width: auto davranışı uzun içeriğin alanı genişletmesine yol açabilir. min-w-0 çoğu taşma sorununu çözer.
2. Başlığın satır kırmasına izin ver:
<h1 className="break-words">{longTitle}</h1>
whitespace-nowrap kaldırılır. Kesintisiz çok uzun dizeler bekleniyorsa break-all kullanılabilir; normal başlıklarda break-words daha okunaklıdır.
3. Mobil yerleşimi dikeye çevir:
<div className="flex flex-col gap-4 md:flex-row">
<aside className="w-full md:w-64 md:shrink-0">Menü</aside>
<main className="min-w-0 flex-1">...</main>
</div>
Bu seçenek düzen davranışını değiştirir ancak küçük ekranda 256 piksel genişliğindeki sabit sidebar'ı da ortadan kaldırır.