feat: version update and fix some ui' s

app/app.vue

@@ -12,7 +12,7 @@ const emptyHabits = computed(() => habits.value?.length === 0);
 useHead({
   htmlAttrs: { lang: 'en' },
   link: [
-    { rel: 'icon', href: '/icon.png' },    
+    { rel: 'icon', href: '/icon.png' },
     { rel: 'apple-touch-icon', href: '/icon.png' },
     { rel: 'msapplication-TileImage', href: '/icon.png' },
   ],
@@ -94,4 +94,9 @@ useSeoMeta({
     @apply scale-95;
   }
 }
+
+/* ===== Scrollbar CSS ===== */
+* {
+  scrollbar-color: #555 rgba(0, 0, 0, 0);
+}
 </style>

app/components/HabitCard.vue

@@ -89,9 +89,9 @@ const { mutate: toggleTodayCompletion } = useMutation({
 </script>
 
 <template>
-  <ContentBox class="mx-4 mb-4 active:scale-[.975] flex cursor-pointer gap-3 bg-neutral-400/5 p-3 transition hover:bg-white/5" @click="openHabitModal = true">
+  <ContentBox class="mx-4 mb-4 flex cursor-pointer gap-3 bg-neutral-400/5 p-3 transition hover:bg-white/5 active:scale-[.975]" @click="openHabitModal = true">
     <div class="flex flex-1 flex-col justify-center gap-1">
-      <div class="text-md font-medium text-white">{{ habit.title }}</div>
+      <div class="text-md line-clamp-1 font-medium text-white">{{ habit.title }}</div>
       <div class="line-clamp-3 text-xs text-white/70" v-html="renderMarkdown(habit.description || '')"></div>
     </div>
     <HabitHeatmap :habit="habit" :habitDays="49" />
@@ -129,7 +129,7 @@ const { mutate: toggleTodayCompletion } = useMutation({
       <div class="flex flex-col gap-4 px-3 text-white">
         <div class="flex items-center justify-between gap-3">
           <UInput v-if="editingHabit === habit.id" :ui="{ wrapper: 'flex-1', rounded: 'rounded-full', size: { sm: 'text-sm font-semibold' } }" v-model="edit.title" />
-          <div v-else class="text-xl font-semibold">{{ habit.title }}</div>
+          <div v-else class="line-clamp-1 text-xl font-semibold">{{ habit.title }}</div>
           <div class="flex items-center gap-3">
             <button
               @click="toggleTodayCompletion(habit)"
@@ -163,8 +163,10 @@ const { mutate: toggleTodayCompletion } = useMutation({
         </div>
         <ContentBox class="flex flex-col gap-2 bg-white/10 p-4 backdrop-blur-2xl dark:bg-neutral-200/5">
           <div class="text-xs font-medium text-white/50">{{ format(habit.createdAt, 'MMM d, yyyy') }}</div>
-          <UTextarea v-if="editingHabit === habit.id" v-model="edit.description" autoresize />
-          <div v-else class="prose prose-sm prose-invert" v-html="renderMarkdown(habit.description || '')"></div>
+          <div class="max-h-[calc(100vh-19rem)] overflow-y-auto">
+            <UTextarea v-if="editingHabit === habit.id" v-model="edit.description" autoresize />
+            <div v-else class="prose prose-sm prose-invert" v-html="renderMarkdown(habit.description || '')"></div>
+          </div>
         </ContentBox>
         <div v-if="editingHabit === habit.id" class="flex items-center justify-between">
           <div></div>

app/components/HabitForm.vue

@@ -53,7 +53,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
       </UFormGroup>
       <UFormGroup name="description">
         <div class="input-container">
-          <textarea rows="5" v-model="formState.description" placeholder="Description (Markdown supported)..."></textarea>
+          <textarea class="scroll-bar" rows="5" v-model="formState.description" placeholder="Description (Markdown supported)..."></textarea>
         </div>
       </UFormGroup>
       <button type="submit" class="button bg-green-400 px-2.5 py-3 font-semibold text-green-950 outline-none hover:bg-green-300">Add Habit</button>
@@ -77,33 +77,4 @@ textarea {
     @apply bg-white/15;
   }
 }
-
-textarea {
-  resize: none;
-  --sb-track-color: rgba(0, 0, 0, 0);
-  --sb-thumb-color: #666;
-  --sb-size: 12px;
-}
-
-textarea::-webkit-scrollbar {
-  width: var(--sb-size);
-}
-
-textarea::-webkit-scrollbar-track {
-  background: var(--sb-track-color);
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-textarea::-webkit-scrollbar-thumb {
-  background: var(--sb-thumb-color);
-  border-radius: 12px;
-  border: 4px solid #242724;
-}
-
-textarea {
-  &:focus::-webkit-scrollbar-thumb {
-    border: 4px solid #333633;
-  }
-}
 </style>

package.json

@@ -44,11 +44,11 @@
     "@pinia/nuxt": "^0.9.0",
     "canvas-confetti": "^1.9.3",
     "date-fns": "^4.1.0",
-    "drizzle-kit": "^0.30.3",
+    "drizzle-kit": "^0.30.4",
     "drizzle-orm": "^0.38.4",
     "h3-zod": "^0.5.3",
     "marked": "^15.0.6",
-    "nuxt": "^3.15.3",
+    "nuxt": "^3.15.4",
     "nuxt-auth-utils": "0.5.7",
     "pinia": "^2.3.1",
     "vue": "latest",
@@ -62,6 +62,6 @@
     "@types/canvas-confetti": "^1.9.0",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "wrangler": "^3.105.1"
+    "wrangler": "^3.106.0"
   }
 }