Update dropdown styling

assets/diary/calendar.html

@@ -4,15 +4,15 @@
     <a href="{{.MonthURL}}" class="diary-cal-heading">{{.MonthName}}</a>
     <div class="dropdown diary-cal-drop">
       <button type="button" class="btn btn-small" data-action="cal-month-drop" aria-expanded="false" title="Monat wählen">▾</button>
-      <div class="dropdown-menu">
-        {{range .AllMonths}}<a class="dropdown-item{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Name}}</a>{{end}}
+      <div class="dropdown-menu scrollable">
+        {{range .AllMonths}}<a class="btn dropdown-item{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Name}}</a>{{end}}
       </div>
     </div>
     <a href="{{.YearURL}}" class="diary-cal-heading">{{.DisplayYear}}</a>
     <div class="dropdown diary-cal-drop">
       <button type="button" class="btn btn-small" data-action="cal-year-drop" aria-expanded="false" title="Jahr wählen">▾</button>
-      <div class="dropdown-menu align-right">
-        {{range .Years}}<a class="dropdown-item{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Num}}</a>{{end}}
+      <div class="dropdown-menu align-right scrollable">
+        {{range .Years}}<a class="btn dropdown-item{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Num}}</a>{{end}}
       </div>
     </div>
   </div>

assets/diary/calendar.js

@@ -18,7 +18,7 @@
     main.parentNode.insertBefore(cal, main);
   }
 
-  cal.querySelectorAll(".diary-cal-drop > button").forEach(wireDropdown);
+  cal.querySelectorAll(".dropdown > button").forEach(wireDropdown);
 
   var pageHeader = document.querySelector("header");
   function updateTop() {

assets/style.css

@@ -335,6 +335,11 @@ main > h2 {
     display: block;
 }
 
+.dropdown-menu.scrollable {
+    max-height: 14rem;
+    overflow-y: auto;
+}
+
 /* === Floating action button === */
 .fab {
     position: fixed;
@@ -364,13 +369,15 @@ main > h2 {
 }
 
 .dropdown-item {
-    display: block;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
     width: 100%;
-    text-align: left;
     border: none;
     border-radius: 0;
     padding: 0.3rem 0.75rem;
     white-space: nowrap;
+    box-sizing: border-box;
 }
 
 /* === Edit form === */
@@ -795,12 +802,7 @@ hr {
     color: var(--primary-hover);
 }
 
-.diary-cal-drop .dropdown-menu {
-    max-height: 14rem;
-    overflow-y: auto;
-}
-
-.diary-cal-drop .dropdown-item.cal-current {
+.dropdown-item.cal-current {
     color: var(--primary-hover);
 }