/* ========================================================================== xpdt-responsive.css — perbaikan tampilan HP & tablet TERPUSAT (agenda no.10) Dimuat tiap halaman modul via di index.html. Aturan di sini AMAN di semua lebar; yang khusus layar kecil dibungkus @media. CSS saja — tanpa logika. Riwayat: Tahap B (tabel TaskList) 28 Juni 2026. ========================================================================== */ /* --- Tahap B: tabel TaskList JANGAN meluberkan halaman di HP --- Grid/flex item default ber-min-width:auto -> melar mengikuti lebar tabel, sehingga pembungkus overflow-x:auto-nya tak aktif & SELURUH halaman meluber horizontal (toolbar/tombol ke-cut). Set min-width:0 supaya item boleh menyusut dan scroll ditangani pembungkus tabel, bukan halaman. Aman di desktop (kolom 1fr tetap punya ruang). */ .xpdt-tl-layout { min-width: 0; } .xpdt-tl-content { min-width: 0; } /* Pembungkus tabel (div ber-overflow-x) dibatasi lebar kontainer supaya benar-benar men-scroll di dalam, bukan mendorong layout melebar. */ .xpdt-tl-content > div[style*="overflow-x"] { max-width: 100%; } /* ========================================================================== Tahap E (28 Juni, REVISI) — TABEL TINGGI PENUH + SCROLL HALAMAN (luar) di HP. Masalah Master: kotak tabel dibungkus `max-height:calc(100vh - Npx)` dgn offset hitungan DESKTOP -> di HP jadi (a) terlalu PENDEK ("cuma header"), (b) scroll bertingkat "nyangkut" (kotak vs halaman). [Percobaan rantai-flex sebelumnya malah bikin tabel makin pendek + memotong isi DASHBOARD via overflow:hidden -> dicabut.] Fix sederhana & aman: di HP, BUANG max-height kotak -> kotak tumbuh setinggi isinya, scroll VERTIKAL ditangani HALAMAN (scroll luar, lega), scroll HORIZONTAL tetap di dalam kotak (overflow-x:auto inline tak diubah). Tak menyentuh #appShell/ #moduleContainer -> dashboard utuh. Semua DI DALAM @media -> desktop tak tersentuh. Selektor: pembungkus mana pun yg inline-style-nya mengandung `calc(100vh` (semua id: tlTableWrapper/ltx/bc/im/taItemsTableWrap). EXP6 (tanpa max-height) memang sudah penuh. ========================================================================== */ @media (max-width: 768px) { div[style*="calc(100vh"] { max-height: none !important; /* tumbuh penuh -> halaman yang scroll ke bawah */ } /* Sidebar daftar kontrak/kategori grid (.xpdt-tl-sidebar) di HP menumpuk DI ATAS konten. Aslinya `position:sticky; top:70px` (utk desktop) -> di HP dia tetap nempel saat halaman scroll, sehingga TABEL scroll DI BELAKANGNYA (overlap). Jadikan static di HP supaya ikut scroll halaman (tak menutupi tabel). */ .xpdt-tl-sidebar { position: static !important; top: auto !important; } } /* ========================================================================== Revamping 2 No.11 (10 Juli 2026) — INSET/GAP SERAGAM PERMANEN. SEMUA page (kecuali dashboard) di bawah navbar diberi lebar maksimum + gap kiri-kanan, seperti dashboard, supaya isi task-list tak lagi melar edge-to-edge. Hook: XpdtNavbar.init menandai tiap halaman. Dashboard dikecualikan (module='dashboard'). Rule ini OTOMATIS berlaku untuk task baru mana pun (cukup init navbar dgn activeModule) — permanen. Di HP max-width:100% -> tak ada gap paksa; padding tetap kecil. ========== */ body:not([data-xpdt-module="dashboard"]) #moduleContainer { max-width: 1600px; margin-inline: auto; padding-inline: clamp(0.75rem, 4vw, 3rem) !important; } /* ========================================================================== Revamping 2 No.2 (11 Juli 2026) — TOMBOL DETAIL (expand) di kolom paling kiri. Menggantikan klik-baris-buka-form (pola task Audit Trail) agar tak ada salah klik. Hanya ikon panah (tanpa tulisan "Buka"). Dipakai lintas ~33 papan: - Papan tanpa checkbox: kolom baru paling kiri berisi tombol ini. - Papan dengan checkbox (SM Lokal dll): tombol ini ditumpuk DI BAWAH checkbox dalam sel yang sama (.cell-checkbox), lihat .cell-checkbox .xpdt-expand-btn. CSS global (dimuat tiap modul) — satu sumber, warisi otomatis utk task baru. */ /* Tombol diperkecil ~10% (arahan Master 11 Juli). */ .xpdt-expand-btn { display: inline-flex; align-items: center; justify-content: center; background: #0c447c; color: #fff; border: none; border-radius: 5px; padding: 0.23rem 0.36rem; font-size: 0.74rem; line-height: 1; cursor: pointer; transition: background 0.15s; } .xpdt-expand-btn:hover { background: #0a3763; } /* Lebar kolom expand = kolom checkbox SM Lokal (30px) supaya seragam & tak melebar. */ .xpdt-tl-table td.cell-expand, .xpdt-tl-table th.cell-expand { width: 30px; text-align: center; white-space: nowrap; padding-inline: 0.3rem; } /* Papan checkbox: checkbox di atas, tombol expand di bawahnya, rata tengah. */ .xpdt-tl-table td.cell-checkbox .xpdt-expand-btn { margin-top: 0.32rem; } /* Revamping 2 No.5 (arahan Master 11 Juli): tombol Action = ikon panah-bawah putih, bulat, hijau — hemat ruang supaya kolom ETA muat 'dd mmm yyyy' sebaris. */ .xpdt-action-btn { display: inline-flex; align-items: center; justify-content: center; background: #1e9e5a; color: #fff; border: none; border-radius: 5px; padding: 0.23rem 0.36rem; font-size: 0.74rem; line-height: 1; cursor: pointer; transition: background 0.15s; } .xpdt-action-btn:hover { background: #178048; } .xpdt-tl-table td.cell-action, .xpdt-tl-table th.cell-action { width: 30px; text-align: center; white-space: nowrap; padding-inline: 0.3rem; } /* menu dropdown Action (di-append ke body agar tak terpotong tabel) */ .xpdt-action-menu { position: absolute; z-index: 3500; min-width: 108px; background: #fff; border: 1px solid #d0d7de; border-radius: 7px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 4px; overflow: hidden; } .xpdt-action-menu .xpdt-action-item { padding: 5px 10px; font-size: 0.78rem; color: #24292f; border-radius: 5px; cursor: pointer; } .xpdt-action-menu .xpdt-action-item:hover { background: #eef4ff; color: #0c447c; }