feat: improve mobile experience

src/index.css

@@ -3,6 +3,7 @@
 @tailwind utilities;
 @layer base {
   * {
+    @apply border-border;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
@@ -18,13 +19,28 @@
   }
 
   body {
+    @apply bg-background text-foreground;
     font-family: 'Inter', sans-serif;
-    overflow: hidden;
     -webkit-overflow-scrolling: touch;
     text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
   }
 
+  .clickable {
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:active {
+      background-color: hsl(var(--muted) / 0.5);
+    }
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .clickable:hover {
+      background-color: hsl(var(--muted) / 0.5);
+    }
+  }
+
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
@@ -81,11 +97,3 @@
     --highlight: 259 43% 56%;
   }
 }
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}