Fix(UI): Fix Admin Date Filter Layout Overflow

static/css/custom_v2.css

@@ -25,25 +25,53 @@ h1, h2, h3, h4, h5, h6 {
     display: flex !important;
     flex-direction: row !important;
     align-items: center !important;
-    gap: 3px !important;
+    justify-content: space-between !important;
+    gap: 2px !important;
     width: 100% !important;
+    box-sizing: border-box !important;
+    overflow: hidden !important; /* Prevent wrapping overflow */
+}
+
+/* Hide any stray shortcuts that might have survived JS cleanup */
+.masar-date-filter-row .datetimeshortcuts {
+    display: none !important;
 }
 
 .masar-date-filter-row select {
     width: 32% !important;
-    min-width: 50px !important;
+    min-width: 0 !important;
     font-size: 11px !important;
-    padding: 2px !important;
+    padding: 0 2px !important;
-    height: 30px !important;
+    height: 28px !important;
+    line-height: 1 !important;
+    box-sizing: border-box !important;
+    margin: 0 !important;
 }
 
 .masar-date-filter-row input {
     width: 33% !important;
-    min-width: 50px !important;
+    min-width: 0 !important;
     font-size: 11px !important;
-    padding: 2px !important;
+    padding: 0 2px !important;
-    height: 30px !important;
+    height: 28px !important;
     margin: 0 !important;
+    box-sizing: border-box !important;
+}
+
+/* Specific fix for date inputs to ensure they look clean */
+.masar-date-filter-row input[type="date"] {
+    -webkit-appearance: none; /* Remove some browser defaults */
+    appearance: none;
+    line-height: 28px;
+}
+.masar-date-filter-row input[type="date"]::-webkit-inner-spin-button,
+.masar-date-filter-row input[type="date"]::-webkit-calendar-picker-indicator {
+    /* Make the calendar icon smaller and fit */
+    width: 12px;
+    height: 12px;
+    margin: 0;
+    padding: 0;
+    opacity: 0.6;
 }
 
 
@@ -200,4 +228,4 @@ h1, h2, h3, h4, h5, h6 {
 }
 [dir="rtl"] .text-left {
     text-align: right !important;
-}
+}

static/js/admin_date_range_dropdown.js

@@ -1,9 +1,9 @@
 (function($) {
-    // Masar Date Range Filter Layout Fix v3
+    // Masar Date Range Filter Layout Fix v4
     // Forces a horizontal layout for the Date Range Filter in Django Admin Sidebar
+    // v4: Switches to type="date", removes Django's calendar shortcuts to prevent layout breakage.
 
     function initDateRangeDropdown() {
-        console.log("Masar Date Filter: Initializing v3...");
         
         // Find all "Greater Than or Equal" inputs (the start date of the range)
         var $gteInputs = $('input[name$="__gte"]');
@@ -23,22 +23,12 @@
 
             if ($lte.length === 0) return; 
 
-            // Locate the container in the sidebar.
+            // Locate the container
-            // Usually it's inside a <li class="... field-created_at ..."> or similar.
-            // We want to find the direct parent that holds these inputs.
             var $parent = $gte.parent();
 
-            // Create our custom flex wrapper
+            // Create custom flex wrapper
             var $wrapper = $('<div class="masar-date-filter-row"></div>');
-            $wrapper.css({
+            
-                'display': 'flex',
-                'flex-direction': 'row',
-                'align-items': 'center',
-                'gap': '3px',
-                'width': '100%',
-                'margin-bottom': '10px'
-            });
-
             // Create the Quick Select Dropdown
             var $select = $('<select class="form-control custom-select admin-date-dropdown">' +
                 '<option value="any">Any</option>' +
@@ -48,24 +38,10 @@
                 '<option value="custom">Custom</option>' +
                 '</select>');
             
-            $select.css({
+            // CONVERT INPUTS TO HTML5 DATE
-                'width': '34%', 
+            // This gives us a native picker and removes the need for Django's clunky JS shortcuts
-                'min-width': '60px',
+            $gte.attr('type', 'date').removeClass('vDateField');
-                'height': '30px',
+            $lte.attr('type', 'date').removeClass('vDateField');
-                'padding': '0 4px',
-                'font-size': '11px'
-            });
-
-            // Style inputs
-            var inputStyle = {
-                'width': '33%',
-                'min-width': '0',
-                'height': '30px',
-                'padding': '4px',
-                'font-size': '11px'
-            };
-            $gte.css(inputStyle).attr('placeholder', 'Start');
-            $lte.css(inputStyle).attr('placeholder', 'End');
 
             // --- RESTRUCTURING DOM ---
             // 1. Insert wrapper before the start input
@@ -76,13 +52,21 @@
             $wrapper.append($gte);
             $wrapper.append($lte);
 
-            // 3. Cleanup: Hide any left-over text nodes (like "-", "From", "To") or <br> in the parent
+            // 3. AGGRESSIVE CLEANUP
+            // Remove text nodes, BRs, AND Django's calendar shortcuts (.datetimeshortcuts)
+            // We search the *original parent* for these leftovers.
             $parent.contents().filter(function() {
-                return (this.nodeType === 3 && $.trim($(this).text()) !== '') || this.tagName === 'BR';
+                return (
+                    (this.nodeType === 3 && $.trim($(this).text()) !== '') || // Text
+                    this.tagName === 'BR' || // Line breaks
+                    $(this).hasClass('datetimeshortcuts') // Django Calendar Icons
+                );
             }).remove();
 
+            // Also hide any shortcuts that might be dynamically appended later (via CSS rule or observer)
+            // But removing the 'vDateField' class above usually prevents Django from initializing them.
+
             // Logic for Dropdown Changes
-            // Helper to format date as YYYY-MM-DD
             function formatDate(d) {
                 var year = d.getFullYear();
                 var month = ('0' + (d.getMonth() + 1)).slice(-2);
@@ -125,20 +109,10 @@
                         $gte.val(startStr);
                         $lte.val(endStr);
                     }
-                    // Trigger Form Submit (Changes URL)
+                    // Trigger Form Submit
-                    // Try to find the filter form
+                    var $form = $gte.closest('form');
-                    var $form = $gte.closest('form'); // Usually #changelist-search
                     if ($form.length) {
                          $form.submit();
-                    } else {
-                        // Sometimes filters are links, but date range usually has a button or relies on form
-                        // If there is an "Apply" button nearby?
-                        var $applyBtn = $parent.closest('.admindatefilter').find('input[type="submit"], button');
-                        if ($applyBtn.length) {
-                            $applyBtn.click();
-                        } else {
-                            // Fallback: reload page with query params (complex, skip for now, rely on standard form)
-                        }
                     }
                 }
             });
@@ -146,13 +120,11 @@
     }
 
     $(document).ready(function() {
-        // Run immediately
         initDateRangeDropdown();
-        
+        // Retry logic for stubborn renderers
-        // And retry a few times to catch slow rendering
         setTimeout(initDateRangeDropdown, 200);
         setTimeout(initDateRangeDropdown, 500);
         setTimeout(initDateRangeDropdown, 1000);
     });
 
-})(django.jQuery);
+})(django.jQuery);