diff --git a/frontend/src/components/base/Expandable.vue b/frontend/src/components/base/Expandable.vue
index 0cae6e499..dd1e2a77c 100644
--- a/frontend/src/components/base/Expandable.vue
+++ b/frontend/src/components/base/Expandable.vue
@@ -168,14 +168,14 @@ $ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
       v-bind(computedBackgroundColor)
     );
     position: absolute;
-    height: 40px;
-    width: 100%;
+    block-size: 40px;
+    inline-size: 100%;
     inset-block-end: 0;
   }
 }
 
 .expandable-initial-height--expanded {
-  height: 100% !important;
+  block-size: 100% !important;
 
   &::after {
     display: none;
diff --git a/frontend/src/components/date/DatepickerWithRange.vue b/frontend/src/components/date/DatepickerWithRange.vue
index 461997362..05a7878ee 100644
--- a/frontend/src/components/date/DatepickerWithRange.vue
+++ b/frontend/src/components/date/DatepickerWithRange.vue
@@ -234,15 +234,15 @@ const buttonText = computed<string>(() => {
 	box-shadow: $shadow;
 
 	&.is-open {
-		width: 500px;
-		height: 320px;
+		inline-size: 500px;
+		block-size: 320px;
 	}
 }
 
 .datepicker-with-range {
 	display: flex;
-	width: 100%;
-	height: 100%;
+	inline-size: 100%;
+	block-size: 100%;
 	position: absolute;
 }
 
@@ -252,21 +252,21 @@ const buttonText = computed<string>(() => {
 }
 
 .flatpickr-container {
-	width: 70%;
+	inline-size: 70%;
 	border-inline-start: 1px solid var(--grey-200);
 	padding: 1rem;
 	font-size: .9rem;
 
 	// Flatpickr has no option to use it without an input field so we're hiding it instead
 	:deep(input.form-control.input) {
-		height: 0;
+		block-size: 0;
 		padding: 0;
 		border: 0;
 	}
 
 	.field .control :deep(.button) {
 		border: 1px solid var(--input-border-color);
-		height: 2.25rem;
+		block-size: 2.25rem;
 
 		&:hover {
 			border: 1px solid var(--input-hover-border-color);
@@ -279,7 +279,7 @@ const buttonText = computed<string>(() => {
 }
 
 .selections {
-	width: 30%;
+	inline-size: 30%;
 	display: flex;
 	flex-direction: column;
 	padding-block-start: .5rem;
@@ -287,7 +287,7 @@ const buttonText = computed<string>(() => {
 
 	button {
 		display: block;
-		width: 100%;
+		inline-size: 100%;
 		text-align: start;
 		padding: .5rem 1rem;
 		transition: $transition;
diff --git a/frontend/src/components/date/DatepickerWithValues.vue b/frontend/src/components/date/DatepickerWithValues.vue
index fe2cb732e..62b030de2 100644
--- a/frontend/src/components/date/DatepickerWithValues.vue
+++ b/frontend/src/components/date/DatepickerWithValues.vue
@@ -180,15 +180,15 @@ const customRangeActive = computed<boolean>(() => {
 	box-shadow: $shadow;
 
 	&.is-open {
-		width: 500px;
-		height: 320px;
+		inline-size: 500px;
+		block-size: 320px;
 	}
 }
 
 .datepicker-with-range {
 	display: flex;
-	width: 100%;
-	height: 100%;
+	inline-size: 100%;
+	block-size: 100%;
 	position: absolute;
 }
 
@@ -198,21 +198,21 @@ const customRangeActive = computed<boolean>(() => {
 }
 
 .flatpickr-container {
-	width: 70%;
+	inline-size: 70%;
 	border-inline-start: 1px solid var(--grey-200);
 	padding: 1rem;
 	font-size: .9rem;
 
 	// Flatpickr has no option to use it without an input field so we're hiding it instead
 	:deep(input.form-control.input) {
-		height: 0;
+		block-size: 0;
 		padding: 0;
 		border: 0;
 	}
 
 	.field .control :deep(.button) {
 		border: 1px solid var(--input-border-color);
-		height: 2.25rem;
+		block-size: 2.25rem;
 
 		&:hover {
 			border: 1px solid var(--input-hover-border-color);
@@ -225,7 +225,7 @@ const customRangeActive = computed<boolean>(() => {
 }
 
 .selections {
-	width: 30%;
+	inline-size: 30%;
 	display: flex;
 	flex-direction: column;
 	padding-block-start: .5rem;
@@ -233,7 +233,7 @@ const customRangeActive = computed<boolean>(() => {
 
 	button {
 		display: block;
-		width: 100%;
+		inline-size: 100%;
 		text-align: start;
 		padding: .5rem 1rem;
 		transition: $transition;
diff --git a/frontend/src/components/home/AddToHomeScreen.vue b/frontend/src/components/home/AddToHomeScreen.vue
index c73cb6b3a..337bd8276 100644
--- a/frontend/src/components/home/AddToHomeScreen.vue
+++ b/frontend/src/components/home/AddToHomeScreen.vue
@@ -53,7 +53,7 @@ const shouldShowMessage = computed(() => {
 	z-index: 5000;
 	inset-block-end: 1rem;
 	inset-inline: 1rem;
-	max-width: max-content;
+	max-inline-size: max-content;
 	margin-inline: auto;
 
 	display: flex;
diff --git a/frontend/src/components/home/AppHeader.vue b/frontend/src/components/home/AppHeader.vue
index 4b81d49b4..e5dd2aa9b 100644
--- a/frontend/src/components/home/AppHeader.vue
+++ b/frontend/src/components/home/AppHeader.vue
@@ -214,7 +214,7 @@ $user-dropdown-width-mobile: 5rem;
 
 	// this makes the truncated text of the project title work
 	// inside the flexbox parent
-	min-width: 0;
+	min-inline-size: 0;
 
 	@media screen and (min-width: $tablet) {
 		padding-inline: var(--navbar-gap-width);
@@ -243,7 +243,7 @@ $user-dropdown-width-mobile: 5rem;
 
 .project-title-button {
 	align-self: stretch;
-	min-width: var(--navbar-button-min-width);
+	min-inline-size: var(--navbar-button-min-width);
 	display: flex;
 	place-items: center;
 	justify-content: center;
@@ -252,14 +252,14 @@ $user-dropdown-width-mobile: 5rem;
 }
 
 .navbar-end {
-	margin-left: 0; // overrides bulma core styles
+	margin-inline-start: 0; // overrides bulma core styles
 	margin-inline-start: auto;
 	flex: 0 0 auto;
 	display: flex;
 	align-items: stretch;
 
 	>* {
-		min-width: var(--navbar-button-min-width);
+		min-inline-size: var(--navbar-button-min-width);
 	}
 }
 
@@ -303,7 +303,7 @@ $user-dropdown-width-mobile: 5rem;
 .avatar {
 	border-radius: 100%;
 	vertical-align: middle;
-	height: 40px;
+	block-size: 40px;
 	margin-inline-end: .5rem;
 }
 </style>
diff --git a/frontend/src/components/home/ContentAuth.vue b/frontend/src/components/home/ContentAuth.vue
index 5469d5e91..a77749b65 100644
--- a/frontend/src/components/home/ContentAuth.vue
+++ b/frontend/src/components/home/ContentAuth.vue
@@ -135,8 +135,8 @@ projectStore.loadAllProjects()
 	inset-block-start: 0.5rem;
 	inset-inline-end: 0.5rem;
 	z-index: 31;
-	width: 3rem;
-	height: 3rem;
+	inline-size: 3rem;
+	block-size: 3rem;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -156,7 +156,7 @@ projectStore.loadAllProjects()
 }
 
 .app-container {
-	min-height: calc(100vh - 65px);
+	min-block-size: calc(100vh - 65px);
 
 	@media screen and (max-width: $tablet) {
 		padding-block-start: $navbar-height;
@@ -174,7 +174,7 @@ projectStore.loadAllProjects()
 	@media screen and (max-width: $tablet) {
 		margin-inline-start: 0;
 		margin-inline-end: 0;
-		min-height: calc(100vh - 4rem);
+		min-block-size: calc(100vh - 4rem);
 	}
 
 	@media screen and (min-width: $tablet) {
@@ -189,7 +189,7 @@ projectStore.loadAllProjects()
 
 	// Used to make sure the spinner is always in the middle while loading
 	> .loader-container {
-		min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem});
+		min-block-size: calc(100vh - #{$navbar-height + 1.5rem + 1rem});
 	}
 
 	// FIXME: This should be somehow defined inside Card.vue
@@ -205,8 +205,8 @@ projectStore.loadAllProjects()
 	inset-block-end: 0;
 	inset-inline-start: 0;
 	inset-inline-end: 0;
-	height: 100vh;
-	width: 100vw;
+	block-size: 100vh;
+	inline-size: 100vw;
 	background: hsla(var(--grey-100-hsl), 0.8);
 	z-index: 5;
 	opacity: 0;
diff --git a/frontend/src/components/home/ContentLinkShare.vue b/frontend/src/components/home/ContentLinkShare.vue
index 9bf75cc82..47ed0a1bb 100644
--- a/frontend/src/components/home/ContentLinkShare.vue
+++ b/frontend/src/components/home/ContentLinkShare.vue
@@ -72,10 +72,10 @@ const isFullWidth = computed(() => {
 }
 
 .logo {
-	max-width: 300px;
-	width: 90%;
+	max-inline-size: 300px;
+	inline-size: 90%;
 	margin: 1rem auto 2rem;
-	height: 100px;
+	block-size: 100px;
 }
 
 .title {
@@ -83,14 +83,14 @@ const isFullWidth = computed(() => {
 }
 
 .link-share-view {
-	width: 100%;
-	max-width: $desktop;
+	inline-size: 100%;
+	max-inline-size: $desktop;
 	margin: 0 auto;
 }
 
 .link-share-container.link-share-is-fullwidth {
 	.link-share-view {
-		max-width: 100vw;
+		max-inline-size: 100vw;
 	}
 }
 
diff --git a/frontend/src/components/home/Logo.vue b/frontend/src/components/home/Logo.vue
index 9b82388f1..d0b28f42d 100644
--- a/frontend/src/components/home/Logo.vue
+++ b/frontend/src/components/home/Logo.vue
@@ -39,7 +39,7 @@ const CustomLogo = computed(() => window.CUSTOM_LOGO_URL)
 <style lang="scss" scoped>
 .logo {
 	color: var(--logo-text-color);
-	max-width: 168px;
-	max-height: 48px;
+	max-inline-size: 168px;
+	max-block-size: 48px;
 }
 </style>
diff --git a/frontend/src/components/home/MenuButton.vue b/frontend/src/components/home/MenuButton.vue
index 069c423c7..1ab8dab83 100644
--- a/frontend/src/components/home/MenuButton.vue
+++ b/frontend/src/components/home/MenuButton.vue
@@ -20,26 +20,26 @@ const menuActive = computed(() => baseStore.menuActive)
 </script>
 
 <style lang="scss" scoped>
-$lineWidth: 2rem;
-$size: $lineWidth + 1rem;
+$line-width: 2rem;
+$size: $line-width + 1rem;
 
 .menu-show-button {
-	min-height: $size;
-	width: $size;
+	min-block-size: $size;
+	inline-size: $size;
 
 	position: relative;
 
-	$transformX: translateX(-50%);
+	$transform-x: translateX(-50%);
 
 	&::before,
 	&::after {
 		content: '';
 		display: block;
 		position: absolute;
-		height: 3px;
-		width: $lineWidth;
+		block-size: 3px;
+		inline-size: $line-width;
 		inset-inline-start: 50%;
-		transform: $transformX;
+		transform: $transform-x;
 		background-color: var(--grey-400);
 		border-radius: 2px;
 		transition: all $transition;
@@ -47,12 +47,12 @@ $size: $lineWidth + 1rem;
 
 	&::before {
 		inset-block-start: 50%;
-		transform: $transformX translateY(-0.4rem)
+		transform: $transform-x translateY(-0.4rem)
 	}
 
 	&::after {
 		inset-block-end: 50%;
-		transform: $transformX translateY(0.4rem)
+		transform: $transform-x translateY(0.4rem)
 	}
 
 	&:hover,
@@ -63,11 +63,11 @@ $size: $lineWidth + 1rem;
 		}
 
 		&::before {
-			transform: $transformX translateY(-0.5rem);
+			transform: $transform-x translateY(-0.5rem);
 		}
 
 		&::after {
-			transform: $transformX translateY(0.5rem)
+			transform: $transform-x translateY(0.5rem)
 		}
 	}
 }
diff --git a/frontend/src/components/home/Navigation.vue b/frontend/src/components/home/Navigation.vue
index 9fdd14cf6..d3857ada1 100644
--- a/frontend/src/components/home/Navigation.vue
+++ b/frontend/src/components/home/Navigation.vue
@@ -160,18 +160,18 @@ const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
 	inset-block-end: 0;
 	inset-inline-start: 0;
 	transform: translateX(-100%);
-	width: $navbar-width;
+	inline-size: $navbar-width;
 	overflow-y: auto;
 
 	[dir="rtl"] & {
 		inset-inline-start: auto;
-		right: 0;
+		inset-inline-end: 0;
 		transform: translateX(100%);
 	}
 
 	@media screen and (max-width: $tablet) {
 		inset-block-start: 0;
-		width: 70vw;
+		inline-size: 70vw;
 		z-index: 20;
 	}
 
diff --git a/frontend/src/components/home/ProjectsNavigationItem.vue b/frontend/src/components/home/ProjectsNavigationItem.vue
index 4bcd5b477..13273968d 100644
--- a/frontend/src/components/home/ProjectsNavigationItem.vue
+++ b/frontend/src/components/home/ProjectsNavigationItem.vue
@@ -131,7 +131,7 @@ const childProjects = computed(() => {
 
 <style lang="scss" scoped>
 .list-setting-spacer {
-	width: 5rem;
+	inline-size: 5rem;
 	flex-shrink: 0;
 }
 
@@ -171,8 +171,8 @@ const childProjects = computed(() => {
 
 .color-bubble-wrapper {
 	position: relative;
-	width: 1rem;
-	height: 1rem;
+	inline-size: 1rem;
+	block-size: 1rem;
 	display: flex;
 	align-items: center;
 	justify-content: flex-start;
@@ -182,15 +182,15 @@ const childProjects = computed(() => {
 	.color-bubble, .icon {
 		transition: all $transition;
 		position: absolute;
-		width: 12px;
+		inline-size: 12px;
 		margin: 0 !important;
 		padding: 0 !important;
 	}
 }
 
 .drag-handle-standalone {
-	width: 1rem;
-	height: 1rem;
+	inline-size: 1rem;
+	block-size: 1rem;
 	opacity: 0;
 	cursor: grab;
 	transition: opacity $transition;
diff --git a/frontend/src/components/home/UpdateNotification.vue b/frontend/src/components/home/UpdateNotification.vue
index f519ff995..6eb01c9b0 100644
--- a/frontend/src/components/home/UpdateNotification.vue
+++ b/frontend/src/components/home/UpdateNotification.vue
@@ -61,7 +61,7 @@ function refreshApp() {
 	z-index: 5000;
 	inset-block-end: 1rem;
 	inset-inline: 1rem;
-	max-width: max-content;
+	max-inline-size: max-content;
 	margin-inline: auto;
 
 	display: flex;
@@ -76,7 +76,7 @@ function refreshApp() {
 }
 
 .update-notification__message {
-	width: 100%;
+	inline-size: 100%;
 	text-align: center;
 }
 </style>
diff --git a/frontend/src/components/input/AutocompleteDropdown.vue b/frontend/src/components/input/AutocompleteDropdown.vue
index 60902c701..b3a91b652 100644
--- a/frontend/src/components/input/AutocompleteDropdown.vue
+++ b/frontend/src/components/input/AutocompleteDropdown.vue
@@ -192,20 +192,18 @@ function onUpdateField(e) {
 		border: 1px solid var(--primary);
 		border-block-start: none;
 
-		max-height: 50vh;
+		max-block-size: 50vh;
 		overflow-x: auto;
 		z-index: 100;
-		max-width: 100%;
-		min-width: 100%;
+		max-inline-size: 100%;
+		min-inline-size: 100%;
 		margin-block-start: -2px;
 
 		button {
-			width: 100%;
 			background: transparent;
-			border: 0;
 
 			font-size: .9rem;
-			width: 100%;
+			inline-size: 100%;
 			color: var(--grey-800);
 			text-align: start;
 			box-shadow: none;
diff --git a/frontend/src/components/input/Button.vue b/frontend/src/components/input/Button.vue
index 721b95507..fc1f449ff 100644
--- a/frontend/src/components/input/Button.vue
+++ b/frontend/src/components/input/Button.vue
@@ -80,15 +80,13 @@ const variantClass = computed(() => VARIANT_CLASS_MAP[props.variant])
 	text-transform: uppercase;
 	font-size: 0.85rem;
 	font-weight: bold;
-	height: auto;
-	min-height: $button-height;
+	block-size: auto;
+	min-block-size: $button-height;
 	box-shadow: var(--shadow-sm);
-	display: inline-flex;
 	white-space: var(--button-white-space);
 	line-height: 1;
 	display: inline-flex;
-	padding-left: 0; // override bulma style
-	padding-right: 0; // override bulma style
+	padding-inline: 0; // override bulma style // override bulma style
 	padding-inline: .5rem;
 	gap: .25rem;
 
@@ -102,7 +100,7 @@ const variantClass = computed(() => VARIANT_CLASS_MAP[props.variant])
 
 	&.fullheight {
 		padding-inline-end: 7px;
-		height: 100%;
+		block-size: 100%;
 	}
 
 	&.is-active,
diff --git a/frontend/src/components/input/ColorPicker.vue b/frontend/src/components/input/ColorPicker.vue
index f63e595eb..80b3fd072 100644
--- a/frontend/src/components/input/ColorPicker.vue
+++ b/frontend/src/components/input/ColorPicker.vue
@@ -147,15 +147,15 @@ function reset() {
 		border: none;
 	}
 
-	$PICKER_SIZE: 24px;
-	$BORDER_WIDTH: 1px;
+	$picker-size: 24px;
+	$border-width: 1px;
 	.picker {
 		display: grid;
-		width: $PICKER_SIZE;
-		height: $PICKER_SIZE;
+		inline-size: $picker-size;
+		block-size: $picker-size;
 		overflow: hidden;
 		border-radius: 100%;
-		border: $BORDER_WIDTH solid var(--grey-300);
+		border: $border-width solid var(--grey-300);
 		box-shadow: $shadow;
 
 		& > * {
@@ -166,8 +166,8 @@ function reset() {
 
 	input.picker__input {
 		padding: 0;
-		width: $PICKER_SIZE - 2 * $BORDER_WIDTH;
-		height: $PICKER_SIZE - 2 * $BORDER_WIDTH;
+		inline-size: $picker-size - 2 * $border-width;
+		block-size: $picker-size - 2 * $border-width;
 	}
 
 	.picker__input.is-empty {
diff --git a/frontend/src/components/input/Datepicker.vue b/frontend/src/components/input/Datepicker.vue
index 7ea252261..d7a2af655 100644
--- a/frontend/src/components/input/Datepicker.vue
+++ b/frontend/src/components/input/Datepicker.vue
@@ -128,19 +128,19 @@ function close() {
 .datepicker-popup {
 	position: absolute;
 	z-index: 99;
-	width: 320px;
+	inline-size: 320px;
 	background: var(--white);
 	border-radius: $radius;
 	box-shadow: $shadow;
 
 	@media screen and (max-width: ($tablet)) {
-		width: calc(100vw - 5rem);
+		inline-size: calc(100vw - 5rem);
 	}
 }
 
 .datepicker__close-button {
 	margin: 1rem;
-	width: calc(100% - 2rem);
+	inline-size: calc(100% - 2rem);
 }
 
 :deep(.flatpickr-calendar) {
diff --git a/frontend/src/components/input/DatepickerInline.vue b/frontend/src/components/input/DatepickerInline.vue
index fbe975cd2..5f2d517d6 100644
--- a/frontend/src/components/input/DatepickerInline.vue
+++ b/frontend/src/components/input/DatepickerInline.vue
@@ -222,8 +222,8 @@ function getWeekdayFromStringInterval(dateString: string) {
 	display: flex;
 	align-items: center;
 	padding: 0 .5rem;
-	width: 100%;
-	height: 2.25rem;
+	inline-size: 100%;
+	block-size: 2.25rem;
 	color: var(--text);
 	transition: all $transition;
 
@@ -236,7 +236,7 @@ function getWeekdayFromStringInterval(dateString: string) {
 	}
 
 	.text {
-		width: 100%;
+		inline-size: 100%;
 		font-size: .85rem;
 		display: flex;
 		justify-content: space-between;
@@ -249,7 +249,7 @@ function getWeekdayFromStringInterval(dateString: string) {
 	}
 
 	.icon {
-		width: 2rem;
+		inline-size: 2rem;
 		text-align: center;
 	}
 }
diff --git a/frontend/src/components/input/Multiselect.vue b/frontend/src/components/input/Multiselect.vue
index 95b626876..bbb8a67f8 100644
--- a/frontend/src/components/input/Multiselect.vue
+++ b/frontend/src/components/input/Multiselect.vue
@@ -435,7 +435,7 @@ function focus() {
 
 <style lang="scss" scoped>
 .multiselect {
-	width: 100%;
+	inline-size: 100%;
 	position: relative;
 
 	.control.is-loading::after {
@@ -460,7 +460,7 @@ function focus() {
 	background: var(--white);
 	border-color: var(--grey-200);
 	flex-wrap: wrap;
-	height: auto;
+	block-size: auto;
 
 	&:hover {
 		border-color: var(--grey-300) !important;
@@ -468,12 +468,12 @@ function focus() {
 
 	.input {
 		display: flex;
-		max-width: 100%;
-		width: 100%;
+		max-inline-size: 100%;
+		inline-size: 100%;
 		align-items: center;
 		border: none !important;
 		background: transparent;
-		height: auto;
+		block-size: auto;
 
 		&::placeholder {
 			font-style: normal !important;
@@ -481,7 +481,7 @@ function focus() {
 	}
 
 	&.has-multiple .input {
-		max-width: 250px;
+		max-inline-size: 250px;
 
 		input {
 			padding-inline-start: 0;
@@ -515,12 +515,12 @@ function focus() {
 	border: 1px solid var(--primary);
 	border-block-start: none;
 
-	max-height: 50vh;
+	max-block-size: 50vh;
 	overflow-x: auto;
 	position: absolute;
 	z-index: 100;
-	max-width: 100%;
-	min-width: 100%;
+	max-inline-size: 100%;
+	min-inline-size: 100%;
 }
 
 .search-results-inline {
diff --git a/frontend/src/components/input/SimpleButton.vue b/frontend/src/components/input/SimpleButton.vue
index 46214bc09..03723cf49 100644
--- a/frontend/src/components/input/SimpleButton.vue
+++ b/frontend/src/components/input/SimpleButton.vue
@@ -16,7 +16,7 @@ import BaseButton from '@/components/base/BaseButton.vue'
 	border-radius: $radius;
 	display: block;
 	margin: .1rem 0;
-	width: 100%;
+	inline-size: 100%;
 	text-align: start;
 
 	&:hover {
diff --git a/frontend/src/components/input/editor/CommandsList.vue b/frontend/src/components/input/editor/CommandsList.vue
index 565d57ba6..0243d0e01 100644
--- a/frontend/src/components/input/editor/CommandsList.vue
+++ b/frontend/src/components/input/editor/CommandsList.vue
@@ -110,7 +110,7 @@ export default {
 	display: flex;
 	align-items: center;
 	margin: 0;
-	width: 100%;
+	inline-size: 100%;
 	text-align: start;
 	background: transparent;
 	border-radius: $radius;
@@ -125,8 +125,8 @@ export default {
 	
 	> svg {
 		box-sizing: border-box;
-		width: 2rem;
-		height: 2rem;
+		inline-size: 2rem;
+		block-size: 2rem;
 		border: 1px solid var(--grey-300);
 		padding: .5rem;
 		margin-inline-end: .5rem;
diff --git a/frontend/src/components/input/editor/EditorToolbar.vue b/frontend/src/components/input/editor/EditorToolbar.vue
index 0bf43267a..16c7878ee 100644
--- a/frontend/src/components/input/editor/EditorToolbar.vue
+++ b/frontend/src/components/input/editor/EditorToolbar.vue
@@ -404,8 +404,8 @@ function setLink(event) {
 }
 
 .editor-toolbar__button {
-	min-width: 2rem;
-	height: 2rem;
+	min-inline-size: 2rem;
+	block-size: 2rem;
 	border-radius: $radius;
 	border: 1px solid transparent;
 	color: var(--grey-700);
@@ -440,7 +440,7 @@ function setLink(event) {
 		padding: 0 .25rem;
 		border: 1px solid var(--grey-400);
 		font-size: .75rem;
-		height: 1.5rem;
+		block-size: 1.5rem;
 	}
 }
 </style>
diff --git a/frontend/src/components/input/editor/TipTap.vue b/frontend/src/components/input/editor/TipTap.vue
index 2c3f0e774..b80072524 100644
--- a/frontend/src/components/input/editor/TipTap.vue
+++ b/frontend/src/components/input/editor/TipTap.vue
@@ -747,7 +747,7 @@ watch(
 	border-radius: $radius;
 	
 	&.tiptap__editor-is-edit-enabled {
-		min-height: 10rem;
+		min-block-size: 10rem;
 
 		.ProseMirror {
 			padding: .5rem;
@@ -767,8 +767,8 @@ watch(
 	content: attr(data-placeholder);
 	color: var(--grey-400);
 	pointer-events: none;
-	height: 0;
-	float: left;
+	block-size: 0;
+	float: inline-start;
 }
 
 // Basic editor styles
@@ -806,7 +806,7 @@ watch(
 	pre {
 		background: var(--grey-200);
 		color: var(--grey-700);
-		font-family: 'JetBrainsMono', monospace;
+		font-family: JetBrainsMono, monospace;
 		padding: 0.75rem 1rem;
 		border-radius: $radius;
 
@@ -829,7 +829,6 @@ watch(
 		.hljs-name,
 		.hljs-regexp,
 		.hljs-link,
-		.hljs-name,
 		.hljs-selector-id,
 		.hljs-selector-class {
 			color: var(--code-variable);
@@ -871,8 +870,8 @@ watch(
 	}
 
 	img {
-		max-width: 100%;
-		height: auto;
+		max-inline-size: 100%;
+		block-size: auto;
 
 		&.ProseMirror-selectednode {
 			outline: 3px solid var(--primary);
@@ -889,21 +888,18 @@ watch(
 		border-block-start: 2px solid rgba(#0d0d0d, 0.1);
 		margin: 2rem 0;
 	}
-}
-
-.ProseMirror {
-	/* Table-specific styling */
-
+	
+	// Table-specific styling
 	table {
 		border-collapse: collapse;
 		table-layout: fixed;
-		width: 100%;
+		inline-size: 100%;
 		margin: 0;
 		overflow: hidden;
 
 		td,
 		th {
-			min-width: 1em;
+			min-inline-size: 1em;
 			border: 2px solid var(--grey-300) !important;
 			padding: 3px 5px;
 			vertical-align: top;
@@ -938,8 +934,8 @@ watch(
 			inset-inline-end: -2px;
 			inset-block-start: 0;
 			inset-block-end: -2px;
-			width: 4px;
-			background-color: #adf;
+			inline-size: 4px;
+			background-color: #aaddff;
 			pointer-events: none;
 		}
 
@@ -1022,8 +1018,8 @@ ul[data-type='taskList'] {
 	svg {
 		box-sizing: border-box;
 		display: block;
-		width: 2rem;
-		height: 2rem;
+		inline-size: 2rem;
+		block-size: 2rem;
 		padding: .5rem;
 		margin: 0;
 	}
diff --git a/frontend/src/components/misc/ColorBubble.vue b/frontend/src/components/misc/ColorBubble.vue
index dfa6302b5..894bbc9ec 100644
--- a/frontend/src/components/misc/ColorBubble.vue
+++ b/frontend/src/components/misc/ColorBubble.vue
@@ -17,8 +17,8 @@ defineProps< {
 .color-bubble {
 	display: inline-block;
 	border-radius: 100%;
-	height: 10px;
-	width: 10px;
+	block-size: 10px;
+	inline-size: 10px;
 	flex-shrink: 0;
 }
 </style>
diff --git a/frontend/src/components/misc/CustomTransition.vue b/frontend/src/components/misc/CustomTransition.vue
index 63eb73987..23f406a20 100644
--- a/frontend/src/components/misc/CustomTransition.vue
+++ b/frontend/src/components/misc/CustomTransition.vue
@@ -55,7 +55,7 @@ $flash-background-duration: 750ms;
 
 .width-enter-from,
 .width-leave-to {
-  width: 0;
+  inline-size: 0;
 }
 
 .modal-enter,
diff --git a/frontend/src/components/misc/Dropdown.vue b/frontend/src/components/misc/Dropdown.vue
index 55c982462..36871bb89 100644
--- a/frontend/src/components/misc/Dropdown.vue
+++ b/frontend/src/components/misc/Dropdown.vue
@@ -92,7 +92,7 @@ onClickOutside(dropdown, (e) => {
 }
 
 .dropdown-menu {
-	min-width: 12rem;
+	min-inline-size: 12rem;
 	padding-block-start: 4px;
 	position: absolute;
 	inset-block-start: 100%;
@@ -114,7 +114,7 @@ onClickOutside(dropdown, (e) => {
 	background-color: var(--border-light);
 	border: none;
 	display: block;
-	height: 1px;
+	block-size: 1px;
 	margin: 0.5rem 0;
 }
 </style>
diff --git a/frontend/src/components/misc/DropdownItem.vue b/frontend/src/components/misc/DropdownItem.vue
index 1a58d4d90..0084e6196 100644
--- a/frontend/src/components/misc/DropdownItem.vue
+++ b/frontend/src/components/misc/DropdownItem.vue
@@ -40,7 +40,7 @@ defineProps<DropDownItemProps>()
 	position: relative;
 	text-align: inherit;
 	white-space: nowrap;
-	width: 100%;
+	inline-size: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: left !important;
diff --git a/frontend/src/components/misc/Loading.vue b/frontend/src/components/misc/Loading.vue
index 43f6c6b01..b4de8c0c6 100644
--- a/frontend/src/components/misc/Loading.vue
+++ b/frontend/src/components/misc/Loading.vue
@@ -15,24 +15,24 @@ withDefaults(defineProps<{
 
 <style scoped lang="scss">
 .loader-container {
-	height: 100%;
-	min-height: 200px;
-	width: 100%;
-	min-width: 600px;
-	max-width: 100vw;
+	block-size: 100%;
+	min-block-size: 200px;
+	inline-size: 100%;
+	min-inline-size: 600px;
+	max-inline-size: 100vw;
 
 	&.is-loading-small {
-		min-height: 50px;
-		min-width: 100px;
+		min-block-size: 50px;
+		min-inline-size: 100px;
 	}
 
 	&.is-small {
-		min-width: 100%;
-		height: 150px;
+		min-inline-size: 100%;
+		block-size: 150px;
 
 		&.is-loading::after {
-			width: 3rem;
-			height: 3rem;
+			inline-size: 3rem;
+			block-size: 3rem;
 			inset-block-start: calc(50% - 1.5rem);
 			inset-inline-start: calc(50% - 1.5rem);
 			border-width: 3px;
diff --git a/frontend/src/components/misc/Modal.vue b/frontend/src/components/misc/Modal.vue
index 797cb9c69..f1a41f0bf 100644
--- a/frontend/src/components/misc/Modal.vue
+++ b/frontend/src/components/misc/Modal.vue
@@ -132,19 +132,19 @@ $modal-width: 1024px;
 	z-index: 4000;
 	inset-block-start: 0;
 	inset-inline-start: 0;
-	width: 100%;
-	height: 100%;
+	inline-size: 100%;
+	block-size: 100%;
 	background-color: rgba(0, 0, 0, .8);
 	transition: opacity 150ms ease;
-	color: #fff;
+	color: #ffffff;
 }
 
 .modal-container {
 	transition: all 150ms ease;
 	position: relative;
-	width: 100%;
-	height: 100%;
-	max-height: 100vh;
+	inline-size: 100%;
+	block-size: 100%;
+	max-block-size: 100vh;
 	overflow: auto;
 }
 
@@ -153,8 +153,8 @@ $modal-width: 1024px;
 	text-align: center;
 	position: absolute;
 	// fine to use top/left since we're only using this to position it centered
-	top: 50%;
-	left: 50%;
+	inset-block-start: 50%;
+	inset-inline-start: 50%;
 	transform: translate(-50%, -50%);
 
 	@media screen and (max-width: $tablet) {
@@ -176,20 +176,20 @@ $modal-width: 1024px;
 // scrolling-content
 // used e.g. for <TaskDetailViewModal>
 .scrolling .modal-content {
-	width: 100%;
+	inline-size: 100%;
 	margin: $modal-margin auto;
 
-	max-height: none; // reset bulma
+	max-block-size: none; // reset bulma
 	overflow: visible; // reset bulma
 	
 	@media not print {
-		max-width: $modal-width;
+		max-inline-size: $modal-width;
 	}
 
 	@media screen and (min-width: $tablet) {
-		max-height: none; // reset bulma
+		max-block-size: none; // reset bulma
 		margin: $modal-margin auto; // reset bulma
-		width: 100%;
+		inline-size: 100%;
 	}
 
 	@media screen and (max-width: $desktop), print {
@@ -198,8 +198,8 @@ $modal-width: 1024px;
 }
 
 .is-wide {
-	max-width: $desktop;
-	width: calc(100% - 2rem);
+	max-inline-size: $desktop;
+	inline-size: calc(100% - 2rem);
 }
 
 .hint-modal {
@@ -222,7 +222,7 @@ $modal-width: 1024px;
 	color: var(--white);
 	font-size: 2rem;
 
-	@media screen and (min-width: $desktop) and (max-width: calc(#{$desktop	} + #{$close-button-min-space})) {
+	@media screen and (min-width: $desktop) and (width <= calc(#{$desktop	} + #{$close-button-min-space})) {
 		inset-block-start: calc(5px + $modal-margin);
 		inset-inline-end: 50%;
 		// we align the close button to the modal until there is enough space outside for it
@@ -240,13 +240,13 @@ $modal-width: 1024px;
   }
 
   .modal-container {
-    height: auto;
-	min-height: 100vh;
+    block-size: auto;
+	min-block-size: 100vh;
   }
 
   .modal-content {
     position: static;
-	max-height: none;
+	max-block-size: none;
   }
 
   .close {
@@ -256,7 +256,7 @@ $modal-width: 1024px;
   :deep(.card) {
 	border: none !important; 
 	border-radius: 0 !important;
-	min-height: 100vh;
+	min-block-size: 100vh;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
@@ -269,7 +269,7 @@ $modal-width: 1024px;
 	flex-direction: column;
 	justify-content: center;
 	padding: 0 1rem;
-	min-height: 100vh
+	min-block-size: 100vh
 }
 
 .modal-content :deep(.card .card-header-icon.close) {
diff --git a/frontend/src/components/misc/NoAuthWrapper.vue b/frontend/src/components/misc/NoAuthWrapper.vue
index 3da97e93b..2e85d6a95 100644
--- a/frontend/src/components/misc/NoAuthWrapper.vue
+++ b/frontend/src/components/misc/NoAuthWrapper.vue
@@ -71,7 +71,7 @@ useTitle(() => title.value)
 <style lang="scss" scoped>
 .no-auth-wrapper {
 	background: var(--site-background) url('@/assets/llama.svg?url') no-repeat fixed bottom left;
-	min-height: 100vh;
+	min-block-size: 100vh;
 	display: flex;
 	flex-direction: column;
 	place-items: center;
@@ -82,9 +82,9 @@ useTitle(() => title.value)
 }
 
 .noauth-container {
-	max-width: $desktop;
-	width: 100%;
-	min-height: 60vh;
+	max-inline-size: $desktop;
+	inline-size: 100%;
+	min-block-size: 60vh;
 	display: flex;
 	background-color: var(--white);
 	box-shadow: var(--shadow-md);
@@ -96,7 +96,7 @@ useTitle(() => title.value)
 }
 
 .image {
-	width: 50%;
+	inline-size: 50%;
 	padding: 1rem;
 	display: flex;
 	flex-direction: column;
@@ -137,18 +137,18 @@ useTitle(() => title.value)
 	padding: 2rem 2rem 1.5rem;
 
 	@media screen and (max-width: $desktop) {
-		width: 100%;
-		max-width: 450px;
+		inline-size: 100%;
+		max-inline-size: 450px;
 		margin-inline: auto;
 	}
 
 	@media screen and (min-width: $desktop) {
-		width: 50%;
+		inline-size: 50%;
 	}
 }
 
 .logo {
-	max-width: 100%;
+	max-inline-size: 100%;
 	margin: 1rem 0;
 }
 
diff --git a/frontend/src/components/misc/Popup.vue b/frontend/src/components/misc/Popup.vue
index ca9de036f..86cbfe6cf 100644
--- a/frontend/src/components/misc/Popup.vue
+++ b/frontend/src/components/misc/Popup.vue
@@ -80,7 +80,7 @@ onClickOutside(popup, () => close())
 .popup {
 	transition: opacity $transition;
 	opacity: 0;
-	height: 0;
+	block-size: 0;
 	overflow: hidden;
 	position: absolute;
 	inset-block-start: 1rem;
@@ -88,7 +88,7 @@ onClickOutside(popup, () => close())
 
 	&.is-open {
 		opacity: 1;
-		height: auto;
+		block-size: auto;
 	}
 }
 </style>
diff --git a/frontend/src/components/misc/ProgressBar.vue b/frontend/src/components/misc/ProgressBar.vue
index b8fbc362a..fad67d92c 100644
--- a/frontend/src/components/misc/ProgressBar.vue
+++ b/frontend/src/components/misc/ProgressBar.vue
@@ -34,12 +34,12 @@ withDefaults(defineProps<{
 	appearance: none;
 	border: none;
 	border-radius: var(--progress-border-radius);
-	height: var(--progress-height);
+	block-size: var(--progress-height);
 	overflow: hidden;
 	padding: 0;
-	min-width: 6vw;
+	min-inline-size: 6vw;
 
-	width: 50px;
+	inline-size: 50px;
 	margin: 0 .5rem 0 0;
 	flex: 3 1 auto;
 
@@ -49,9 +49,9 @@ withDefaults(defineProps<{
 	}
 
 	@media screen and (max-width: $tablet) {
-		margin: 0.5rem 0 0 0;
+		margin: 0.5rem 0 0;
 		order: 1;
-		width: 100%;
+		inline-size: 100%;
 	}
 
 	&::-webkit-progress-bar {
@@ -73,6 +73,7 @@ withDefaults(defineProps<{
 
 	// Colors
 	@each $name, $pair in $colors {
+		// stylelint-disable-next-line function-no-unknown
 		$color: nth($pair, 1);
 		&.is-#{$name} {
 			--progress-value-background-color: var(--#{$name}, #{$color});
@@ -90,7 +91,7 @@ withDefaults(defineProps<{
 	&:indeterminate {
 		animation-duration: var(--progress-indeterminate-duration);
 		animation-iteration-count: infinite;
-		animation-name: moveIndeterminate;
+		animation-name: move-indeterminate;
 		animation-timing-function: linear;
 		background-color: var(--progress-bar-background-color);
 		background-image: linear-gradient(
@@ -120,7 +121,7 @@ withDefaults(defineProps<{
 	}
 }
 
-@keyframes moveIndeterminate {
+@keyframes move-indeterminate {
 	from {
 		background-position: 200% 0;
 	}
diff --git a/frontend/src/components/misc/Ready.vue b/frontend/src/components/misc/Ready.vue
index 252ce5ff7..7906bae66 100644
--- a/frontend/src/components/misc/Ready.vue
+++ b/frontend/src/components/misc/Ready.vue
@@ -73,12 +73,14 @@ const baseStore = useBaseStore()
 </script>
 
 <style lang="scss" scoped>
+// stylelint-disable no-invalid-position-declaration
+
 .vikunja-loading {
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	height: 100vh;
-	width: 100vw;
+	block-size: 100vh;
+	inline-size: 100vw;
 	flex-direction: column;
 	position: fixed;
 	inset-block-start: 0;
@@ -91,8 +93,8 @@ const baseStore = useBaseStore()
 
 .logo {
 	margin-block-end: 1rem;
-	width: 100px;
-	height: 100px;
+	inline-size: 100px;
+	block-size: 100px;
 }
 
 .loader-container {
@@ -107,21 +109,19 @@ const baseStore = useBaseStore()
 .offline {
 	background: url('@/assets/llama-nightscape.jpg') no-repeat center;
 	background-size: cover;
-	height: 100vh;
+	block-size: 100vh;
 }
 
 .offline-message {
 	text-align: center;
 	position: absolute;
-	width: 100vw;
+	inline-size: 100vw;
 	inset-block-end: 5vh;
 	color: $white;
 	padding: 0 1rem;
 }
 
 .title {
-	font-weight: bold;
-	font-size: 1.5rem;
 	text-align: center;
 	color: $white;
 	font-weight: 700 !important;
diff --git a/frontend/src/components/notifications/Notifications.vue b/frontend/src/components/notifications/Notifications.vue
index ab3bba148..4a38eb0f8 100644
--- a/frontend/src/components/notifications/Notifications.vue
+++ b/frontend/src/components/notifications/Notifications.vue
@@ -202,7 +202,7 @@ async function markAllRead() {
 	display: flex;
 
 	.trigger-button {
-		width: 100%;
+		inline-size: 100%;
 		position: relative;
 	}
 
@@ -210,8 +210,8 @@ async function markAllRead() {
 		position: absolute;
 		inset-block-start: 1rem;
 		inset-inline-end: .5rem;
-		width: .75rem;
-		height: .75rem;
+		inline-size: .75rem;
+		block-size: .75rem;
 
 		background: var(--primary);
 		border-radius: 100%;
@@ -222,19 +222,19 @@ async function markAllRead() {
 		position: absolute;
 		inset-inline-end: 1rem;
 		inset-block-start: calc(100% + 1rem);
-		max-height: 400px;
+		max-block-size: 400px;
 		overflow-y: auto;
 
 		background: var(--white);
-		width: 350px;
-		max-width: calc(100vw - 2rem);
+		inline-size: 350px;
+		max-inline-size: calc(100vw - 2rem);
 		padding: .75rem .25rem;
 		border-radius: $radius;
 		box-shadow: var(--shadow-sm);
 		font-size: .85rem;
 
 		@media screen and (max-width: $tablet) {
-			max-height: calc(100vh - 1rem - #{$navbar-height});
+			max-block-size: calc(100vh - 1rem - #{$navbar-height});
 		}
 
 		.head {
@@ -256,8 +256,8 @@ async function markAllRead() {
 			}
 
 			.read-indicator {
-				width: .35rem;
-				height: .35rem;
+				inline-size: .35rem;
+				block-size: .35rem;
 				background: var(--primary);
 				border-radius: 100%;
 				margin: 0 .5rem;
@@ -271,7 +271,7 @@ async function markAllRead() {
 			.user {
 				display: inline-flex;
 				align-items: center;
-				width: auto;
+				inline-size: auto;
 				margin: 0 .5rem;
 
 				span {
@@ -279,7 +279,7 @@ async function markAllRead() {
 				}
 
 				.avatar {
-					height: 16px;
+					block-size: 16px;
 				}
 
 				img {
diff --git a/frontend/src/components/project/ProjectWrapper.vue b/frontend/src/components/project/ProjectWrapper.vue
index bbec6cd07..b968102f0 100644
--- a/frontend/src/components/project/ProjectWrapper.vue
+++ b/frontend/src/components/project/ProjectWrapper.vue
@@ -102,7 +102,7 @@ function getViewTitle(view: IProjectView) {
 
 <style lang="scss" scoped>
 .switch-view-container {
-	min-height: $switch-view-height;
+	min-block-size: $switch-view-height;
 	margin-block-end: 1rem;
 	
 	display: flex;
diff --git a/frontend/src/components/project/partials/FilterInput.vue b/frontend/src/components/project/partials/FilterInput.vue
index 28da11bee..e16597da7 100644
--- a/frontend/src/components/project/partials/FilterInput.vue
+++ b/frontend/src/components/project/partials/FilterInput.vue
@@ -374,7 +374,7 @@ const blurDebounced = useDebounceFn(() => emit('blur'), 500)
 		border-radius: $radius;
 		position: absolute;
 		margin-block-start: calc((0.25em - 0.125rem) * -1);
-		height: 1.75rem;
+		block-size: 1.75rem;
 		padding: 0;
 		border: 0;
 		background: transparent;
@@ -393,11 +393,9 @@ const blurDebounced = useDebounceFn(() => emit('blur'), 500)
 		position: absolute;
 		background: transparent !important;
 		resize: none;
-		text-fill-color: transparent;
 		-webkit-text-fill-color: transparent;
 
 		&::placeholder {
-			text-fill-color: var(--input-placeholder-color);
 			-webkit-text-fill-color: var(--input-placeholder-color);
 		}
 
@@ -408,7 +406,7 @@ const blurDebounced = useDebounceFn(() => emit('blur'), 500)
 
 	.filter-input-highlight {
 		background: var(--white);
-		height: 2.5em;
+		block-size: 2.5em;
 		line-height: 1.5;
 		padding: .5em .75em;
 		word-break: break-word;
diff --git a/frontend/src/components/project/partials/FilterPopup.vue b/frontend/src/components/project/partials/FilterPopup.vue
index 83d907187..abde68913 100644
--- a/frontend/src/components/project/partials/FilterPopup.vue
+++ b/frontend/src/components/project/partials/FilterPopup.vue
@@ -110,8 +110,8 @@ $filter-bubble-size: .75rem;
 		inset-block-start: math.div($filter-bubble-size, -2);
 		inset-inline-end: math.div($filter-bubble-size, -2);
 
-		width: $filter-bubble-size;
-		height: $filter-bubble-size;
+		inline-size: $filter-bubble-size;
+		block-size: $filter-bubble-size;
 		border-radius: 100%;
 		background: var(--primary);
 	}
diff --git a/frontend/src/components/project/partials/ProjectCard.vue b/frontend/src/components/project/partials/ProjectCard.vue
index b5951879a..6669d61ef 100644
--- a/frontend/src/components/project/partials/ProjectCard.vue
+++ b/frontend/src/components/project/partials/ProjectCard.vue
@@ -123,7 +123,7 @@ const textOnlyDescription = computed(() => {
 
 .is-archived {
 	font-size: .75rem;
-	float: left;
+	float: inline-start;
 }
 
 .project-title {
@@ -133,9 +133,9 @@ const textOnlyDescription = computed(() => {
 	font-size: 1.5rem;
 	line-height: var(--title-line-height);
 	color: var(--text);
-	width: 100%;
+	inline-size: 100%;
 	margin-block-end: 0;
-	max-height: calc(100% - (var(--project-card-padding) + 1rem)); // padding & height of the "is archived" badge
+	max-block-size: calc(100% - (var(--project-card-padding) + 1rem)); // padding & height of the "is archived" badge
 	overflow: hidden;
 	text-overflow: ellipsis;
 	word-break: break-word;
diff --git a/frontend/src/components/project/views/ProjectGantt.vue b/frontend/src/components/project/views/ProjectGantt.vue
index fbd6cae18..a287e103c 100644
--- a/frontend/src/components/project/views/ProjectGantt.vue
+++ b/frontend/src/components/project/views/ProjectGantt.vue
@@ -192,15 +192,15 @@ const flatPickerConfig = computed(() => ({
 
 .field {
 	margin-block-end: 0;
-	width: 33%;
+	inline-size: 33%;
 
 	&:not(:last-child) {
 		padding-inline-end: .5rem;
 	}
 
 	@media screen and (max-width: $tablet) {
-		width: 100%;
-		max-width: 100%;
+		inline-size: 100%;
+		max-inline-size: 100%;
 		margin-block-start: .5rem;
 		padding-inline-end: 0 !important;
 	}
@@ -211,8 +211,8 @@ const flatPickerConfig = computed(() => ({
 
 	.select,
 	.select select {
-		height: auto;
-		width: 100%;
+		block-size: auto;
+		inline-size: 100%;
 		font-size: .8rem;
 	}
 
diff --git a/frontend/src/components/project/views/ProjectKanban.vue b/frontend/src/components/project/views/ProjectKanban.vue
index 191a39564..71c96c213 100644
--- a/frontend/src/components/project/views/ProjectKanban.vue
+++ b/frontend/src/components/project/views/ProjectKanban.vue
@@ -792,6 +792,7 @@ function unCollapseBucket(bucket: IBucket) {
     inset-block-start: 30%;
     inset-inline-end: 50%;
     transform: translate(-50%, 0);
+
 	--loader-border-color: var(--grey-500);
   }
 }
@@ -803,7 +804,6 @@ $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
 $bucket-width: 300px;
 $bucket-header-height: 60px;
 $bucket-right-margin: 1rem;
-
 $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
 $crazy-height-calculation-tasks: '#{$crazy-height-calculation} - 1rem - 2.5rem - 2rem - #{$button-height} - 1rem';
 $filter-container-height: '1rem - #{$switch-view-height}';
@@ -811,7 +811,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 .kanban {
 	overflow-x: auto;
 	overflow-y: hidden;
-	height: calc(#{$crazy-height-calculation});
+	block-size: calc(#{$crazy-height-calculation});
 	margin: 0 -1.5rem;
 	padding: 0 1.5rem;
 
@@ -820,7 +820,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 	}
 
 	@media screen and (max-width: $tablet) {
-		height: calc(#{$crazy-height-calculation} - #{$filter-container-height} + 9px);
+		block-size: calc(#{$crazy-height-calculation} - #{$filter-container-height} + 9px);
 		scroll-snap-type: x mandatory;
 		margin: 0 -0.5rem;
 	}
@@ -854,9 +854,9 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 		position: relative;
 
 		margin: 0 $bucket-right-margin 0 0;
-		max-height: calc(100% - 1rem); // 1rem spacing to the bottom
-		min-height: 20px;
-		width: $bucket-width;
+		max-block-size: calc(100% - 1rem); // 1rem spacing to the bottom
+		min-block-size: 20px;
+		inline-size: $bucket-width;
 		display: flex;
 		flex-direction: column;
 		overflow: hidden; // Make sure the edges are always rounded
@@ -867,7 +867,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 
 		.tasks {
 			overflow: hidden auto;
-			height: 100%;
+			block-size: 100%;
 		}
 
 		.task-item {
@@ -898,12 +898,12 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			// To make it still look like it has some, we modify the container to have a padding of 1rem,
 			// which is the same as the margin it should have. Then we make the container itself bigger
 			// to hide the fact we just made the button smaller.
-			min-width: calc(#{$bucket-width} + 1rem);
+			min-inline-size: calc(#{$bucket-width} + 1rem);
 			background: transparent;
 
 			.button {
 				background: var(--grey-100);
-				width: 100%;
+				inline-size: 100%;
 			}
 		}
 
@@ -923,12 +923,11 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 
 	.bucket-header {
 		background-color: var(--grey-100);
-		height: min-content;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding: .5rem;
-		height: $bucket-header-height;
+		block-size: $bucket-header-height;
 
 		.limit {
 			padding: 0 .5rem;
@@ -940,7 +939,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 		}
 
 		.title.input {
-			height: auto;
+			block-size: auto;
 			padding: .4rem .5rem;
 			display: inline-block;
 			cursor: pointer;
@@ -954,11 +953,11 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 	.bucket-footer {
 		position: sticky;
 		inset-block-end: 0;
-		height: min-content;
+		block-size: min-content;
 		padding: .5rem;
 		background-color: var(--grey-100);
-		border-bottom-left-radius: $radius;
-		border-bottom-right-radius: $radius;
+		border-end-start-radius: $radius;
+		border-end-end-radius: $radius;
 		transform: none;
 
 		.button {
diff --git a/frontend/src/components/project/views/ViewEditForm.vue b/frontend/src/components/project/views/ViewEditForm.vue
index c0fa462ef..e0a9152c7 100644
--- a/frontend/src/components/project/views/ViewEditForm.vue
+++ b/frontend/src/components/project/views/ViewEditForm.vue
@@ -317,7 +317,7 @@ function handleBubbleSave() {
 		padding: .5rem;
 		border: 1px solid var(--grey-200);
 		border-radius: $radius;
-		width: 100%;
+		inline-size: 100%;
 	}
 }
 </style>
diff --git a/frontend/src/components/quick-actions/QuickActions.vue b/frontend/src/components/quick-actions/QuickActions.vue
index ab135617f..8cec745c2 100644
--- a/frontend/src/components/quick-actions/QuickActions.vue
+++ b/frontend/src/components/quick-actions/QuickActions.vue
@@ -640,7 +640,7 @@ function reset() {
 
 .results {
 	text-align: start;
-	width: 100%;
+	inline-size: 100%;
 	color: var(--grey-800);
 }
 
@@ -653,7 +653,7 @@ function reset() {
 
 .result-item-button {
 	font-size: .9rem;
-	width: 100%;
+	inline-size: 100%;
 	background: transparent;
 	color: var(--grey-800);
 	text-align: start;
@@ -678,7 +678,7 @@ function reset() {
 	
 	.saved-filter-icon {
 		font-size: .75rem;
-		width: .75rem;
+		inline-size: .75rem;
 		margin-inline-end: .25rem;
 		color: var(--grey-400)
 	}
diff --git a/frontend/src/components/tasks/AddTask.vue b/frontend/src/components/tasks/AddTask.vue
index 93b6f13b4..0a293906f 100644
--- a/frontend/src/components/tasks/AddTask.vue
+++ b/frontend/src/components/tasks/AddTask.vue
@@ -297,7 +297,7 @@ defineExpose({
 
 	.control {
 		flex-shrink: 0;
-		margin-bottom: 0;
+		margin-block-end: 0;
 	}
 }
 
@@ -330,7 +330,7 @@ defineExpose({
 }
 
 .add-task-button {
-	height: 100% !important;
+	block-size: 100% !important;
 
 	@media screen and (max-width: $tablet) {
 		.button-text {
diff --git a/frontend/src/components/tasks/GanttChart.vue b/frontend/src/components/tasks/GanttChart.vue
index 5e418f273..535bf6c23 100644
--- a/frontend/src/components/tasks/GanttChart.vue
+++ b/frontend/src/components/tasks/GanttChart.vue
@@ -219,7 +219,7 @@ const dateIsToday = computed(() => (date: Date) => {
 <style lang="scss">
 // Not scoped because we need to style the elements inside the gantt chart component
 .g-gantt-chart {
-	width: max-content;
+	inline-size: max-content;
 }
 
 .g-gantt-row-label {
@@ -243,7 +243,7 @@ const dateIsToday = computed(() => (date: Date) => {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	width: 100%;
+	inline-size: 100%;
 
 	&.today {
 		background: var(--primary);
@@ -258,7 +258,7 @@ const dateIsToday = computed(() => (date: Date) => {
 }
 
 .g-timeaxis {
-	height: auto !important;
+	block-size: auto !important;
 	box-shadow: none !important;
 }
 
@@ -278,8 +278,8 @@ const dateIsToday = computed(() => (date: Date) => {
 
 	&-handle-left,
 	&-handle-right {
-		width: 6px !important;
-		height: 75% !important;
+		inline-size: 6px !important;
+		block-size: 75% !important;
 		opacity: .75 !important;
 		border-radius: $radius !important;
 		margin-block-start: 4px;
diff --git a/frontend/src/components/tasks/TaskForm.vue b/frontend/src/components/tasks/TaskForm.vue
index 88881b799..99bfc9620 100644
--- a/frontend/src/components/tasks/TaskForm.vue
+++ b/frontend/src/components/tasks/TaskForm.vue
@@ -68,9 +68,9 @@ async function createTask() {
 
 <style scoped lang="scss">
 .add-new-task {
-	padding: 1rem .7rem .4rem .7rem;
+	padding: 1rem .7rem .4rem;
 	display: flex;
-	max-width: 450px;
+	max-inline-size: 450px;
 
 	.input {
 		margin-inline-end: .7rem;
diff --git a/frontend/src/components/tasks/partials/AssigneeList.vue b/frontend/src/components/tasks/partials/AssigneeList.vue
index 33467bd2e..4414af8f2 100644
--- a/frontend/src/components/tasks/partials/AssigneeList.vue
+++ b/frontend/src/components/tasks/partials/AssigneeList.vue
@@ -87,8 +87,8 @@ defineEmits<{
 	display: block;
 	border-radius: 100%;
 	font-size: .75rem;
-	width: 18px;
-	height: 18px;
+	inline-size: 18px;
+	block-size: 18px;
 	z-index: 100;
 }
 </style>
diff --git a/frontend/src/components/tasks/partials/Attachments.vue b/frontend/src/components/tasks/partials/Attachments.vue
index 28dc2679c..ebb38491d 100644
--- a/frontend/src/components/tasks/partials/Attachments.vue
+++ b/frontend/src/components/tasks/partials/Attachments.vue
@@ -289,13 +289,13 @@ async function setCoverImage(attachment: IAttachment | null) {
 
 <style lang="scss" scoped>
 .attachments {
-	input[type=file] {
+	input[type="file"] {
 		display: none;
 	}
 
 	@media screen and (max-width: $tablet) {
 		.button {
-			width: 100%;
+			inline-size: 100%;
 		}
 	}
 }
@@ -308,7 +308,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 	display: grid;
 	grid-template-columns: 9rem 1fr;
 	align-items: center;
-	width: 100%;
+	inline-size: 100%;
 	
 	padding: .5rem;
 	
@@ -327,7 +327,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 	display: flex;
 	align-items: center;
 	font-weight: bold;
-	height: 2rem;
+	block-size: 2rem;
 	color: var(--text);
 	text-align: start;
 }
@@ -355,7 +355,7 @@ async function setCoverImage(attachment: IAttachment | null) {
 	inset-block-start: 0;
 	inset-inline-start: 0;
 	inset-block-end: 0;
-	right: 0;
+	inset-inline-end: 0;
 	z-index: 4001; // modal z-index is 4000
 	text-align: center;
 
@@ -371,9 +371,9 @@ async function setCoverImage(attachment: IAttachment | null) {
 	inset-inline-end: 0;
 
 	.icon {
-		width: 100%;
+		inline-size: 100%;
 		font-size: 5rem;
-		height: auto;
+		block-size: auto;
 		text-shadow: var(--shadow-md);
 		animation: bounce 2s infinite;
 
@@ -389,8 +389,8 @@ async function setCoverImage(attachment: IAttachment | null) {
 		background: var(--primary);
 		padding: 1rem;
 		color: $white; // Should always be white because of the background, regardless of the theme
-		width: 100%;
-		max-width: 300px;
+		inline-size: 100%;
+		max-inline-size: 300px;
 	}
 }
 
@@ -435,11 +435,11 @@ async function setCoverImage(attachment: IAttachment | null) {
 }
 
 @keyframes bounce {
-	from,
+	0%,
 	20%,
 	53%,
 	80%,
-	to {
+	100% {
 		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 		transform: translate3d(0, 0, 0);
 	}
@@ -461,12 +461,12 @@ async function setCoverImage(attachment: IAttachment | null) {
 }
 
 .preview-column {
-	max-width: 8rem;
-	height: 5.2rem;
+	max-inline-size: 8rem;
+	block-size: 5.2rem;
 }
 
 .attachment-preview {
-	height: 100%;
+	block-size: 100%;
 }
 
 .is-task-cover {
diff --git a/frontend/src/components/tasks/partials/Comments.vue b/frontend/src/components/tasks/partials/Comments.vue
index e84c190ae..8a2d5f419 100644
--- a/frontend/src/components/tasks/partials/Comments.vue
+++ b/frontend/src/components/tasks/partials/Comments.vue
@@ -458,8 +458,8 @@ function getCommentUrl(commentId: string) {
 	img {
 		@media screen and (max-width: $tablet) {
 			display: block;
-			width: 20px;
-			height: 20px;
+			inline-size: 20px;
+			block-size: 20px;
 			padding-inline-end: 0;
 			margin-inline-end: .5rem;
 		}
@@ -494,7 +494,7 @@ function getCommentUrl(commentId: string) {
 }
 
 .media-content {
-	width: calc(100% - 48px - 2rem);
+	inline-size: calc(100% - 48px - 2rem);
 }
 
 .comments-container {
diff --git a/frontend/src/components/tasks/partials/DeferTask.vue b/frontend/src/components/tasks/partials/DeferTask.vue
index 202011278..b79228f5f 100644
--- a/frontend/src/components/tasks/partials/DeferTask.vue
+++ b/frontend/src/components/tasks/partials/DeferTask.vue
@@ -135,14 +135,14 @@ async function updateDueDate() {
 $defer-task-max-width: 350px + 100px;
 
 .defer-task {
-	width: 100%;
-	max-width: $defer-task-max-width;
+	inline-size: 100%;
+	max-inline-size: $defer-task-max-width;
 
 	@media screen and (max-width: ($defer-task-max-width)) {
 		inset-inline-start: .5rem;
 		inset-inline-end: .5rem;
-		max-width: 100%;
-		width: calc(100vw - 1rem - 2rem);
+		max-inline-size: 100%;
+		inline-size: calc(100vw - 1rem - 2rem);
 	}
 }
 
@@ -162,11 +162,11 @@ $defer-task-max-width: 350px + 100px;
 		box-shadow: none;
 
 		@media screen and (max-width: ($defer-task-max-width)) {
-			max-width: 100%;
+			max-inline-size: 100%;
 		}
 
 		span {
-			width: auto !important;
+			inline-size: auto !important;
 		}
 
 	}
diff --git a/frontend/src/components/tasks/partials/FilePreview.vue b/frontend/src/components/tasks/partials/FilePreview.vue
index 61858912c..2aa247baf 100644
--- a/frontend/src/components/tasks/partials/FilePreview.vue
+++ b/frontend/src/components/tasks/partials/FilePreview.vue
@@ -40,7 +40,7 @@ watchEffect(async () => {
 
 <style scoped lang="scss">
 img {
-	width: 100%;
+	inline-size: 100%;
 	border-radius: $radius;
 	object-fit: cover;
 }
diff --git a/frontend/src/components/tasks/partials/Heading.vue b/frontend/src/components/tasks/partials/Heading.vue
index bbd242cf5..b3c780ee4 100644
--- a/frontend/src/components/tasks/partials/Heading.vue
+++ b/frontend/src/components/tasks/partials/Heading.vue
@@ -157,11 +157,11 @@ async function cancel(element: HTMLInputElement) {
 
 .title.input {
 	// 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
-	min-height: calc(1.8rem * 1.125 + .6rem + 2px);
+	min-block-size: calc(1.8rem * 1.125 + .6rem + 2px);
 	margin-inline-end: 0;
 
 	@media screen and (max-width: $tablet) {
-		margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
+		margin: 0 -.3rem .5rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
 	}
 }
 
@@ -171,8 +171,8 @@ async function cancel(element: HTMLInputElement) {
 }
 
 .color-bubble {
-	height: .75rem;
-	width: .75rem;
+	block-size: .75rem;
+	inline-size: .75rem;
 }
 
 .close {
diff --git a/frontend/src/components/tasks/partials/KanbanCard.vue b/frontend/src/components/tasks/partials/KanbanCard.vue
index 46ede56a0..16a76c47e 100644
--- a/frontend/src/components/tasks/partials/KanbanCard.vue
+++ b/frontend/src/components/tasks/partials/KanbanCard.vue
@@ -228,8 +228,8 @@ $task-background: var(--white);
 	overflow: hidden;
 
 	&.loader-container.is-loading::after {
-		width: 1.5rem;
-		height: 1.5rem;
+		inline-size: 1.5rem;
+		block-size: 1.5rem;
 		inset-block-start: calc(50% - .75rem);
 		inset-inline-start: calc(50% - .75rem);
 		border-width: 2px;
@@ -243,9 +243,10 @@ $task-background: var(--white);
 
 
 	.due-date {
-		float: right;
+		float: inline-end;
 		display: flex;
 		align-items: center;
+		padding: 0 .25rem;
 
 		.icon {
 			margin-inline-end: .25rem;
@@ -303,7 +304,7 @@ $task-background: var(--white);
 			padding: 0 .5rem 0 .25rem;
 
 			.icon {
-				height: 1rem;
+				block-size: 1rem;
 				padding: 0 .25rem;
 				margin-block-start: 0;
 			}
@@ -318,10 +319,6 @@ $task-background: var(--white);
 		padding: 0 .5rem;
 	}
 
-	.due-date {
-		padding: 0 .25rem;
-	}
-
 	.task-id {
 		color: var(--grey-500);
 		font-size: .8rem;
@@ -334,7 +331,7 @@ $task-background: var(--white);
 	}
 
 	span {
-		width: auto;
+		inline-size: auto;
 	}
 
 	&.has-custom-background-color {
@@ -382,8 +379,8 @@ $task-background: var(--white);
 }
 
 .task-progress {
-	margin: 8px 0 0 0;
-	width: 100%;
-	height: 0.5rem;
+	margin: 8px 0 0;
+	inline-size: 100%;
+	block-size: 0.5rem;
 }
 </style>
diff --git a/frontend/src/components/tasks/partials/PriorityLabel.vue b/frontend/src/components/tasks/partials/PriorityLabel.vue
index 314c07d47..e5a7c106f 100644
--- a/frontend/src/components/tasks/partials/PriorityLabel.vue
+++ b/frontend/src/components/tasks/partials/PriorityLabel.vue
@@ -53,7 +53,7 @@ const minimumPriority = computed(() => {
 <style lang="scss" scoped>
 .high-priority {
 	color: var(--danger);
-	width: auto !important; // To override the width set in tasks
+	inline-size: auto !important; // To override the width set in tasks
 }
 
 .not-so-high {
@@ -66,7 +66,7 @@ const minimumPriority = computed(() => {
 
 .icon {
 	vertical-align: top;
-	width: auto !important;
+	inline-size: auto !important;
 	padding-inline-end: .5rem;
 }
 </style>
diff --git a/frontend/src/components/tasks/partials/RelatedTasks.vue b/frontend/src/components/tasks/partials/RelatedTasks.vue
index 0dd7774e9..efd7b58a5 100644
--- a/frontend/src/components/tasks/partials/RelatedTasks.vue
+++ b/frontend/src/components/tasks/partials/RelatedTasks.vue
@@ -401,7 +401,7 @@ async function toggleTaskDone(task: ITask) {
 
 .different-project {
 	color: var(--grey-500);
-	width: auto;
+	inline-size: auto;
 }
 
 .title {
@@ -461,7 +461,7 @@ async function toggleTaskDone(task: ITask) {
 //  of the component.
 .task-done-checkbox {
 	padding: 0;
-	height: 18px; // The exact height of the checkbox in the container
+	block-size: 18px; // The exact height of the checkbox in the container
 	margin-inline-end: .75rem;
 }
 </style>
diff --git a/frontend/src/components/tasks/partials/ReminderDetail.vue b/frontend/src/components/tasks/partials/ReminderDetail.vue
index c784e3984..ec3c9dcf9 100644
--- a/frontend/src/components/tasks/partials/ReminderDetail.vue
+++ b/frontend/src/components/tasks/partials/ReminderDetail.vue
@@ -265,11 +265,11 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
 }
 
 .reminder-options-popup {
-	width: 310px;
+	inline-size: 310px;
 	z-index: 99;
 
 	@media screen and (max-width: ($tablet)) {
-		width: calc(100vw - 5rem);
+		inline-size: calc(100vw - 5rem);
 	}
 
 	.option-button {
@@ -286,7 +286,7 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
 
 .reminder__close-button {
 	margin: .5rem;
-	width: calc(100% - 1rem);
+	inline-size: calc(100% - 1rem);
 }
 
 .currently-active {
diff --git a/frontend/src/components/tasks/partials/ReminderPeriod.vue b/frontend/src/components/tasks/partials/ReminderPeriod.vue
index 5da6780cb..59d411acb 100644
--- a/frontend/src/components/tasks/partials/ReminderPeriod.vue
+++ b/frontend/src/components/tasks/partials/ReminderPeriod.vue
@@ -137,8 +137,8 @@ function updateData() {
 	padding: .5rem .5rem 0;
 
 	.input, .select select {
-		width: 100% !important;
-		height: auto;
+		inline-size: 100% !important;
+		block-size: auto;
 	}
 }
 </style>
diff --git a/frontend/src/components/tasks/partials/Reminders.vue b/frontend/src/components/tasks/partials/Reminders.vue
index 10dca5399..93cdbf077 100644
--- a/frontend/src/components/tasks/partials/Reminders.vue
+++ b/frontend/src/components/tasks/partials/Reminders.vue
@@ -115,13 +115,13 @@ function removeReminderByIndex(index: number) {
 		color: var(--danger);
 	}
 
-	&::last-child {
+	&:last-child {
 		margin-block-end: 0.75rem;
 	}
 }
 
 .reminder-detail {
-	width: 100%;
+	inline-size: 100%;
 }
 
 .remove {
diff --git a/frontend/src/components/tasks/partials/RepeatAfter.vue b/frontend/src/components/tasks/partials/RepeatAfter.vue
index ec6065dea..3e2854f86 100644
--- a/frontend/src/components/tasks/partials/RepeatAfter.vue
+++ b/frontend/src/components/tasks/partials/RepeatAfter.vue
@@ -166,6 +166,6 @@ p {
 }
 
 .input {
-	min-width: 2rem;
+	min-inline-size: 2rem;
 }
 </style>
diff --git a/frontend/src/components/tasks/partials/SingleTaskInProject.vue b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
index 9eae5b6cf..11c2e6da7 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInProject.vue
+++ b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
@@ -438,7 +438,7 @@ defineExpose({
 	}
 
 	.task-project {
-		width: auto;
+		inline-size: auto;
 		color: var(--grey-400);
 		font-size: .9rem;
 		white-space: nowrap;
@@ -448,8 +448,8 @@ defineExpose({
 		border-radius: 50%;
 		vertical-align: bottom;
 		margin-inline-start: 5px;
-		height: 27px;
-		width: 27px;
+		block-size: 27px;
+		inline-size: 27px;
 	}
 
 	.project-task-icon {
@@ -473,7 +473,7 @@ defineExpose({
 	.favorite {
 		opacity: 1;
 		text-align: center;
-		width: 27px;
+		inline-size: 27px;
 		transition: opacity $transition, color $transition;
 		border-radius: $radius;
 
@@ -502,7 +502,7 @@ defineExpose({
 	}
 
 	:deep(.fancy-checkbox) {
-		height: 18px;
+		block-size: 18px;
 		padding-block-start: 0;
 		padding-inline-end: .5rem;
 
@@ -518,7 +518,7 @@ defineExpose({
 
 	span.parent-tasks {
 		color: var(--grey-500);
-		width: auto;
+		inline-size: auto;
 	}
 
 	.show-project .parent-tasks {
@@ -534,16 +534,16 @@ defineExpose({
 	}
 
 	.settings {
-		float: right;
-		width: 24px;
+		float: inline-end;
+		inline-size: 24px;
 		cursor: pointer;
 	}
 
 	&.loader-container.is-loading:after {
 		inset-block-start: calc(50% - 1rem);
 		inset-inline-start: calc(50% - 1rem);
-		width: 2rem;
-		height: 2rem;
+		inline-size: 2rem;
+		block-size: 2rem;
 		border-inline-start-color: var(--grey-300);
 		border-block-end-color: var(--grey-300);
 	}
diff --git a/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue b/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue
index 8c89393cf..9df5a4652 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue
+++ b/frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue
@@ -156,7 +156,7 @@ const project = computed(() => projectStore.projects[props.task.projectId])
 	}
 
 	.task-project {
-		width: auto;
+		inline-size: auto;
 		color: var(--grey-400);
 		font-size: .9rem;
 		white-space: nowrap;
@@ -166,8 +166,8 @@ const project = computed(() => projectStore.projects[props.task.projectId])
 		border-radius: 50%;
 		vertical-align: bottom;
 		margin-inline-start: .5rem;
-		height: 21px;
-		width: 21px;
+		block-size: 21px;
+		inline-size: 21px;
 	}
 
 	.project-task-icon {
@@ -195,7 +195,7 @@ const project = computed(() => projectStore.projects[props.task.projectId])
 
 	span.parent-tasks {
 		color: var(--grey-500);
-		width: auto;
+		inline-size: auto;
 		margin-inline-start: .25rem;
 	}
 }
diff --git a/frontend/src/views/migrate/Migration.vue b/frontend/src/views/migrate/Migration.vue
index c63188624..da392e1a9 100644
--- a/frontend/src/views/migrate/Migration.vue
+++ b/frontend/src/views/migrate/Migration.vue
@@ -46,7 +46,7 @@ const availableMigrators = computed(() => configStore.availableMigrators
 
 .migration-service-link {
     display: inline-block;
-    width: 100px;
+    inline-size: 100px;
     text-transform: capitalize;
     margin-inline-end: 1rem;
 }
diff --git a/frontend/src/views/migrate/MigrationHandler.vue b/frontend/src/views/migrate/MigrationHandler.vue
index a6104e235..953407a40 100644
--- a/frontend/src/views/migrate/MigrationHandler.vue
+++ b/frontend/src/views/migrate/MigrationHandler.vue
@@ -238,7 +238,7 @@ async function migrate() {
 
 <style lang="scss" scoped>
 .migration-in-progress-container {
-	max-width: 400px;
+	max-inline-size: 400px;
 	margin: 4rem auto 0;
 	text-align: center;
 }
@@ -246,7 +246,7 @@ async function migrate() {
 .migration-in-progress {
 	text-align: center;
 	display: flex;
-	max-width: 400px;
+	max-inline-size: 400px;
 	justify-content: space-between;
 	align-items: center;
 	margin-block-end: 2rem;
@@ -254,20 +254,20 @@ async function migrate() {
 
 .logo {
 	display: block;
-	max-height: 100px;
-	max-width: 100px;
+	max-block-size: 100px;
+	max-inline-size: 100px;
 }
 
 .progress-dots {
-	height: 40px;
-	width: 140px;
+	block-size: 40px;
+	inline-size: 140px;
 	overflow: visible;
 
 	span {
 		transition: all 500ms ease;
 		background: var(--grey-500);
-		height: 10px;
-		width: 10px;
+		block-size: 10px;
+		inline-size: 10px;
 		display: inline-block;
 		border-radius: 10px;
 		animation: wave 2s ease infinite;
diff --git a/frontend/src/views/project/ListProjects.vue b/frontend/src/views/project/ListProjects.vue
index 63ff231eb..2a2192537 100644
--- a/frontend/src/views/project/ListProjects.vue
+++ b/frontend/src/views/project/ListProjects.vue
@@ -81,7 +81,7 @@ const projects = computed(() => {
 	gap: 1rem;
 
 	@media screen and (max-width: $tablet) {
-		width: 100%;
+		inline-size: 100%;
 		flex-direction: column;
 		align-items: stretch;
 	}
diff --git a/frontend/src/views/project/settings/ProjectSettingsBackground.vue b/frontend/src/views/project/settings/ProjectSettingsBackground.vue
index 6a755fecf..c8ec2e4b8 100644
--- a/frontend/src/views/project/settings/ProjectSettingsBackground.vue
+++ b/frontend/src/views/project/settings/ProjectSettingsBackground.vue
@@ -268,19 +268,19 @@ async function removeBackground() {
 }
 
 .image-search__image-button {
-	width: 100%;
+	inline-size: 100%;
 }
 
 .image-search__image {
-	width: 100%;
-	height: 100%;
+	inline-size: 100%;
+	block-size: 100%;
 	object-fit: cover;
 }
 
 .image-search__info {
 	position: absolute;
-	bottom: 0;
-	width: 100%;
+	inset-block-end: 0;
+	inline-size: 100%;
 	padding: .25rem 0;
 	opacity: 0;
 	text-align: center;
@@ -297,6 +297,6 @@ async function removeBackground() {
 .is-load-more-button {
 	margin: 1rem auto 0 !important;
 	display: block;
-	width: 200px;
+	inline-size: 200px;
 }
 </style>
diff --git a/frontend/src/views/project/settings/ProjectSettingsWebhooks.vue b/frontend/src/views/project/settings/ProjectSettingsWebhooks.vue
index de5a1fe8f..4244b0cad 100644
--- a/frontend/src/views/project/settings/ProjectSettingsWebhooks.vue
+++ b/frontend/src/views/project/settings/ProjectSettingsWebhooks.vue
@@ -273,6 +273,6 @@ function validateSelectedEvents() {
 <style lang="scss" scoped>
 .available-events-check {
 	margin-inline-end: .5rem;
-	width: 12.5rem;
+	inline-size: 12.5rem;
 }
 </style>
diff --git a/frontend/src/views/tasks/TaskDetailView.vue b/frontend/src/views/tasks/TaskDetailView.vue
index d1984dfd8..e5c80dff3 100644
--- a/frontend/src/views/tasks/TaskDetailView.vue
+++ b/frontend/src/views/tasks/TaskDetailView.vue
@@ -984,7 +984,7 @@ function setRelatedTasksActive() {
 	color: var(--text);
 	background-color: var(--site-background) !important;
 
-	@media screen and (max-width: calc(#{$desktop} + 1px)) {
+	@media screen and (width <= calc(#{$desktop} + 1px)) {
 		border-radius: 0;
 	}
 }
@@ -1028,7 +1028,7 @@ h3 .button {
 }
 
 :deep(.datepicker) {
-	width: 100%;
+	inline-size: 100%;
 
 	.show {
 		color: var(--text);
@@ -1037,7 +1037,7 @@ h3 .button {
 		border-radius: $radius;
 		display: block;
 		margin: .1rem 0;
-		width: 100%;
+		inline-size: 100%;
 		text-align: start;
 
 		&:hover {
@@ -1076,7 +1076,7 @@ h3 .button {
 .assignees {
 	:deep(.multiselect) {
 		.input-wrapper {
-			&:not(:focus-within):not(:hover) {
+			&:not(:focus-within, :hover) {
 				background: transparent;
 				border-color: transparent;
 			}
@@ -1140,7 +1140,7 @@ h3 .button {
 	}
 
 	.button {
-		width: 100%;
+		inline-size: 100%;
 		margin-block-end: .5rem;
 		justify-content: left;
 
@@ -1157,7 +1157,7 @@ h3 .button {
 	}
 	// this is the moment when the fixed close button is outside the modal
 	// => we can fill up the space again
-	@media screen and (min-width: calc(#{$desktop} + 84px)) {
+	@media screen and (width >= calc(#{$desktop} + 84px)) {
 		inset-block-start: 0;
 	}
 }
@@ -1168,7 +1168,7 @@ h3 .button {
 
 .detail-content {
 	@media print {
-		width: 100% !important;
+		inline-size: 100% !important;
 	}
 }
 
diff --git a/frontend/src/views/user/Settings.vue b/frontend/src/views/user/Settings.vue
index efc6674f3..7f6870aaf 100644
--- a/frontend/src/views/user/Settings.vue
+++ b/frontend/src/views/user/Settings.vue
@@ -131,11 +131,11 @@ const extraSettingsLinks = computed(() => authStore.settings.extraSettingsLinks)
 }
 
 .navigation {
-	width: 25%;
+	inline-size: 25%;
 	padding-inline-end: 1rem;
 
 	@media screen and (max-width: $tablet) {
-		width: 100%;
+		inline-size: 100%;
 		padding-inline-start: 0;
 	}
 }
@@ -144,7 +144,7 @@ const extraSettingsLinks = computed(() => authStore.settings.extraSettingsLinks)
 	display: block;
 	padding: .5rem;
 	color: var(--text);
-	width: 100%;
+	inline-size: 100%;
 	border-inline-start: 3px solid transparent;
 
 	&:hover,
@@ -155,10 +155,10 @@ const extraSettingsLinks = computed(() => authStore.settings.extraSettingsLinks)
 }
 
 .view {
-	width: 75%;
+	inline-size: 75%;
 
 	@media screen and (max-width: $tablet) {
-		width: 100%;
+		inline-size: 100%;
 		padding-inline-start: 0;
 		padding-block-start: 1rem;
 	}
diff --git a/frontend/src/views/user/settings/Avatar.vue b/frontend/src/views/user/settings/Avatar.vue
index 27aff4927..ce446daf3 100644
--- a/frontend/src/views/user/settings/Avatar.vue
+++ b/frontend/src/views/user/settings/Avatar.vue
@@ -171,7 +171,7 @@ function cropAvatar() {
 
 <style lang="scss">
 .cropper {
-	height: 80vh;
+	block-size: 80vh;
 	background: transparent;
 }
 
diff --git a/frontend/src/views/user/settings/DataExport.vue b/frontend/src/views/user/settings/DataExport.vue
index b37fca8dc..fc745d145 100644
--- a/frontend/src/views/user/settings/DataExport.vue
+++ b/frontend/src/views/user/settings/DataExport.vue
@@ -132,7 +132,7 @@ async function requestDataExport() {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	width: 100%;
+	inline-size: 100%;
 	gap: .5rem;
 	
 	> p {
@@ -148,7 +148,7 @@ async function requestDataExport() {
 		}
 		
 		> :deep(.button) {
-			width: 100%;
+			inline-size: 100%;
 		}
 	}
 }
diff --git a/frontend/src/views/user/settings/General.vue b/frontend/src/views/user/settings/General.vue
index 328103d29..d758470f5 100644
--- a/frontend/src/views/user/settings/General.vue
+++ b/frontend/src/views/user/settings/General.vue
@@ -540,11 +540,11 @@ async function updateSettings() {
 
 <style scoped>
 .select select {
-	width: 100%;
+	inline-size: 100%;
 }
 
 .timezone-select {
-	min-width: 200px;
+	min-inline-size: 200px;
 	flex-grow: 1;
 }
 
@@ -571,7 +571,7 @@ async function updateSettings() {
 
 .sticky-save {
 	position: sticky;
-	bottom: 0;
+	inset-block-end: 0;
 	padding: .25rem 1rem 1rem;
 }
 </style>