From 89a428f8e70ace63551a22ca93b65870bc0a61ee Mon Sep 17 00:00:00 2001
From: Chris Kaczor <chris@kaczorzoo.net>
Date: Mon, 23 Dec 2024 17:43:53 +0000
Subject: [PATCH] Add national days header and fix layout

---
 WebDisplay/src/components/NationalDays.vue | 47 ++++++++++++++--------
 WebDisplay/src/pages/kiosk.vue             |  2 -
 2 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/WebDisplay/src/components/NationalDays.vue b/WebDisplay/src/components/NationalDays.vue
index 95054d0..7f78827 100644
--- a/WebDisplay/src/components/NationalDays.vue
+++ b/WebDisplay/src/components/NationalDays.vue
@@ -31,22 +31,23 @@
 </script>
 
 <template>
-    <span>
-        <div
-            class="national-days"
-            v-if="nationalDaysReady">
-            <ul>
-                <li
-                    class="national-day"
-                    v-for="nationalDay in nationalDays"
-                    @click="onNationalDayClick(nationalDay)">
-                    <span v-html="nationalDay.name"></span>
-                    <v-icon
-                        class="national-day-arrow"
-                        icon="mdi-menu-right" />
-                </li>
-            </ul>
+    <div
+        class="national-days"
+        v-if="nationalDaysReady">
+        <div class="national-days-header">
+            {{ 'National Days (' + nationalDays.length + ')' }}
         </div>
+        <ul class="national-days-list">
+            <li
+                class="national-day"
+                v-for="nationalDay in nationalDays"
+                @click="onNationalDayClick(nationalDay)">
+                <span v-html="nationalDay.name"></span>
+                <v-icon
+                    class="national-day-arrow"
+                    icon="mdi-menu-right" />
+            </li>
+        </ul>
 
         <v-dialog
             v-model="dialog"
@@ -69,7 +70,7 @@
                 </template>
             </v-card>
         </v-dialog>
-    </span>
+    </div>
 </template>
 
 <style>
@@ -77,6 +78,20 @@
         background-color: #121212;
         border-radius: 10px;
         padding: 10px;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+    }
+
+    .national-days-header {
+        font-size: 1.15em;
+        padding-bottom: 4px;
+        text-align: center;
+    }
+
+    .national-days-list {
+        overflow: auto;
+        flex: 1;
     }
 
     .national-day {
diff --git a/WebDisplay/src/pages/kiosk.vue b/WebDisplay/src/pages/kiosk.vue
index a54ab48..83b4064 100644
--- a/WebDisplay/src/pages/kiosk.vue
+++ b/WebDisplay/src/pages/kiosk.vue
@@ -306,12 +306,10 @@
 
     .kiosk-calendar {
         grid-area: kiosk-calendar;
-        overflow: auto;
     }
 
     .kiosk-national-days {
         grid-area: kiosk-national-days;
-        overflow: auto;
         scrollbar-width: thin;
     }