From d358441048e7dde6cd69cdd673fbb7ba79cecc56 Mon Sep 17 00:00:00 2001
From: NguyenND <ngodanguyen@gmail.com>
Date: Tue, 14 Oct 2025 10:34:25 -0400
Subject: [PATCH] Fixed Attendance Records filter section layout

---
 static/css/attendance.css | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/static/css/attendance.css b/static/css/attendance.css
index 07ad060..a8e7044 100644
--- a/static/css/attendance.css
+++ b/static/css/attendance.css
@@ -216,7 +216,7 @@
 
 .filter-row {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-template-columns: repeat(5, 1fr);
   gap: var(--spacing-4);
   align-items: end;
 }
@@ -225,6 +225,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2);
+  min-width: 0;
 }
 
 .filter-group label {
@@ -243,13 +244,14 @@
 
 .filter-group input,
 .filter-group select {
-  padding: var(--spacing-3) var(--spacing-4);
+  padding: 0.625rem 0.875rem; /* Reduced padding for compact layout */
   border: 2px solid var(--gray-200);
   border-radius: var(--radius-lg);
-  font-size: var(--font-size-sm);
+  font-size: 0.875rem; /* Fixed font size */
   background-color: var(--white);
   transition: var(--transition);
   width: 100%;
+  box-sizing: border-box; /* Ensure padding is included in width */
 }
 
 .filter-group input:focus,
@@ -260,10 +262,12 @@
 }
 
 .filter-actions {
+  grid-column: 1 / -1; /* Span all columns */
   display: flex;
   gap: var(--spacing-3);
   justify-content: flex-start;
   align-items: end;
+  margin-top: 0.5rem;
 }
 
 /* Table Section */
@@ -917,14 +921,6 @@ tr.modified-record {
   word-break: break-word;
 }
 
-/* Enhanced date range filters */
-.filter-row {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--spacing-4);
-  align-items: end;
-}
-
 .filter-group input[type="date"] {
   appearance: none;
   -webkit-appearance: none;
@@ -967,6 +963,14 @@ tr.modified-record {
     grid-template-columns: 1fr;
   }
 
+  .filter-actions {
+    flex-direction: column;
+  }
+  
+  .filter-actions .btn {
+    width: 100%;
+  }
+
   .record-details-grid {
     grid-template-columns: 1fr;
   }