feat: UI overhaul

assets/styles/input_range.css

@@ -8,7 +8,8 @@ input[type="range"] {
   background: transparent;
 }
 
-input[type="range"]::-moz-range-thumb, input[type="range"]::-webkit-slider-thumb {
+input[type="range"]::-moz-range-thumb,
+input[type="range"]::-webkit-slider-thumb {
   width: 1.25rem;
   height: 1.25rem;
   background: var(--color-gray-400);
@@ -23,10 +24,13 @@ input[type="range"]::-webkit-slider-thumb {
   top: -9px;
 }
 
-input[type="range"]::-moz-range-track, input[type="range"]::-webkit-slider-runnable-track {
+input[type="range"]::-moz-range-track,
+input[type="range"]::-webkit-slider-runnable-track {
   background: var(--color-gray-800-muted);
   height: 0.5rem;
-  filter: drop-shadow(0 calc(0px - var(--spacing)) 0 var(--color-gray-900-muted));
+  filter: drop-shadow(
+    0 calc(0px - var(--spacing)) 0 var(--color-gray-900-muted)
+  );
   border-radius: 0.25rem;
 }
 

assets/styles/select_arrow.css

@@ -1,9 +1,7 @@
 select {
   appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%239ca3af' d='M300.3 440.8C312.9 451 331.4 450.3 343.1 438.6L471.1 310.6C480.3 301.4 483 287.7 478 275.7C473 263.7 461.4 256 448.5 256L192.5 256C179.6 256 167.9 263.8 162.9 275.8C157.9 287.8 160.7 301.5 169.9 310.6L297.9 438.6L300.3 440.8z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-size: 2rem;
-  background-position: right .5rem center;
+  background-position: right 0.5rem center;
 }

src/components/input.rs

@@ -16,7 +16,9 @@ pub(crate) fn Input(
     rsx! {
         input {
             class: format!(
-                "pt-3 pb-2.25 {} bg-gray-800-muted enabled:hover:bg-gray-800 enabled:focus:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] rounded-xl outline-0 {} transition-all duration-150 {}",
+                /* `w-full` is required for the Chromium renderer to allow the input to shrink
+                properly. */
+                "pt-3 pb-2.25 w-full {} bg-gray-800-muted enabled:hover:bg-gray-800 enabled:focus:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] rounded-xl outline-0 {} transition-all duration-150 {}",
                 match r#type.as_str() {
                     "date" => "ps-3.25 pe-3",
                     _ => "px-4"

src/components/task_form.rs

@@ -246,7 +246,7 @@ pub(crate) fn TaskForm() -> Element {
                                 r#for: "input_category_calendar_date"
                             },
                             div {
-                                class: "grow flex flex-row gap-3",
+                                class: "grow grid grid-cols-2 gap-3",
                                 Input {
                                     class: "grow",
                                     name: "category_calendar_date",