diff --git a/frontend/src/components/base/Expandable.vue b/frontend/src/components/base/Expandable.vue
index e8426ab35..0cae6e499 100644
--- a/frontend/src/components/base/Expandable.vue
+++ b/frontend/src/components/base/Expandable.vue
@@ -170,7 +170,7 @@ $ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
     position: absolute;
     height: 40px;
     width: 100%;
-    bottom: 0;
+    inset-block-end: 0;
   }
 }
 
diff --git a/frontend/src/components/home/AddToHomeScreen.vue b/frontend/src/components/home/AddToHomeScreen.vue
index 2a5239c45..c73cb6b3a 100644
--- a/frontend/src/components/home/AddToHomeScreen.vue
+++ b/frontend/src/components/home/AddToHomeScreen.vue
@@ -51,7 +51,7 @@ const shouldShowMessage = computed(() => {
 	// at least define it centrally
 	// the highest z-index of a modal is .hint-modal with 4500
 	z-index: 5000;
-	bottom: 1rem;
+	inset-block-end: 1rem;
 	inset-inline: 1rem;
 	max-width: max-content;
 	margin-inline: auto;
@@ -75,7 +75,7 @@ const shouldShowMessage = computed(() => {
 	}
 	
 	&.has-update-available {
-		bottom: 5rem;
+		inset-block-end: 5rem;
 	}
 }
 
diff --git a/frontend/src/components/home/ContentAuth.vue b/frontend/src/components/home/ContentAuth.vue
index 0840d1bcf..f2fb2fca5 100644
--- a/frontend/src/components/home/ContentAuth.vue
+++ b/frontend/src/components/home/ContentAuth.vue
@@ -207,7 +207,7 @@ projectStore.loadAllProjects()
 	display: none;
 	position: fixed;
 	inset-block-start: 0;
-	bottom: 0;
+	inset-block-end: 0;
 	inset-inline-start: 0;
 	inset-inline-end: 0;
 	height: 100vh;
@@ -225,7 +225,7 @@ projectStore.loadAllProjects()
 
 .keyboard-shortcuts-button {
 	position: fixed;
-	bottom: calc(1rem - 4px);
+	inset-block-end: calc(1rem - 4px);
 	inset-inline-end: 1rem;
 	z-index: 4500; // The modal has a z-index of 4000
 	
diff --git a/frontend/src/components/home/DemoMode.vue b/frontend/src/components/home/DemoMode.vue
index b20c2a581..b8ab9139e 100644
--- a/frontend/src/components/home/DemoMode.vue
+++ b/frontend/src/components/home/DemoMode.vue
@@ -29,7 +29,7 @@ const enabled = computed(() => configStore.demoModeEnabled && !hide.value)
 <style scoped lang="scss">
 .demo-mode-banner {
 	position: fixed;
-	bottom: 0;
+	inset-block-end: 0;
 	inset-inline: 0;
 	background: var(--danger);
 	z-index: 100;
diff --git a/frontend/src/components/home/MenuButton.vue b/frontend/src/components/home/MenuButton.vue
index cd70af382..069c423c7 100644
--- a/frontend/src/components/home/MenuButton.vue
+++ b/frontend/src/components/home/MenuButton.vue
@@ -51,7 +51,7 @@ $size: $lineWidth + 1rem;
 	}
 
 	&::after {
-		bottom: 50%;
+		inset-block-end: 50%;
 		transform: $transformX translateY(0.4rem)
 	}
 
diff --git a/frontend/src/components/home/Navigation.vue b/frontend/src/components/home/Navigation.vue
index 264a32f93..9fdd14cf6 100644
--- a/frontend/src/components/home/Navigation.vue
+++ b/frontend/src/components/home/Navigation.vue
@@ -157,7 +157,7 @@ const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
 	transition: transform $transition-duration ease-in;
 	position: fixed;
 	inset-block-start: $navbar-height;
-	bottom: 0;
+	inset-block-end: 0;
 	inset-inline-start: 0;
 	transform: translateX(-100%);
 	width: $navbar-width;
diff --git a/frontend/src/components/home/UpdateNotification.vue b/frontend/src/components/home/UpdateNotification.vue
index 20cab1fc8..f519ff995 100644
--- a/frontend/src/components/home/UpdateNotification.vue
+++ b/frontend/src/components/home/UpdateNotification.vue
@@ -59,7 +59,7 @@ function refreshApp() {
 	// at least define it centrally
 	// the highest z-index of a modal is .hint-modal with 4500
 	z-index: 5000;
-	bottom: 1rem;
+	inset-block-end: 1rem;
 	inset-inline: 1rem;
 	max-width: max-content;
 	margin-inline: auto;
diff --git a/frontend/src/components/input/editor/EditorToolbar.vue b/frontend/src/components/input/editor/EditorToolbar.vue
index 6f0c0cfc8..0bf43267a 100644
--- a/frontend/src/components/input/editor/EditorToolbar.vue
+++ b/frontend/src/components/input/editor/EditorToolbar.vue
@@ -424,7 +424,7 @@ function setLink(event) {
 		.icon__lower-text {
 			font-size: .75rem;
 			position: absolute;
-			bottom: -3px;
+			inset-block-end: -3px;
 			inset-inline-end: -2px;
 			font-weight: bold;
 		}
diff --git a/frontend/src/components/input/editor/TipTap.vue b/frontend/src/components/input/editor/TipTap.vue
index 2ebec692f..6505f0985 100644
--- a/frontend/src/components/input/editor/TipTap.vue
+++ b/frontend/src/components/input/editor/TipTap.vue
@@ -930,7 +930,7 @@ watch(
 			inset-inline-start: 0;
 			inset-inline-end: 0;
 			inset-block-start: 0;
-			bottom: 0;
+			inset-block-end: 0;
 			background: rgba(200, 200, 255, 0.4);
 			pointer-events: none;
 		}
@@ -939,7 +939,7 @@ watch(
 			position: absolute;
 			inset-inline-end: -2px;
 			inset-block-start: 0;
-			bottom: -2px;
+			inset-block-end: -2px;
 			width: 4px;
 			background-color: #adf;
 			pointer-events: none;
diff --git a/frontend/src/components/misc/NoAuthWrapper.vue b/frontend/src/components/misc/NoAuthWrapper.vue
index aa5bf2ba7..3da97e93b 100644
--- a/frontend/src/components/misc/NoAuthWrapper.vue
+++ b/frontend/src/components/misc/NoAuthWrapper.vue
@@ -120,7 +120,7 @@ useTitle(() => title.value)
 			inset-block-start: 0;
 			inset-inline-start: 0;
 			inset-inline-end: 0;
-			bottom: 0;
+			inset-block-end: 0;
 			background-color: rgba(0, 0, 0, .2);
 		}
 
diff --git a/frontend/src/components/misc/Ready.vue b/frontend/src/components/misc/Ready.vue
index d769ed05d..252ce5ff7 100644
--- a/frontend/src/components/misc/Ready.vue
+++ b/frontend/src/components/misc/Ready.vue
@@ -83,7 +83,7 @@ const baseStore = useBaseStore()
 	position: fixed;
 	inset-block-start: 0;
 	inset-inline-start: 0;
-	bottom: 0;
+	inset-block-end: 0;
 	inset-inline-end: 0;
 	background: var(--grey-100);
 	z-index: 99;
@@ -114,7 +114,7 @@ const baseStore = useBaseStore()
 	text-align: center;
 	position: absolute;
 	width: 100vw;
-	bottom: 5vh;
+	inset-block-end: 5vh;
 	color: $white;
 	padding: 0 1rem;
 }
diff --git a/frontend/src/components/project/partials/ProjectCard.vue b/frontend/src/components/project/partials/ProjectCard.vue
index 73148cefa..b5951879a 100644
--- a/frontend/src/components/project/partials/ProjectCard.vue
+++ b/frontend/src/components/project/partials/ProjectCard.vue
@@ -117,7 +117,7 @@ const textOnlyDescription = computed(() => {
 	position: absolute;
 	inset-block-start: 0;
 	inset-inline-end: 0;
-	bottom: 0;
+	inset-block-end: 0;
 	inset-inline-start: 0;
 }
 
diff --git a/frontend/src/components/project/views/ProjectKanban.vue b/frontend/src/components/project/views/ProjectKanban.vue
index efb7cd360..191a39564 100644
--- a/frontend/src/components/project/views/ProjectKanban.vue
+++ b/frontend/src/components/project/views/ProjectKanban.vue
@@ -842,7 +842,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			display: block;
 			inset-block-start: 0.25rem;
 			inset-inline-end: 0.5rem;
-			bottom: 0.25rem;
+			inset-block-end: 0.25rem;
 			inset-inline-start: 0.5rem;
 			border: 3px dashed var(--grey-300);
 			border-radius: $radius;
@@ -953,7 +953,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 
 	.bucket-footer {
 		position: sticky;
-		bottom: 0;
+		inset-block-end: 0;
 		height: min-content;
 		padding: .5rem;
 		background-color: var(--grey-100);
diff --git a/frontend/src/components/tasks/partials/Attachments.vue b/frontend/src/components/tasks/partials/Attachments.vue
index b1f53fa86..28dc2679c 100644
--- a/frontend/src/components/tasks/partials/Attachments.vue
+++ b/frontend/src/components/tasks/partials/Attachments.vue
@@ -354,7 +354,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 	background: hsla(var(--grey-100-hsl), 0.8);
 	inset-block-start: 0;
 	inset-inline-start: 0;
-	bottom: 0;
+	inset-block-end: 0;
 	right: 0;
 	z-index: 4001; // modal z-index is 4000
 	text-align: center;
@@ -366,7 +366,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 
 .drop-hint {
 	position: absolute;
-	bottom: 0;
+	inset-block-end: 0;
 	inset-inline-start: 0;
 	inset-inline-end: 0;