diff --git a/frontend/src/components/home/AppHeader.vue b/frontend/src/components/home/AppHeader.vue
index f030d6db6..23f61ad54 100644
--- a/frontend/src/components/home/AppHeader.vue
+++ b/frontend/src/components/home/AppHeader.vue
@@ -156,7 +156,7 @@ $user-dropdown-width-mobile: 5rem;
--navbar-icon-size: 1.25rem;
position: fixed;
- top: 0;
+ inset-block-start: 0;
inset-inline-start: 0;
right: 0;
diff --git a/frontend/src/components/home/ContentAuth.vue b/frontend/src/components/home/ContentAuth.vue
index 57f935ffc..03672723a 100644
--- a/frontend/src/components/home/ContentAuth.vue
+++ b/frontend/src/components/home/ContentAuth.vue
@@ -132,7 +132,7 @@ projectStore.loadAllProjects()
diff --git a/frontend/src/components/home/MenuButton.vue b/frontend/src/components/home/MenuButton.vue
index dfc991581..cd70af382 100644
--- a/frontend/src/components/home/MenuButton.vue
+++ b/frontend/src/components/home/MenuButton.vue
@@ -46,7 +46,7 @@ $size: $lineWidth + 1rem;
}
&::before {
- top: 50%;
+ inset-block-start: 50%;
transform: $transformX translateY(-0.4rem)
}
diff --git a/frontend/src/components/home/Navigation.vue b/frontend/src/components/home/Navigation.vue
index ebf0690b3..264a32f93 100644
--- a/frontend/src/components/home/Navigation.vue
+++ b/frontend/src/components/home/Navigation.vue
@@ -156,7 +156,7 @@ const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
padding: 1rem 0;
transition: transform $transition-duration ease-in;
position: fixed;
- top: $navbar-height;
+ inset-block-start: $navbar-height;
bottom: 0;
inset-inline-start: 0;
transform: translateX(-100%);
@@ -170,7 +170,7 @@ const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
}
@media screen and (max-width: $tablet) {
- top: 0;
+ inset-block-start: 0;
width: 70vw;
z-index: 20;
}
diff --git a/frontend/src/components/input/Multiselect.vue b/frontend/src/components/input/Multiselect.vue
index 0a81a4114..82cec4b53 100644
--- a/frontend/src/components/input/Multiselect.vue
+++ b/frontend/src/components/input/Multiselect.vue
@@ -439,7 +439,7 @@ function focus() {
position: relative;
.control.is-loading::after {
- top: .75rem;
+ inset-block-start: .75rem;
}
&.is-disabled {
diff --git a/frontend/src/components/input/Password.vue b/frontend/src/components/input/Password.vue
index e99fb6809..1bf04ba9d 100644
--- a/frontend/src/components/input/Password.vue
+++ b/frontend/src/components/input/Password.vue
@@ -87,7 +87,7 @@ function handleInput(e: Event) {
.password-field-type-toggle {
position: absolute;
color: var(--grey-400);
- top: 50%;
+ inset-block-start: 50%;
right: 1rem;
transform: translateY(-50%);
}
diff --git a/frontend/src/components/input/editor/TipTap.vue b/frontend/src/components/input/editor/TipTap.vue
index 81e7474f5..cfb4942ca 100644
--- a/frontend/src/components/input/editor/TipTap.vue
+++ b/frontend/src/components/input/editor/TipTap.vue
@@ -929,7 +929,7 @@ watch(
content: '';
inset-inline-start: 0;
right: 0;
- top: 0;
+ inset-block-start: 0;
bottom: 0;
background: rgba(200, 200, 255, 0.4);
pointer-events: none;
@@ -938,7 +938,7 @@ watch(
.column-resize-handle {
position: absolute;
right: -2px;
- top: 0;
+ inset-block-start: 0;
bottom: -2px;
width: 4px;
background-color: #adf;
diff --git a/frontend/src/components/misc/Dropdown.vue b/frontend/src/components/misc/Dropdown.vue
index a744e74d1..cd2bfb7d0 100644
--- a/frontend/src/components/misc/Dropdown.vue
+++ b/frontend/src/components/misc/Dropdown.vue
@@ -95,7 +95,7 @@ onClickOutside(dropdown, (e) => {
min-width: 12rem;
padding-block-start: 4px;
position: absolute;
- top: 100%;
+ inset-block-start: 100%;
z-index: 20;
display: block;
inset-inline-start: auto;
diff --git a/frontend/src/components/misc/Loading.vue b/frontend/src/components/misc/Loading.vue
index c96b35d46..43f6c6b01 100644
--- a/frontend/src/components/misc/Loading.vue
+++ b/frontend/src/components/misc/Loading.vue
@@ -33,7 +33,7 @@ withDefaults(defineProps<{
&.is-loading::after {
width: 3rem;
height: 3rem;
- top: calc(50% - 1.5rem);
+ 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 e717bcb08..a39a5a42d 100644
--- a/frontend/src/components/misc/Modal.vue
+++ b/frontend/src/components/misc/Modal.vue
@@ -130,7 +130,7 @@ $modal-width: 1024px;
.modal-mask {
position: fixed;
z-index: 4000;
- top: 0;
+ inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
@@ -152,7 +152,7 @@ $modal-width: 1024px;
.hint-modal .modal-content {
text-align: center;
position: absolute;
- top: 50%;
+ inset-block-start: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%);
@@ -216,20 +216,20 @@ $modal-width: 1024px;
.close {
$close-button-padding: 26px;
position: fixed;
- top: .5rem;
+ inset-block-start: .5rem;
right: $close-button-padding;
color: var(--white);
font-size: 2rem;
@media screen and (min-width: $desktop) and (max-width: calc(#{$desktop } + #{$close-button-min-space})) {
- top: calc(5px + $modal-margin);
+ inset-block-start: calc(5px + $modal-margin);
right: 50%;
// we align the close button to the modal until there is enough space outside for it
transform: translateX(calc((#{$modal-width} / 2) - #{$close-button-padding}));
}
@media screen and (min-width: $tablet) and (max-width: #{$desktop + $close-button-min-space}) {
- top: .75rem;
+ inset-block-start: .75rem;
}
}
diff --git a/frontend/src/components/misc/NoAuthWrapper.vue b/frontend/src/components/misc/NoAuthWrapper.vue
index eb986f3e6..fd97c0dbb 100644
--- a/frontend/src/components/misc/NoAuthWrapper.vue
+++ b/frontend/src/components/misc/NoAuthWrapper.vue
@@ -117,7 +117,7 @@ useTitle(() => title.value)
&::before {
content: '';
position: absolute;
- top: 0;
+ inset-block-start: 0;
inset-inline-start: 0;
right: 0;
bottom: 0;
diff --git a/frontend/src/components/misc/Popup.vue b/frontend/src/components/misc/Popup.vue
index 3f8601563..ca9de036f 100644
--- a/frontend/src/components/misc/Popup.vue
+++ b/frontend/src/components/misc/Popup.vue
@@ -83,7 +83,7 @@ onClickOutside(popup, () => close())
height: 0;
overflow: hidden;
position: absolute;
- top: 1rem;
+ inset-block-start: 1rem;
z-index: 100;
&.is-open {
diff --git a/frontend/src/components/misc/Ready.vue b/frontend/src/components/misc/Ready.vue
index 9d25261ea..b061404e2 100644
--- a/frontend/src/components/misc/Ready.vue
+++ b/frontend/src/components/misc/Ready.vue
@@ -81,7 +81,7 @@ const baseStore = useBaseStore()
width: 100vw;
flex-direction: column;
position: fixed;
- top: 0;
+ inset-block-start: 0;
inset-inline-start: 0;
bottom: 0;
right: 0;
diff --git a/frontend/src/components/notifications/Notifications.vue b/frontend/src/components/notifications/Notifications.vue
index 3a6d988b7..974a2e1da 100644
--- a/frontend/src/components/notifications/Notifications.vue
+++ b/frontend/src/components/notifications/Notifications.vue
@@ -208,7 +208,7 @@ async function markAllRead() {
.unread-indicator {
position: absolute;
- top: 1rem;
+ inset-block-start: 1rem;
right: .5rem;
width: .75rem;
height: .75rem;
@@ -221,7 +221,7 @@ async function markAllRead() {
.notifications-list {
position: absolute;
right: 1rem;
- top: calc(100% + 1rem);
+ inset-block-start: calc(100% + 1rem);
max-height: 400px;
overflow-y: auto;
diff --git a/frontend/src/components/project/partials/FilterPopup.vue b/frontend/src/components/project/partials/FilterPopup.vue
index 0352de432..d47654e5e 100644
--- a/frontend/src/components/project/partials/FilterPopup.vue
+++ b/frontend/src/components/project/partials/FilterPopup.vue
@@ -107,7 +107,7 @@ $filter-bubble-size: .75rem;
&::after {
content: '';
position: absolute;
- top: math.div($filter-bubble-size, -2);
+ inset-block-start: math.div($filter-bubble-size, -2);
right: math.div($filter-bubble-size, -2);
width: $filter-bubble-size;
diff --git a/frontend/src/components/project/partials/ProjectCard.vue b/frontend/src/components/project/partials/ProjectCard.vue
index b541c3697..f1c4be26f 100644
--- a/frontend/src/components/project/partials/ProjectCard.vue
+++ b/frontend/src/components/project/partials/ProjectCard.vue
@@ -115,7 +115,7 @@ const textOnlyDescription = computed(() => {
.project-background,
.project-button {
position: absolute;
- top: 0;
+ inset-block-start: 0;
right: 0;
bottom: 0;
inset-inline-start: 0;
@@ -159,7 +159,7 @@ const textOnlyDescription = computed(() => {
.favorite {
position: absolute;
- top: var(--project-card-padding);
+ inset-block-start: var(--project-card-padding);
right: var(--project-card-padding);
transition: opacity $transition, color $transition;
opacity: 1;
diff --git a/frontend/src/components/project/views/ProjectKanban.vue b/frontend/src/components/project/views/ProjectKanban.vue
index fed8dcad8..a33497201 100644
--- a/frontend/src/components/project/views/ProjectKanban.vue
+++ b/frontend/src/components/project/views/ProjectKanban.vue
@@ -789,7 +789,7 @@ function unCollapseBucket(bucket: IBucket) {
diff --git a/frontend/src/components/quick-actions/QuickActions.vue b/frontend/src/components/quick-actions/QuickActions.vue
index 01e559fba..ab135617f 100644
--- a/frontend/src/components/quick-actions/QuickActions.vue
+++ b/frontend/src/components/quick-actions/QuickActions.vue
@@ -599,7 +599,7 @@ function reset() {
// FIXME: changed position should be an option of the modal
:deep(.modal-content) {
- top: 3rem;
+ inset-block-start: 3rem;
transform: translate(-50%, 0);
}
}
diff --git a/frontend/src/components/tasks/partials/AssigneeList.vue b/frontend/src/components/tasks/partials/AssigneeList.vue
index 26a4943e4..33467bd2e 100644
--- a/frontend/src/components/tasks/partials/AssigneeList.vue
+++ b/frontend/src/components/tasks/partials/AssigneeList.vue
@@ -79,7 +79,7 @@ defineEmits<{
.remove-assignee {
position: absolute;
- top: 4px;
+ inset-block-start: 4px;
inset-inline-start: 2px;
color: var(--danger);
background: var(--white);
diff --git a/frontend/src/components/tasks/partials/Attachments.vue b/frontend/src/components/tasks/partials/Attachments.vue
index 7a1cfa63f..d3b7fb4f5 100644
--- a/frontend/src/components/tasks/partials/Attachments.vue
+++ b/frontend/src/components/tasks/partials/Attachments.vue
@@ -352,7 +352,7 @@ async function setCoverImage(attachment: IAttachment | null) {
.dropzone {
position: fixed;
background: hsla(var(--grey-100-hsl), 0.8);
- top: 0;
+ inset-block-start: 0;
inset-inline-start: 0;
bottom: 0;
right: 0;
diff --git a/frontend/src/components/tasks/partials/Heading.vue b/frontend/src/components/tasks/partials/Heading.vue
index f40ae162d..7941862cf 100644
--- a/frontend/src/components/tasks/partials/Heading.vue
+++ b/frontend/src/components/tasks/partials/Heading.vue
@@ -193,7 +193,7 @@ async function cancel(element: HTMLInputElement) {
display: none;
position: absolute;
right: 1.25rem;
- top: 1.1rem;
+ inset-block-start: 1.1rem;
@media screen and (max-width: $tablet) {
display: block;
diff --git a/frontend/src/components/tasks/partials/KanbanCard.vue b/frontend/src/components/tasks/partials/KanbanCard.vue
index 3426c9beb..46ede56a0 100644
--- a/frontend/src/components/tasks/partials/KanbanCard.vue
+++ b/frontend/src/components/tasks/partials/KanbanCard.vue
@@ -230,7 +230,7 @@ $task-background: var(--white);
&.loader-container.is-loading::after {
width: 1.5rem;
height: 1.5rem;
- top: calc(50% - .75rem);
+ inset-block-start: calc(50% - .75rem);
inset-inline-start: calc(50% - .75rem);
border-width: 2px;
}
diff --git a/frontend/src/components/tasks/partials/ReminderDetail.vue b/frontend/src/components/tasks/partials/ReminderDetail.vue
index 3ad043d31..c784e3984 100644
--- a/frontend/src/components/tasks/partials/ReminderDetail.vue
+++ b/frontend/src/components/tasks/partials/ReminderDetail.vue
@@ -261,7 +261,7 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
}
:deep(.popup) {
- top: unset;
+ inset-block-start: unset;
}
.reminder-options-popup {
diff --git a/frontend/src/components/tasks/partials/SingleTaskInProject.vue b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
index 55e93bdcd..600c25da0 100644
--- a/frontend/src/components/tasks/partials/SingleTaskInProject.vue
+++ b/frontend/src/components/tasks/partials/SingleTaskInProject.vue
@@ -540,7 +540,7 @@ defineExpose({
}
&.loader-container.is-loading:after {
- top: calc(50% - 1rem);
+ inset-block-start: calc(50% - 1rem);
inset-inline-start: calc(50% - 1rem);
width: 2rem;
height: 2rem;
@@ -558,7 +558,7 @@ defineExpose({
background-color: var(--white);
box-shadow: var(--shadow-lg);
color: var(--text);
- top: unset;
+ inset-block-start: unset;
&.is-open {
padding: 1rem;
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 2775f775c..235ed93e9 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -33,7 +33,7 @@ const router = createRouter({
// Otherwise just scroll to the top
return {
'inset-inline-start': 0,
- top: 0,
+ 'inset-block-start': 0,
}
},
routes: [
diff --git a/frontend/src/styles/theme/flatpickr.scss b/frontend/src/styles/theme/flatpickr.scss
index 1277f9277..8db7e4d2b 100644
--- a/frontend/src/styles/theme/flatpickr.scss
+++ b/frontend/src/styles/theme/flatpickr.scss
@@ -64,7 +64,7 @@
.numInputWrapper span.arrowDown:after {
border-block-start: 4px solid var(--grey-200) !important;
- top: 40% !important;
+ inset-block-start: 40% !important;
}
.numInputWrapper span svg path {
diff --git a/frontend/src/styles/theme/loading.scss b/frontend/src/styles/theme/loading.scss
index 9f01acce6..c95fce08e 100644
--- a/frontend/src/styles/theme/loading.scss
+++ b/frontend/src/styles/theme/loading.scss
@@ -7,7 +7,7 @@
&::after {
@include loader;
position: absolute;
- top: calc(50% - 2.5rem);
+ inset-block-start: calc(50% - 2.5rem);
inset-inline-start: calc(50% - 2.5rem);
width: 5rem;
height: 5rem;
@@ -18,7 +18,7 @@
&::after {
width: 1.5rem;
height: 1.5rem;
- top: calc(50% - .75rem);
+ inset-block-start: calc(50% - .75rem);
inset-inline-start: calc(50% - .75rem);
border-width: 2px;
}
diff --git a/frontend/src/views/tasks/TaskDetailView.vue b/frontend/src/views/tasks/TaskDetailView.vue
index e46cdf7e3..d1984dfd8 100644
--- a/frontend/src/views/tasks/TaskDetailView.vue
+++ b/frontend/src/views/tasks/TaskDetailView.vue
@@ -1135,7 +1135,7 @@ h3 .button {
.action-buttons {
@media screen and (min-width: $tablet) {
position: sticky;
- top: $navbar-height + 1.5rem;
+ inset-block-start: $navbar-height + 1.5rem;
align-self: flex-start;
}
@@ -1153,12 +1153,12 @@ h3 .button {
.is-modal .action-buttons {
// we need same top margin for the modal close button
@media screen and (min-width: $tablet) {
- top: 6.5rem;
+ inset-block-start: 6.5rem;
}
// 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)) {
- top: 0;
+ inset-block-start: 0;
}
}