Add national days header and fix layout

WebDisplay/src/components/NationalDays.vue

@@ -31,11 +31,13 @@
 </script>
 
 <template>
-    <span>
     <div
         class="national-days"
         v-if="nationalDaysReady">
-            <ul>
+        <div class="national-days-header">
+            {{ 'National Days (' + nationalDays.length + ')' }}
+        </div>
+        <ul class="national-days-list">
             <li
                 class="national-day"
                 v-for="nationalDay in nationalDays"
@@ -46,7 +48,6 @@
                     icon="mdi-menu-right" />
             </li>
         </ul>
-        </div>
 
         <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 {

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;
     }