From b0918c1bb97ef8c74a16d9981afdffb516df2754 Mon Sep 17 00:00:00 2001
From: Dodo <pangkywara@gmail.com>
Date: Thu, 4 Jun 2026 17:11:23 +0700
Subject: [PATCH] fix(tapops): perbaiki overflow date input di mobile dengan
 layout kolom dan lebar fleksibel

---
 groups/Tapops/css/documents.css | 53 ++++++++++++++++++++++++++++-----
 1 file changed, 45 insertions(+), 8 deletions(-)

diff --git a/groups/Tapops/css/documents.css b/groups/Tapops/css/documents.css
index 61bf593..c4017d0 100644
--- a/groups/Tapops/css/documents.css
+++ b/groups/Tapops/css/documents.css
@@ -715,11 +715,11 @@ a.btn-action-outline:hover {
         min-width: 0;
     }
 
+    /* Stack start/end date pickers vertically to avoid overflow */
     .date-range-inputs {
-        display: grid;
-        grid-template-columns: 1fr auto 1fr;
-        align-items: center;
-        gap: 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
         border: none;
         background: transparent;
         padding: 0;
@@ -728,13 +728,13 @@ a.btn-action-outline:hover {
     .date-range-inputs .input-wrapper {
         background: #f8fafc;
         border: 1px solid #e2e8f0;
-        padding: 10px 14px;
+        padding: 10px 12px;
         border-radius: 4px;
         display: flex;
         align-items: center;
-        justify-content: space-between;
         width: 100%;
         box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        overflow: hidden;
     }
 
     .date-range-inputs .input-wrapper:focus-within {
@@ -743,16 +743,38 @@ a.btn-action-outline:hover {
         box-shadow: 0 0 0 3px rgba(0, 49, 80, 0.08);
     }
 
+    /* Custom date input fills the wrapper width */
+    .custom-date-input {
+        width: 100%;
+        padding: 0;
+    }
+
+    /* DD / MM stay compact; YYYY stretches to fill remaining space */
+    .date-dd, .date-mm {
+        flex: 0 0 auto;
+        width: 30px;
+    }
+
+    .date-yyyy {
+        flex: 1;
+        width: auto;
+        min-width: 44px;
+        text-align: left;
+    }
+
     .date-part {
         font-size: 0.82rem;
     }
 
+    /* S/D label between pickers becomes a small inline tag */
     .range-divider {
-        font-size: 0.75rem;
+        font-size: 0.68rem;
         font-weight: 800;
         color: #94a3b8;
-        padding: 0 4px;
+        padding: 3px 10px;
         text-transform: uppercase;
+        text-align: center;
+        align-self: center;
     }
 
     .select-wrapper,
@@ -801,6 +823,21 @@ a.btn-action-outline:hover {
    Responsive — Phone (≤480px)
    =========================================== */
 
+@media (max-width: 480px) {
+    .date-dd, .date-mm {
+        width: 26px;
+    }
+
+    .date-yyyy {
+        min-width: 38px;
+    }
+
+    .date-calendar-btn {
+        padding-left: 4px;
+        font-size: 0.82rem;
+    }
+}
+
 /* ===========================================
    Pagination
    =========================================== */