Responsive Davranış

Sınıflandırma

dashboard/src/components/api-docs/useApiMiddlewareBreakpoint.tsx iki sinyali birlikte değerlendirir:

Sinyal	Ne söyler	Zoom'dan etkilenir mi
window.innerWidth	Görüntü alanı — ne kadar yer var	Evet
window.screen.width	Cihaz ekranı — bu gerçekten telefon mu	Hayır

isPhone  = screen.width < 768
isMobile = isPhone || innerWidth < 640      // kompakt (kayıt kartı) yerleşim
isDesktop = !isMobile && innerWidth >= 1100
isTablet  = !isMobile && !isDesktop

Neden iki sinyal?

Yalnızca innerWidth kullanıldığında 1024px'lik bir tablet %150 zoom ile 683px'e düşüyor ve telefon sanılıyordu. screen.width zoom'dan etkilenmediği için cihaz sınıfı sabit kalır.

Neden 640px eşiği?

640px'te tabloya kalan alan 640 − 64 (ray) − 0 (PageContainer) − 40 − 40 = 480px'tir. Sütunlar Middleware %40 = 192px, sayısallar %15 = 72px; en uzun başlık "Internal" 14px'te ~55px + akışkan hücre boşluğu ~13px = ~68px < 72px → başlıklar tam sığar.

Senaryo	Görüntü alanı	Sonuç
Tablet %125 zoom	~819px	Tablo
Tablet %150 zoom	~683px	Tablo
Tablet %175 zoom	~585px	Kompakt
PC penceresi 500px	500px	Kompakt

Kapsamlı CSS

.iqv-api-middleware-shell sınıfı (bkz. components/api-middleware/layout.tsx, display: contents) yalnızca bu namespace'e özgü CSS geçersiz kılmalarını mümkün kılar. Ortak PageContainer ve AppShell değiştirilmez; diğer IQV sayfaları etkilenmez.

layout.css içindeki kural, 1100px altında ortak PageContainer'ın 40px'lik yatay iç boşluğunu sıfırlar; kenar boşluğunu tek kaynak (sayfanın kendi dış girintisi) verir.

Sık yapılan hata

pro-layout'un ürettiği gerçek sınıf -children-container'dır, -children-content değil. Yanlış sınıf adı kullanılan bir kural sessizce etkisiz kalır.