Style cleanup, header layout.

src/components/HeaderControls.vue

@@ -3,7 +3,6 @@
   <Transition name="header-controls" appear>
     <div v-if="isVisible" class="header-controls">
       <div class="today-date" @click="goToToday">{{ todayString }}</div>
-      <!-- Reference historyTick to ensure reactivity of canUndo/canRedo -->
       <button
         type="button"
         class="hist-btn"
@@ -42,7 +41,7 @@
     :aria-label="isVisible ? 'Hide controls' : 'Show controls'"
     :title="isVisible ? 'Hide controls' : 'Show controls'"
   >
-    ⋮
+    ⋯
   </button>
 </template>
 
@@ -50,7 +49,6 @@
 import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
 import { useCalendarStore } from '@/stores/CalendarStore'
 import { formatTodayString } from '@/utils/date'
-import { addDays } from 'date-fns'
 
 const calendarStore = useCalendarStore()
 
@@ -93,30 +91,22 @@ onBeforeUnmount(() => {
 <style scoped>
 .header-controls {
   display: flex;
+  justify-content: end;
   align-items: center;
-  margin-left: auto;
-  margin-right: 2.5em;
-  gap: 0.6rem;
-  min-height: 0;
+  margin-right: 1.5rem;
 }
-
-.header-controls {
-  display: flex;
-  gap: 0.6rem;
-  align-items: center;
-}
-
 .toggle-btn {
   position: fixed;
   top: 0;
   right: 0;
-  background: none;
+  background: transparent;
   border: none;
   color: var(--muted);
   padding: 0;
   margin: 0.5em;
   cursor: pointer;
-  font-size: 1.5rem;
+  font-size: 1em;
+  font-weight: 700;
   line-height: 1;
   display: inline-flex;
   align-items: center;
@@ -126,17 +116,13 @@ onBeforeUnmount(() => {
   height: 1em;
   transition: all 0.2s ease;
 }
-
 .toggle-btn:hover {
   color: var(--strong);
-  transform: scale(1.1);
 }
 
 .toggle-btn:active {
   transform: scale(0.9);
 }
-
-/* Transition animations */
 .header-controls-enter-active,
 .header-controls-leave-active {
   transition: all 0.3s ease;
@@ -209,17 +195,8 @@ onBeforeUnmount(() => {
 }
 
 .today-date {
-  cursor: pointer;
-  padding: 0.5rem;
-  background: var(--today-btn-bg);
-  color: var(--today-btn-text);
-  border-radius: 4px;
   white-space: pre-line;
   text-align: center;
-  font-size: 0.9rem;
-}
-
-.today-date:hover {
-  background: var(--today-btn-hover-bg);
+  margin-right: 2rem;
 }
 </style>