added my current attendance state to buttons

ui/src/pages/Calendar.vue

@@ -246,7 +246,7 @@ onMounted(() => {
                 </div>
             </div>
             <aside v-if="panelOpen && activeEvent"
-                class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col"
+                class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
                 :style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
                 <ViewCalendarEvent @close="() => {panelOpen = false; activeEvent = null;}" :event="activeEvent"></ViewCalendarEvent>
             </aside>
@@ -254,6 +254,36 @@ onMounted(() => {
     </div>
 </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>
+
 <style scoped>
 /* ---------- Optional container "card" around the calendar ---------- */
 :global(.fc) {