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 {

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

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;

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;

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 {

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>

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>

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;

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);