CSS layout debug

Mobil taşmayı düzelten Tailwind odaklı layout debug.

Kod Prompt Kütüphanesi için temsili kategori görseli

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.

Kod

Zod ile ortam değişkenleri

Eksik gizli anahtarı açılışta yakalayan Zod ortam şeması.

Kod

Next.js dinamik metadata

Promise params ile başlık, açıklama ve mutlak Open Graph adresi.

Kod

Webhook HMAC doğrulaması

timingSafeEqual kullanan webhook imza kontrolü.

Kod

React iyimser beğeni

Beğeni sayısını sunucu yanıtından önce güncelleyen useOptimistic örneği.