From 3e8cdf1b754aaf5781ed428beeaaf31cd0548b4d Mon Sep 17 00:00:00 2001
From: Leo Vasanko <leo@git>
Date: Tue, 26 Aug 2025 10:20:26 -0600
Subject: [PATCH] CSS rewritten to replace left/right with start/end.

---
 src/assets/layout.css             | 2 +-
 src/components/BaseDialog.vue     | 4 ++--
 src/components/CalendarDay.vue    | 2 +-
 src/components/CalendarView.vue   | 2 +-
 src/components/EventDialog.vue    | 2 +-
 src/components/EventOverlay.vue   | 4 ++--
 src/components/HeaderControls.vue | 2 +-
 src/components/Jogwheel.vue       | 2 +-
 src/components/SettingsDialog.vue | 8 ++++----
 9 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/assets/layout.css b/src/assets/layout.css
index b12480f..3635ade 100644
--- a/src/assets/layout.css
+++ b/src/assets/layout.css
@@ -131,7 +131,7 @@ header {
   overflow: visible;
   position: absolute;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   width: 100%;
 }
 .month-name-label > span {
diff --git a/src/components/BaseDialog.vue b/src/components/BaseDialog.vue
index de83896..6ce0d8d 100644
--- a/src/components/BaseDialog.vue
+++ b/src/components/BaseDialog.vue
@@ -79,10 +79,10 @@ const modalStyle = computed(() => {
   if (modalRef.value && props.modelValue) {
     const style = {
       transform: 'none',
-      left: modalPosition.value.x + 'px',
+      insetInlineStart: modalPosition.value.x + 'px',
       top: modalPosition.value.y + 'px',
       bottom: 'auto',
-      right: 'auto',
+      insetInlineEnd: 'auto',
     }
     if (hasMoved.value) {
       style.width = dialogWidth.value ? dialogWidth.value + 'px' : undefined
diff --git a/src/components/CalendarDay.vue b/src/components/CalendarDay.vue
index 0b93324..2cb3773 100644
--- a/src/components/CalendarDay.vue
+++ b/src/components/CalendarDay.vue
@@ -32,7 +32,7 @@ const props = defineProps({
 <style scoped>
 .cell {
   position: relative;
-  border-right: 1px solid var(--border-color);
+  border-inline-end: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
   user-select: none;
   display: grid;
diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue
index aa57e68..5a5f7c1 100644
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@@ -560,7 +560,7 @@ header h1 {
 
 .month-label {
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   width: 100%;
   background-image: linear-gradient(to bottom, rgba(186, 186, 186, 0.3), rgba(186, 186, 186, 0.2));
   font-size: 2em;
diff --git a/src/components/EventDialog.vue b/src/components/EventDialog.vue
index 1f2e569..a4c503d 100644
--- a/src/components/EventDialog.vue
+++ b/src/components/EventDialog.vue
@@ -943,7 +943,7 @@ const recurrenceSummary = computed(() => {
   border-radius: 0.4rem;
   cursor: pointer;
   font-size: 0.9rem;
-  text-align: left;
+  text-align: start;
   transition: background-color 0.15s ease;
 }
 .ec-recurrence-toggle:hover {
diff --git a/src/components/EventOverlay.vue b/src/components/EventOverlay.vue
index 2383f7e..c6413ae 100644
--- a/src/components/EventOverlay.vue
+++ b/src/components/EventOverlay.vue
@@ -464,10 +464,10 @@ function applyRangeDuringDrag(st, startDate, endDate) {
 }
 
 .event-span .resize-handle.left {
-  left: 0;
+  inset-inline-start: 0;
 }
 
 .event-span .resize-handle.right {
-  right: 0;
+  inset-inline-end: 0;
 }
 </style>
diff --git a/src/components/HeaderControls.vue b/src/components/HeaderControls.vue
index e1ca08a..e381536 100644
--- a/src/components/HeaderControls.vue
+++ b/src/components/HeaderControls.vue
@@ -204,6 +204,6 @@ onBeforeUnmount(() => {
 .today-date {
   white-space: pre-line;
   text-align: center;
-  margin-right: 2rem;
+  margin-inline-end: 2rem;
 }
 </style>
diff --git a/src/components/Jogwheel.vue b/src/components/Jogwheel.vue
index 3ef0cc8..5dceeb6 100644
--- a/src/components/Jogwheel.vue
+++ b/src/components/Jogwheel.vue
@@ -181,7 +181,7 @@ defineExpose({
 .jogwheel-viewport {
   position: absolute;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   bottom: 0;
   width: var(--month-w);
   overflow-y: auto;
diff --git a/src/components/SettingsDialog.vue b/src/components/SettingsDialog.vue
index 78c6cb2..ff28ad2 100644
--- a/src/components/SettingsDialog.vue
+++ b/src/components/SettingsDialog.vue
@@ -159,7 +159,7 @@ defineExpose({ open })
     v-model="show"
     title="Settings"
     class="settings-modal"
-    :style="{ top: '4.5rem', right: '2rem', bottom: 'auto', left: 'auto', transform: 'none' }"
+  :style="{ top: '4.5rem', insetInlineEnd: '2rem', bottom: 'auto', insetInlineStart: 'auto', transform: 'none' }"
   >
     <div class="setting-group">
       <label class="ec-field">
@@ -242,9 +242,9 @@ defineExpose({ open })
 .holiday-settings {
   display: grid;
   gap: 0.75rem;
-  margin-left: 1rem;
-  padding-left: 1rem;
-  border-left: 2px solid var(--border-color);
+  margin-inline-start: 1rem;
+  padding-inline-start: 1rem;
+  border-inline-start: 2px solid var(--border-color);
 }
 select {
   border: 1px solid var(--muted);