fix: Frontend reactivity and style updates

frontend/input.css

@@ -1,5 +1,21 @@
 @import "tailwindcss";
 
+@layer base {
+
+    html,
+    body,
+    button,
+    a,
+    [role="button"],
+    input,
+    label,
+    select,
+    summary,
+    textarea {
+        touch-action: manipulation;
+    }
+}
+
 @theme {
     --color-gray-900: #111827;
     --color-gray-800: #1f2937;

frontend/public/tailwind.css

@@ -1308,6 +1308,11 @@
     }
   }
 }
+@layer base {
+  html, body, button, a, [role="button"], input, label, select, summary, textarea {
+    touch-action: manipulation;
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

frontend/src/app.rs

@@ -327,9 +327,11 @@ pub fn App() -> impl IntoView {
                     // MOBILE SIDEBAR
                     <div 
                         class={move || if show_mobile_sidebar.get() { "fixed inset-0 z-50 flex md:hidden" } else { "hidden" }}
-                        on:click=move |_| set_show_mobile_sidebar.set(false)
                     >
-                        <div class="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity"></div>
+                        <div 
+                            class="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity"
+                            on:click=move |_| set_show_mobile_sidebar.set(false)
+                        ></div>
                         <aside 
                             class={format!("relative w-80 max-w-[85vw] h-full shadow-2xl p-6 flex flex-col animate-in slide-in-from-left duration-300 border-r {}", sidebar_bg)}
                             on:click=move |e: web_sys::MouseEvent| e.stop_propagation()