From ba10fd257379e0cd6406d96d51f8b42d4efe85f9 Mon Sep 17 00:00:00 2001
From: luxick <git@luxick.de>
Date: Fri, 8 May 2026 09:56:30 +0200
Subject: [PATCH] Update dropdown styling

---
 assets/diary/calendar.html |  8 ++++----
 assets/diary/calendar.js   |  2 +-
 assets/style.css           | 18 ++++++++++--------
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/assets/diary/calendar.html b/assets/diary/calendar.html
index d108cd9..e915709 100644
--- a/assets/diary/calendar.html
+++ b/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>
diff --git a/assets/diary/calendar.js b/assets/diary/calendar.js
index 2ef1fee..a08c62c 100644
--- a/assets/diary/calendar.js
+++ b/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() {
diff --git a/assets/style.css b/assets/style.css
index 81cda44..c9ee19e 100644
--- a/assets/style.css
+++ b/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);
 }