Fix layout issues with Firefox (#383)

* style: update custom CSS for consistent table and link heights to fix daily summary layout on Firefox

- Adjusted the height properties for table headers, rows, and cells to ensure a uniform height of 2rem, improving visual consistency across the UI.
- Modified link styles within table cells to maintain consistent dimensions and alignment, enhancing user experience.
- Added new CSS rules to prevent content overflow and ensure proper vertical alignment in table cells, contributing to a cleaner layout.

* style: update date input calendar icon styles for light and dark modes

- Adjusted CSS for date input calendar icons to support both light and dark themes.
- Implemented color-scheme properties for improved visibility and consistency across different themes.
- Ensured that the styles are applied correctly based on the user's selected theme, enhancing the overall user experience.

* fix: enhance date picker initialization logic for improved usability

- Simplified the date picker value setting to only trigger changes when the value is different, improving performance.
- Ensured the date picker becomes visible when necessary and triggers a change event if the chart is empty, enhancing user experience.
- Removed redundant comments and streamlined the code for better readability and maintainability.

assets/custom.css

@@ -73,7 +73,8 @@ thead.sticky-header {
   position: sticky;
   top: 0;
   z-index: 10;
-  background-image: linear-gradient(to bottom, white 70%, transparent 100%);
+  height: 2rem;
+  background-color: var(--fallback-b1,oklch(var(--b1)/1));
 }
 
 [data-theme=dark] thead.sticky-header {
@@ -105,8 +106,10 @@ thead.sticky-header {
 }
 
 .hour-data a {
-  height: 100%;
-  width: 100%;
+  height: 2rem;
+  min-height: 2rem;
+  max-height: 2rem;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -518,12 +521,50 @@ thead.sticky-header {
     transition: transform 0.2s ease-in-out;
 }
 
-/* Style date input calendar icon for dark mode */
-[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
-  filter: invert(1);
+/* Style date input calendar icon for light mode */
+[data-theme="light"] input[type="date"] {
+  color-scheme: light;
 }
 
-/* For Firefox */
+/* Style date input calendar icon for dark mode */
 [data-theme="dark"] input[type="date"] {
   color-scheme: dark;
+}
+
+/* Ensure table cells have consistent height and prevent content overflow */
+.hour-data {
+  height: 2rem;
+  min-height: 2rem;
+  max-height: 2rem;
+  line-height: 2rem;
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+
+/* Fix table row height consistency */
+.table tr {
+  height: 2rem;
+  min-height: 2rem;
+  max-height: 2rem;
+}
+
+/* Ensure table cells maintain their dimensions */
+.table td, 
+.table th {
+  box-sizing: border-box;
+  height: 2rem;
+  min-height: 2rem;
+  max-height: 2rem;
+  vertical-align: middle;
+}
+
+/* Fix flex alignment in cells with links */
+.hour-data a {
+  height: 2rem;
+  min-height: 2rem;
+  max-height: 2rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

assets/util.js

@@ -43,19 +43,17 @@ function initializeDatePicker() {
 		return `${year}-${month}-${day}`;
 	}
 
-	const today = getIsoDateString(new Date()); // ensures consistent 'YYYY-MM-DD' format
-
-	// Set the value first
+	const today = getIsoDateString(new Date());
 	const newValue = hashDate || today;
 
-	// Only trigger change if the picker is invisible (first load)
-	// or if the value has actually changed
-	if (picker.classList.contains('invisible') || picker.value !== newValue) {
+	// Only trigger change if the value is actually different
+	if (picker.value !== newValue) {
 		picker.value = newValue;
-		picker.classList.remove('invisible'); // Make picker visible
+		picker.classList.remove('invisible');
+		htmx.trigger(picker, 'change');
+	} else if (!document.getElementById('topBirdsChart').children.length) {
+		// If the value hasn't changed but the chart is empty, trigger the change
 		htmx.trigger(picker, 'change');
-	} else {
-		picker.classList.remove('invisible'); // Make picker visible
 	}
 }