/* ============================================================ MOBİL UYUM KATMANI ============================================================ EN SON yüklenir. Amacı, mevcut 24 stil dosyasının hiçbirine dokunmadan dar ekranda bozulan yerleşimi düzeltmek. Neden ayrı dosya: bozuklukların bir kısmı yükleme sırasından doğuyor (aynı özgüllükteki bir kural, sonra yüklendiği için mobile-nav.css'in medya sorgusunu eziyordu). En sona bir katman koymak, o çakışmaları tek tek avlamaktan hem daha güvenli hem de geri alınabilir: bu satırı app.html'den çıkarmak uygulamayı eski haline döndürür. Geniş ekran görünümü değişmiyor — 1. bölüm dışındaki her şey medya sorgusunun içinde. Kırılma noktaları: <= 860px tablet + telefon (kenar çubuğu zaten çekmeceye düşüyor) <= 640px telefon ============================================================ */ /* ============================================================ 1 IZGARA TAŞMASI (her ekran boyutunda geçerli) ============================================================ 1fr aslında minmax(auto, 1fr) demek ve "auto"nun alt sınırı min-content. İçinde tablo olan bir .card'ın min-content'i ~560px olduğu için, tek sütuna düşmüş bir ızgara bile 560px'lik bir ray üretiyordu: 319px'lik alanda 568px'lik içerik, yani sayfanın tamamı yana kayıyordu (ölçüm: #content 375px yerine 596px kaydırma genişliği). minmax(0,1fr) rayın sıfıra kadar küçülmesine izin veriyor; tablo artık sayfayı değil, kendi .table-wrap'ini kaydırıyor. ============================================================ */ .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } } /* Izgara çocuklarının kendisi de küçülebilmeli: flex/grid öğesinin varsayılan min-width'i auto, yani yine min-content. */ .grid-2 > *, .grid-3 > *, .grid-4 > *, .stat-grid > *, .usage-split > *, .manage-tools > * { min-width: 0; } /* 220px sabit alt sınır, içerik alanı ondan darsa taşıyor. */ .stat-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } /* ============================================================ 2 GERÇEK GÖRÜNÜR YÜKSEKLİK ============================================================ Mobil tarayıcıda 100vh, adres çubuğu ekrandayken bile onun kapladığı alanı da sayar: #app ekrandan taşar, en alttaki satır ve sabit konumlu kenar çubuğunun dibi görünmez. dvh o an gerçekten görünen yüksekliği verir. @supports şart: desteklemeyen tarayıcı base.css'teki 100vh'de kalsın, geçersiz bir değerle yüksekliksiz kalmasın. ============================================================ */ @supports (height: 100dvh) { #app { height: 100dvh; } } /* ============================================================ 3 ÜST BAR ============================================================ Buradaki asıl hata: knowledge.css'teki .topbar-search input { width: 280px } kuralı, mobile-nav.css'in @media (max-width:860px) { .topbar-search input { width: 130px } } kuralıyla AYNI özgüllükte ama app.html'de bir satır SONRA yükleniyor. Medya sorgusu özgüllük eklemediği için sabit 280px telefonda da kazanıyordu. Sonuç ölçüm: .topbar-right 375px'lik barın içinde 629px oluyor, arama kutusu x=460..740'a, yenile düğmesi x=750..796'ya düşüyordu. .main'de overflow:hidden olduğu için ikisi de kırpılıyor ve telefonda ERİŞİLEMİYORDU — kaydırarak bile ulaşılamıyor. Çözüm sabit bir genişlik daha vermek değil; blokların küçülebilmesini sağlamak. Flex öğeleri varsayılan olarak min-content'in altına inmez, o yüzden min-width:0 gerekiyor. ============================================================ */ @media (max-width: 860px) { .topbar { padding: 10px 14px; gap: 10px; } .topbar-left { min-width: 0; flex: 1 1 auto; } .page-title { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Alt başlık dar ekranda başlığa yer açmak için kalkıyor; taşıdığı bilgi sayfanın kendi içinde de var. */ .page-subtitle { display: none; } .topbar-right { min-width: 0; flex: 0 1 auto; gap: 6px; } .topbar-search { min-width: 0; flex: 1 1 120px; } .topbar-search input { width: 100%; min-width: 0; } } /* Egemenlik rozeti tek başına 282px: 375px'lik bir barda arama kutusuna da yenile düğmesine de yer bırakmıyor. Bilgi kalıcı bir güven işareti, işlevsel bir kontrol değil — dar ekranda düşüyor. */ @media (max-width: 720px) { .ai-sov-badge { display: none; } } /* ============================================================ 4 İÇERİK ALANI VE ÇENTİK ============================================================ */ /* Yan boşluk yalnız TELEFONDA daralıyor: 28px, 375px'lik bir ekranın %15'ini yiyordu. Tablette 28px yerinde duruyor — orada dar bir boşluk kazanç değil, kayıp olurdu. */ @media (max-width: 640px) { .content { padding: 16px 14px 76px; } } /* Çentikli / yuvarlak köşeli telefonlarda yatayda güvenli alan. Taban değer kırılma noktasının kendi boşluğu, çünkü max() küçük olanı değil BÜYÜK olanı seçer: burada 14px yazmak tablette 28px'lik boşluğu 14px'e düşürürdü. */ @media (max-width: 860px) { .content, .topbar { padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); } .sidebar { padding-bottom: env(safe-area-inset-bottom); } } @media (max-width: 640px) { .content, .topbar { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); } } /* ============================================================ 5 TABLOLAR ============================================================ Tablolar dar ekranda karta çevrilmiyor, yatay kaydırmada bırakılıyor. Gerekçe: sütun başlığı burada anlamın kendisi (hangi SLA, hangi durum, hangi tarih) ve kart görünümü 15 ayrı sayfada hücre başına data-label eklemeyi gerektirirdi — mobil uyum için göze alınacak bir yeniden yazım değil. .table-wrap'te overflow-x:auto zaten vardı ve çalışıyor; burada yapılan iş kaydırmayı parmakla rahat hale getirmek ve satırları dar ekranda daha çok sığdırmak. ============================================================ */ .table-wrap { -webkit-overflow-scrolling: touch; /* Tabloyu yatayda sonuna kadar kaydırınca hareket tarayıcıya geçip "geri" navigasyonunu tetikliyordu. */ overscroll-behavior-x: contain; } @media (max-width: 860px) { table.data { font-size: 12px; } table.data thead th { padding: 8px 10px; } table.data tbody td { padding: 10px; } /* Sayı ve tarih sütunları satır ortasından bölünmesin. */ table.data .mono, table.data .id-cell, table.data .actions-cell { white-space: nowrap; } } /* ============================================================ 6 FORMLAR VE DOKUNMA HEDEFLERİ ============================================================ iOS Safari, odaklanılan alanın yazı boyutu 16px'in ALTINDAysa sayfayı otomatik yakınlaştırır ve geri uzaklaştırmayı kullanıcıya bırakır. Uygulamadaki alanlar 12–13px olduğu için her form dokunuşunda ekran zıplıyordu. 16px bunu tamamen durduruyor ve yalnız dar ekranda geçerli — masaüstü tipografisi değişmiyor. ============================================================ */ @media (max-width: 860px) { .form-row input, .form-row select, .form-row textarea, .filter-bar input, .filter-bar select, .topbar-search input, .searchable-select-trigger, .searchable-select-search, table.data input, table.data select, table.data textarea, /* Giriş ekranı ayrı bir stil dosyasından geliyor (.orb-field) ve telefonda dokunulan İLK alan orası — e-posta kutusuna basar basmaz sayfa yakınlaşıyordu. */ .orb-field input { font-size: 16px; } /* Parmak hedefi: Apple HIG 44px, Material 48dp. textarea dışarıda — modal.css'teki min-height:80px korunuyor. */ .form-row input, .form-row select { min-height: 44px; } .form-row input, .form-row select, .form-row textarea { padding: 10px 12px; } .btn { min-height: 40px; } .btn-sm { min-height: 34px; } .nav-item { min-height: 44px; } /* Kapatma düğmesi 13×22px'ti — ekrandaki en küçük ve en çok ıskalanan hedef. Negatif margin, büyüyen kutunun başlık satırını aşağı itmesini engelliyor. */ .modal-close { min-width: 44px; min-height: 44px; display: grid; place-items: center; margin: -8px -8px -8px 0; } } /* ============================================================ 7 MODAL ============================================================ */ @media (max-width: 640px) { .modal-backdrop { padding: 12px; } .modal-header { padding: 14px 16px; } .modal-body { padding: 16px; } .modal-footer { padding: 12px 16px; } /* Onay düğmesi başparmağın altına gelsin diye ters sıra: ana eylem altta ve tam genişlikte. */ .modal-footer { flex-direction: column-reverse; gap: 8px; } .modal-footer .btn { width: 100%; } /* İki sütunlu form, 137px'lik seçim kutuları üretiyordu. */ .form-grid-2 { grid-template-columns: 1fr; } } @supports (max-height: 100dvh) { @media (max-width: 640px) { .modal { max-height: calc(100dvh - 24px); } } } /* ============================================================ 8 KANBAN ============================================================ 5 sütun × en az 220px = 1156px. Kaydırma zaten vardı ama sütunlar dar ekranda yarım kalıyordu: sütun genişliği ekranın %84'üne sabitlenip kaydırma tutturmalı hale getiriliyor — bir sütun tam ortalanıyor, sonraki kenardan görünüp kaydırılabilir olduğunu söylüyor. ============================================================ */ @media (max-width: 860px) { .kanban { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .kanban-col { scroll-snap-align: center; min-height: 320px; } } @supports (max-height: 70dvh) { @media (max-width: 860px) { .kanban-col { max-height: 70dvh; } } } /* ============================================================ 9 FİLTRE ÇUBUĞU ============================================================ Zaten flex-wrap:wrap — sarıyor. Eksik olan, sarılan öğelerin satırı doldurması: sabit genişlikler yüzünden satır sonlarında kullanılmayan boşluklar kalıyordu. ============================================================ */ @media (max-width: 640px) { .filter-bar { gap: 8px; padding: 10px 0 14px; } .filter-bar input, .filter-bar select, .filter-bar .searchable-select, .filter-bar .searchable-select-trigger { flex: 1 1 140px; min-width: 0; width: auto; } .searchable-select-menu { min-width: 100%; } } /* ============================================================ 10 BAŞLIK SATIRLARI ============================================================ .section-header ve .card-header space-between'li flex: sağdaki düğme grubu uzun başlıkla yan yana sığmayınca taşıyordu. ============================================================ */ @media (max-width: 640px) { .section-header, .card-header, .flex-between { flex-wrap: wrap; gap: 10px; } .section-title { font-size: 15px; } } /* ============================================================ 11 DOKUNMA CİLASI ============================================================ */ @media (max-width: 860px) { /* Android Chrome'un mavi dokunma dikdörtgeni, kendi :active durumları olan düğmelerin üstünde çift geri bildirim oluyor. */ .btn, .nav-item, .tool-btn, .modal-close, #nav-toggle, .tab { -webkit-tap-highlight-color: transparent; } /* Çekmece açıkken arkadaki sayfa parmak altında kaymasın. */ #app.nav-open .content { overflow: hidden; } } /* ============================================================ 12 SAYFAYA ÖZEL TAŞMALAR ============================================================ Bölüm 1'deki ızgara düzeltmesinden sonra 21 rotanın 17'si temiz kaldı. Kalan dördü sabit piksel genişliklerden kaynaklanıyordu; her biri ayrı bir kalıp, o yüzden ayrı ayrı ele alınıyor. ============================================================ */ /* --- 12.1 Sekme şeridi (Sistem Yönetimi) --- .tabs sarmayan bir flex satırı: dört sekme 458px sürüyor ve 347px'lik alandan taşıyordu. Sarmak yerine yatay kaydırma, çünkü sekmelerin tek satırda kalması sıralarını okunur tutuyor. Kaydırma çubuğu gizli; yarım görünen sekme zaten kaydırılabilir olduğunu söylüyor. */ @media (max-width: 860px) { .tabs { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { flex: 0 0 auto; white-space: nowrap; } } /* --- 12.2 Yardımcı flex satırları --- .flex ve .flex-end düğme/alan satırlarında kullanılıyor ve sarmıyordu: GitHub yönetiminde "Rotate Secret" düğmesi ekranın 50px dışında kalıyordu. */ @media (max-width: 640px) { .flex, .flex-end { flex-wrap: wrap; } } /* --- 12.3 Entegrasyon olay satırı (GitHub) --- 130px + 90px + 100px sabit sütun + 36px boşluk = 356px, yani 1fr sıfıra inse bile satır 346px'lik karta sığmıyordu. Telefonda: üstte zaman + yön, altta tam genişlik açıklama, en altta aktör. */ @media (max-width: 640px) { .event-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px; } .event-row .desc { grid-column: 1 / -1; } .event-row .desc code { word-break: break-word; } } /* --- 12.4 Ajan kartları (Yönet) --- Blob düzeninden kalan ~30px'lik görünmez bir taşma sayfayı yatayda kaydırılabilir yapıyordu; hiçbir çocuk öğe kartın sağ kenarını geçmiyor, yani kırpılacak görünür içerik yok. clip (hidden değil) seçildi: yeni bir kaydırma bağlamı oluşturmuyor, dikeydeki taşmayı serbest bırakıyor. */ @media (max-width: 860px) { .manage-tools { overflow-x: clip; } } /* ============================================================ 13 MODAL TAŞMASI (grid item blowout) ============================================================ .modal-backdrop bir grid (place-items:center), .modal da onun grid öğesi. Grid öğesinin varsayılan min-width'i auto, yani min-content: içindeki .customer-header (avatar + ad + iki düğme tek satırda) min-content'i 441px'e çıkarınca modal, width:100% yazmasına rağmen 477px'e genişliyor ve 375px'lik ekranda sağdan 114px kesiliyordu — Müşteri 360 modalı telefonda okunamıyordu. 1. bölümdeki .grid-2 taşmasıyla aynı kalıp, bu sefer modalda. ============================================================ */ @media (max-width: 860px) { .modal, .modal.modal-lg { min-width: 0; max-width: 100%; } /* Başlık şeridi tek satırda durmak zorunda kalmasın: min-content'i modalı geniş tutan asıl şey buydu. */ .customer-header { flex-wrap: wrap; padding: 16px; gap: 14px; } .customer-header > * { min-width: 0; } .customer-header .flex { width: 100%; } .customer-header .flex .btn { flex: 1 1 auto; } } /* Onay kutulu satırlar (sesli okuma, güvenlik planı): tıklama hedefi etiketin tamamı ama yüksekliği 18px'ti. */ @media (max-width: 860px) { .voice-consent { min-height: 44px; } .voice-consent input { width: 20px; height: 20px; } }