tweaked dialog scrollbar

ui/src/components/calendar/CreateCalendarEvent.vue

@@ -91,8 +91,8 @@ function makeInitialValues() {
 
     let start: Date;
     if (clickedDate.value) {
-        const local = new Date(clickedDate.value + "T00:00:00");
-        start = roundToNextHour(local);
+        const local = new Date(clickedDate.value + "T20:00:00");
+        start = local;
     } else {
         start = roundToNextHour();
     }
@@ -312,7 +312,7 @@ function getColorName(hex: string) {
                         <FormItem>
                             <FormLabel>Description</FormLabel>
                             <FormControl>
-                                <Textarea class="resize-none h-32" v-bind="componentField" />
+                                <Textarea class="resize-none h-32 scrollbar-themed" v-bind="componentField" />
                             </FormControl>
                             <div class="h-3">
                                 <FormMessage/>
@@ -333,3 +333,33 @@ function getColorName(hex: string) {
         </Dialog>
     </Form>
 </template>
+
+<style scoped>
+/* Firefox */
+.scrollbar-themed {
+    scrollbar-width: thin;
+    scrollbar-color: #555 #1f1f1f;
+    padding-right: 6px;
+}
+
+/* Chrome, Edge, Safari */
+.scrollbar-themed::-webkit-scrollbar {
+    width: 10px;
+    /* slightly wider to allow padding look */
+}
+
+.scrollbar-themed::-webkit-scrollbar-track {
+    background: #1f1f1f;
+    margin-left: 6px;
+    /* ❗ adds space between content + scrollbar */
+}
+
+.scrollbar-themed::-webkit-scrollbar-thumb {
+    background: #555;
+    border-radius: 9999px;
+}
+
+.scrollbar-themed::-webkit-scrollbar-thumb:hover {
+    background: #777;
+}
+</style>