src/assets/layout.css

@@ -25,17 +25,8 @@ body {
     Arial;
   background: var(--bg);
   color: var(--ink);
-  /* Prevent body scrolling / unwanted scrollbars due to mobile browser UI chrome affecting vh */
   overflow: hidden;
 }
-
-/* Ensure root app container doesn't introduce its own scrollbars */
-#app {
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-
 header {
   display: flex;
   align-items: baseline;
@@ -44,12 +35,6 @@ header {
   flex-shrink: 0;
 }
 
-.header-controls {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
 .today-date {
   cursor: pointer;
 }
@@ -59,8 +44,6 @@ header {
 .today-button:hover {
   opacity: 0.8;
 }
-
-/* Header row */
 .calendar-header,
 #calendar-header {
   display: grid;

src/components/CalendarHeader.vue

@@ -119,7 +119,7 @@ const weekdayNames = computed(() => {
 <style scoped>
 .calendar-header {
   display: grid;
-  grid-template-columns: var(--week-w) repeat(7, 1fr) 3rem;
+  grid-template-columns: var(--week-w) repeat(7, 1fr) var(--month-w);
   border-bottom: 2px solid var(--muted);
   align-items: last baseline;
   flex-shrink: 0;
@@ -135,7 +135,8 @@ const weekdayNames = computed(() => {
 .dow {
   text-transform: uppercase;
   text-align: center;
-  font-weight: 500;
+  font-weight: 600;
+  font-size: 1.2em;
 }
 .dow.weekend {
   color: var(--weekend);

src/components/EventDialog.vue

@@ -711,7 +711,7 @@ const recurrenceSummary = computed(() => {
 }
 
 .ec-btn {
-  background: none;
+  background: transparent;
   border: none;
   color: var(--ink);
   padding: 0.5em 0.8em;

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: 1.5rem;
-  margin-right: 2.5em;
-  gap: 0.6rem;
-  min-height: 0;
 }
-
-.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;
+  margin-right: 2rem;
-}
-
-.today-date:hover {
-  background: var(--today-btn-hover-bg);
 }
 </style>