feat: UI overhaul

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",