/* responsive-fixes.css — perbaikan responsif lintas-device (dari DEVICE_AUDIT.md). Dimuat SETELAH style.css di base.html & base_admin.html. Hanya layout/struktur (font-size, overflow, breakpoint, safe-area) — TIDAK menyentuh warna/token. */ /* ─────────────────────────────────────────────────────────────────────────── [HIGH] iOS input-zoom. Safari iOS auto-zoom halaman saat user fokus ke input ber-font-size < 16px lalu tidak zoom-out → layout "lompat". Banyak input app pakai 13–14.5px. Paksa 16px HANYA di mobile (desktop tak berubah). !important untuk menang atas rule komponen ber-specificity tinggi (mis. #chatInput). Checkbox/radio/range dikecualikan (font-size tak relevan). ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select { font-size: 16px !important; } } /* ─────────────────────────────────────────────────────────────────────────── [MED] Tabel data tanpa wrapper overflow → seluruh halaman ikut horizontal- scroll di HP. Pengaman: bila kelas tabel ini tidak terbungkus, jadikan blok yang bisa scroll sendiri. (Wrapper eksplisit di template tetap lebih baik; ini jaring pengaman tambahan, tidak merusak yang sudah dibungkus.) ─────────────────────────────────────────────────────────────────────────── */ /* CATATAN: .history-table-v2 SENGAJA TIDAK disentuh — shell.css sudah membuatnya layout kartu responsif (thead disembunyikan, tr → grid) di semua lebar; menambah display:block/overflow malah merusaknya. (Audit keliru di titik ini.) */ @media (max-width: 768px) { .audit-table, .ad-table, .bm-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Tabel admin yang SUDAH dibungkus .table-scroll-wrap: biarkan wrapper yang scroll (table tetap display:table + min-width:900px-nya), jangan dobel. */ .table-scroll-wrap > .ad-table { display: table; overflow-x: visible; } /* Gelombang 2: kelas tabel LAIN yang terbukti dipakai tanpa pembungkus. Daftar ini diturunkan dari pemeriksaan, bukan dikarang: grep -rl ']*class="[^"]*"' Kalau nanti salah satunya diberi pembungkus sungguhan di template, hapus juga dari sini — dua lapis penggulung menghasilkan bilah ganda. */ .agd-errs, .cmp-table, .cooccur-matrix-table, .dsn-table, .jq-tabel, .jq-tabel-tipis, .kb-table, .kind-tbl, .lg-table, .mp-tbl, .pa-tabel, .pd-rinci-t, .rrt-table, .sc-ph { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } } /* ─────────────────────────────────────────────────────────────────────────── [HIGH/owner] Admin shell di mobile. Section-nav (.admin-tabs) sudah flex-wrap (fungsional), tapi 10+ tab jadi banyak baris. Jadikan strip scroll horizontal (pola yang sama dipakai filter-tabs app). Dan kembalikan tombol logout yang ke-hidden di ≤640px (base_admin.css menyembunyikan semua .admin-topbar__nav a). ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* !important: admin___layout.css (di-load SETELAH file ini) menetapkan .admin-tabs{flex-wrap:wrap} sebagai rule dasar — tanpa !important override kita kalah urutan-sumber. */ .admin-tabs { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } .admin-tabs a { flex-shrink: 0; } } @media (max-width: 640px) { .admin-topbar__nav a[href="/auth/logout"] { display: inline-flex !important; } } /* Catatan: fix safe-area (#9) dilakukan presisi di komponen masing-masing (qda-stage-chat-dock.css .stage-dock-fab, qda-tour-menu.css .qda-tour-toast) agar menghormati nilai mobile yang sudah ada, bukan override broad. */ /* ═══════════════════════════════════════════════════════════════════════════ GELOMBANG 2 (Agu 2026) — "masih banyak yang keluar dari batasnya" ═══════════════════════════════════════════════════════════════════════════ Berkas ini kini dimuat PALING AKHIR di base.html/base_admin.html (dan sejak sekarang juga di base corporate/marketing/login/legal/form-responden/studio/ meeting-tamu), sehingga tambalan di bawah ini tidak perlu `!important`. Yang perlu dipahami sebelum menambah aturan di sini: `style.css:124` memasang `body { overflow-x: hidden }`. Itu TIDAK memperbaiki luapan — ia hanya membuang bilah gulung mendatar, sehingga elemen yang terlalu lebar diam-diam TERPOTONG. Keluhan "keluar dari batasnya" karena itu biasanya berarti konten terpotong, bukan halaman bergeser. Alat ukurnya ada di `web/scripts/periksa_responsif.mjs`, yang menetralkan aturan itu saat mengukur supaya lebar yang sebenarnya terbaca. ─────────────────────────────────────────────────────────────────────────── */ /* ── [HIGH] Pagar elemen media ────────────────────────────────────────────── `style.css:137` baru memagari `img, svg`. Justru sisanya yang paling sering meluap: `pre` berisi keluaran analisis/sitasi panjang, `iframe` (pratinjau, peta, co-browse), `video`, dan `table` hasil rakitan JS. Ini kelas kegagalan yang tidak perlu ditambal satu per satu selamanya — cukup dipagari sekali. `iframe.dcb-frame` (co-browse Dosen AI) DIKECUALIKAN, dan pengecualian itu wajib: `dosen-cobrowse.js:_fit()` merender iframe pada lebar desktop tetap (`style.width = 1280px`) lalu menyusutkannya dengan `transform: scale()`. `max-width: 100%` akan memotong lebar itu SEBELUM penskalaan, sehingga halaman di dalam panggung berganti ke tata letak HP dan seluruh koordinat sorotan/klik dosen meleset — gagal tanpa satu pun galat. */ video, canvas, embed, object { max-width: 100%; } iframe:not(.dcb-frame) { max-width: 100%; } pre { max-width: 100%; overflow-x: auto; } /* `` sebaris berisi hal-hal yang MEMANG tidak punya tempat pemenggalan alami: URL, nama env var, perintah shell. Peramban tidak akan pernah memotongnya sendiri, jadi satu kata sepanjang 40 aksara mendorong lebar induknya — terukur menyembul 93px di /settings/scraper-accounts pada layar 320px. `anywhere` (bukan `break-word`) juga ikut diperhitungkan saat menghitung lebar minimum intrinsik, yang justru itulah yang kita butuhkan. `pre code` DIKECUALIKAN: di sana blok sudah punya penggulung sendiri, dan memenggal baris perintah panjang membuatnya tidak bisa disalin dengan benar. */ code:not(pre code) { overflow-wrap: anywhere; } /* Teks prosa juga bisa memuat "kata" yang tak punya tempat pemenggalan: `(thematic/methodological/chronological/gap/consensus)` di /company adalah 55 aksara yang dianggap satu kata, dan ia mendorong kartunya 84px melebihi kolom sampai SELURUH halaman menggulung mendatar 59px di layar 768px. `break-word` (bukan `anywhere`) dipilih dengan sengaja: ia hanya memenggal ketika kata memang tidak muat pada barisnya, dan TIDAK ikut mengubah perhitungan lebar minimum intrinsik — jadi tata letak petak/flex di mana pun tidak bergeser. */ p, li, dd, dt, td, th, blockquote, figcaption, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* Utilitas pembungkus untuk tabel/blok lebar. Dipakai bertahap di template:
…
— bukan `display:block` pada tabelnya, karena itu mematahkan `position: sticky` pada thead. */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* ── [HIGH] Sisi kiri/kanan aman setelah `viewport-fit=cover` ─────────────── Sepuluh template base kini memakai `viewport-fit=cover` supaya `env(safe-area-inset-*)` — yang sudah tertulis di ±12 berkas CSS — benar- benar punya nilai di iPhone ber-notch. Sebelumnya semuanya bernilai 0 dan padding yang ditulis susah payah tidak pernah aktif. Konsekuensinya: halaman kini menggambar sampai ke bawah notch. Notch memakan sisi KIRI atau KANAN hanya dalam orientasi mendatar, jadi bilah melebar-penuh butuh jarak aman sendiri di sana. ⚠️ Syaratnya `max-height: 500px`, BUKAN `orientation: landscape` saja. Versi pertama aturan ini memakai orientasi saja — dan setiap layar desktop adalah "landscape". Karena berkas ini dimuat paling akhir, ia menang atas shell.css dan padding kepala di 1280px terukur menyusut dari 28px jadi 12px: satu tambalan HP yang diam-diam merapatkan seluruh tampilan desktop. Nilai dasar `max(..., 16px)` menjaga agar aturan ini tidak pernah membuat jaraknya lebih rapat dari norma HP, hanya lebih longgar bila ada notch. */ @media (orientation: landscape) and (max-height: 500px) { body.shell-v2 .hdr, body.shell-v2 .mob-nav, body.shell-v2 .main, .navbar { padding-left: max(env(safe-area-inset-left, 0px), 16px); padding-right: max(env(safe-area-inset-right, 0px), 16px); } } /* ── [HIGH] HP mendatar (lanskap) ─────────────────────────────────────────── Tidak ada SATU pun media query orientasi di seluruh CSS sebelum ini. Di HP mendatar tinggi layar tinggal ±360-400px, sementara kepala 56px + bilah nav bawah 68px + jarak aman memakan lebih dari sepertiganya — dan sisa ruang itulah tempat isi halaman. */ @media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) { :root { --bottom-nav-h: 52px; } body.shell-v2 .hdr { height: 48px; } .mob-nav__item { gap: 2px; padding: 4px 6px; } .mob-nav__item svg { width: 18px; height: 18px; } } /* ── [MED] Layar sangat sempit (320-360px) ────────────────────────────────── Juga belum pernah diatur: tidak ada satu pun `max-width` di bawah 480px di seluruh CSS. Padahal di 320px kepala shell (merek + saldo + 2-3 tombol ikon + hamburger, dengan jarak 12px dan padding 32px) sudah melebihi lebar layar. Ini bukan perangkat pinggiran untuk pasar mahasiswa Indonesia. */ @media (max-width: 360px) { body.shell-v2 .hdr { padding-left: 10px; padding-right: 10px; gap: 8px; } body.shell-v2 .main { padding-left: 12px; padding-right: 12px; } .container { padding-left: 14px; padding-right: 14px; } /* Kartu/petak yang masih memaksa dua kolom di lebar ini selalu meluap. */ .stat-grid, .stats-grid, .method-grid { grid-template-columns: 1fr; } } /* ── [MED] Merek di kepala tidak boleh menyodok tetangganya ──────────────── `.hdr__brand` adalah item flex tanpa `min-width: 0`, jadi lebar minimumnya adalah lebar ISINYA ("Risos AI" + label bagian). Di HP mendatar isinya 28px lebih lebar dari kotak yang tersisa dan tumpah ke atas kontrol di sebelah kanannya — terukur di /dashboard, /chat, dan /settings pada 844x390. Yang sama berlaku pada merek navbar legacy di 320px. Memberi izin memendek + tiga-titik menyelesaikan keduanya tanpa menghilangkan navigasi. */ body.shell-v2 .hdr__brand, .navbar-brand, .navbar-brand > a, /* Halaman berdiri sendiri (agen-developer, kebijakan, ketentuan kontributor) masing-masing menyalin bilah atasnya sendiri dengan nama kelas berbeda. Ketiganya punya cacat yang sama persis, jadi dipagari bersama-sama. */ .agd-brand, .kb-brand, .kt-brand { min-width: 0; overflow: hidden; } body.shell-v2 .hdr__brand .wm, body.shell-v2 .hdr__brand .ctx, .navbar-brand > a, .agd-brand, .kb-brand, .kt-brand { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── [MED] Target sentuh kepala shell ────────────────────────────────────── shell.css:1848 sudah menegakkan 44px untuk butir navigasi, tetapi tombol ikon di kepala justru menyusut jadi 32×32px di HP — di bawah ambang yang bisa ditekan dengan andal oleh ibu jari. */ @media (max-width: 768px) { body.shell-v2 .icon-btn, body.shell-v2 .hdr__controls-btn { width: 40px; height: 40px; } } /* ── [HIGH] Tabel telanjang di HP ─────────────────────────────────────────── 34 template memuat `` tanpa satu pun jejak pembungkus penggulung (`scroll-x` / `table-responsive` / `table-scroll-wrap` / `tableWrap` / `gulung` / `overflow-x`). Tabel adalah elemen yang MENOLAK menyusut: lebar minimumnya ditentukan isi selnya, jadi satu kolom "Alasan" atau satu alamat surel panjang cukup untuk mendorong seluruh halaman melewati tepi layar — dan karena `body { overflow-x: hidden }`, yang terlihat pengguna bukan halaman bergeser melainkan kolom terakhir yang HILANG. Tiga kelas admin (`.audit-table`, `.ad-table`, `.bm-table`) sudah ditambal di blok sebelumnya; aturan ini menggeneralisasi tambalan itu ke seluruh tabel yang belum tertangani, HANYA di lebar HP. Dua pengecualian, keduanya wajib: · `.history-table-v2` — shell.css:955 menyembunyikan `thead`-nya dan mengubah tiap baris jadi kartu. Menambahkan `display:block` merusaknya (sudah pernah dicatat sebagai kekeliruan audit sebelumnya). · Tabel yang SUDAH berada di dalam pembungkus penggulung — biarkan pembungkusnya yang bekerja, jangan menggulung dua kali. Catatan jujur: `display: block` mematikan `position: sticky` pada `thead`. Itu harga yang dibayar untuk tabel yang belum dibungkus dengan benar; pembungkus eksplisit `
` di template tetap solusi yang lebih baik dan bisa diterapkan bertahap tanpa mengganggu aturan ini. */ @media (max-width: 768px) { table:not(.history-table-v2):not(.ad-table):not(.bm-table):not(.audit-table):not( .scroll-x > table):not(.table-responsive > table):not(.table-scroll-wrap > table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } }