diff --git a/src/assets/layout.css b/src/assets/layout.css
index 5236ae0..7e15b52 100644
--- a/src/assets/layout.css
+++ b/src/assets/layout.css
@@ -2,10 +2,10 @@
:root {
/* Layout */
--row-h: 2.2em;
- --label-w: minmax(4em, 8%);
- --cell-w: 1fr;
- --cell-h: 12vh;
- --overlay-w: minmax(3rem, 5%);
+ --week-w: 3em;
+ --day-w: 1fr;
+ --row-h: 12vh;
+ --month-w: 4em;
}
/* Layout & typography */
@@ -69,7 +69,7 @@ header {
.calendar-header,
#calendar-header {
display: grid;
- grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
+ grid-template-columns: var(--week-w) repeat(7, var(--day-w)) var(--month-w);
border-bottom: 0.2em solid var(--muted);
align-items: last baseline;
flex-shrink: 0;
@@ -107,7 +107,7 @@ header {
top: 0;
right: 0;
bottom: 0;
- width: var(--overlay-w);
+ width: var(--month-w);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
@@ -132,10 +132,10 @@ header {
/* Week row: label + 7-day grid + jogwheel column */
.week-row {
display: grid;
- grid-template-columns: var(--label-w) repeat(7, var(--cell-w)) var(--overlay-w);
+ grid-template-columns: var(--week-w) repeat(7, var(--day-w)) var(--month-w);
position: relative;
overflow: visible;
- height: var(--cell-h);
+ height: var(--row-h);
scroll-snap-align: start;
width: 100%;
}
@@ -152,7 +152,7 @@ header {
}
.week-label {
- height: var(--cell-h);
+ height: var(--row-h);
}
/* 7-day grid inside each week row */
.week-row > .days-grid {
diff --git a/src/components/CalendarDay.vue b/src/components/CalendarDay.vue
index 27d29fd..70fb940 100644
--- a/src/components/CalendarDay.vue
+++ b/src/components/CalendarDay.vue
@@ -46,7 +46,7 @@ const props = defineProps({
padding: 0.25em;
overflow: hidden;
width: 100%;
- height: var(--cell-h);
+ height: var(--row-h);
font-weight: 700;
transition: background-color 0.15s ease;
}
diff --git a/src/components/CalendarHeader.vue b/src/components/CalendarHeader.vue
index c414699..0b52a16 100644
--- a/src/components/CalendarHeader.vue
+++ b/src/components/CalendarHeader.vue
@@ -119,7 +119,7 @@ const weekdayNames = computed(() => {
diff --git a/src/components/CalendarWeek.vue b/src/components/CalendarWeek.vue
index fd0cbe6..b482276 100644
--- a/src/components/CalendarWeek.vue
+++ b/src/components/CalendarWeek.vue
@@ -57,9 +57,9 @@ const handleEventClick = (payload) => {
diff --git a/src/components/EventDialog.vue b/src/components/EventDialog.vue
index d0539e4..55a579a 100644
--- a/src/components/EventDialog.vue
+++ b/src/components/EventDialog.vue
@@ -696,7 +696,7 @@ const recurrenceSummary = computed(() => {
outline-offset: 0.125em;
cursor: pointer;
appearance: none;
- width: 3em;
+ width: 80%;
height: 1em;
}
@@ -711,8 +711,8 @@ const recurrenceSummary = computed(() => {
}
.ec-btn {
- border: 0.0625em solid var(--muted);
- background: transparent;
+ background: none;
+ border: none;
color: var(--ink);
padding: 0.5em 0.8em;
border-radius: 0.4em;
@@ -883,63 +883,6 @@ const recurrenceSummary = computed(() => {
0 0 0 1px var(--input-focus),
0 0 0 4px rgba(37, 99, 235, 0.15);
}
-.mini-stepper {
- display: inline-flex;
- align-items: center;
- background: var(--panel-alt);
- border: 1px solid var(--input-border);
- border-radius: 0.5rem;
- overflow: hidden;
- font-size: 0.7rem;
- height: 1.9rem;
-}
-.mini-stepper .step {
- background: transparent;
- border: none;
- color: var(--ink);
- padding: 0 0.55rem;
- cursor: pointer;
- font-size: 0.9rem;
- line-height: 1;
- font-weight: 600;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100%;
- transition:
- background-color 0.15s ease,
- color 0.15s ease;
-}
-.mini-stepper .step:hover:not(:disabled) {
- background: var(--pill-hover-bg);
-}
-.mini-stepper .step:disabled {
- opacity: 0.35;
- cursor: default;
-}
-.mini-stepper .value {
- min-width: 1.6rem;
- text-align: center;
- font-variant-numeric: tabular-nums;
- font-weight: 600;
- letter-spacing: 0.02em;
-}
-.mini-stepper:focus-within {
- border-color: var(--input-focus);
- box-shadow:
- 0 0 0 1px var(--input-focus),
- 0 0 0 4px rgba(37, 99, 235, 0.15);
-}
-.mini-stepper.occ .value {
- min-width: 2rem;
-}
-.occ-stepper.mini-stepper.occ .value {
- min-width: 2rem;
-}
-.mini-stepper .step:focus-visible {
- outline: 2px solid var(--input-focus);
- outline-offset: -2px;
-}
.hint {
font-size: 0.65rem;
opacity: 0.65;
diff --git a/src/components/Numeric.vue b/src/components/Numeric.vue
index 3837c9e..723476c 100644
--- a/src/components/Numeric.vue
+++ b/src/components/Numeric.vue
@@ -289,17 +289,12 @@ function onWheel(e) {
display: inline-flex;
align-items: center;
justify-content: center;
- padding: 0 0.4rem;
gap: 0.25rem;
- border: 1px solid transparent;
- background: transparent;
- border-radius: 0.4rem;
- min-height: 1.8rem;
+ background: none;
font-variant-numeric: tabular-nums;
touch-action: none;
}
.mini-stepper.drag-mode:focus-visible {
- border-color: var(--input-border, var(--muted));
box-shadow: 0 0 0 2px var(--input-focus, #2563eb);
outline: none;
}