diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index d7404b1a9..3111c7d96 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -368,10 +368,7 @@ command_listener(async (e) => {
-
+
@@ -470,6 +467,8 @@ command_listener(async (e) => {
overflow-x: hidden;
background-color: var(--color-bg);
border-top-left-radius: var(--radius-xl);
+
+ position: relative;
}
}
}
diff --git a/apps/app-frontend/src/components/modrinth-loading-indicator.js b/apps/app-frontend/src/components/modrinth-loading-indicator.js
index 2858df36a..d670c9ffe 100644
--- a/apps/app-frontend/src/components/modrinth-loading-indicator.js
+++ b/apps/app-frontend/src/components/modrinth-loading-indicator.js
@@ -20,14 +20,6 @@ export default defineComponent({
default:
'repeating-linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) 100%)',
},
- offsetWidth: {
- type: String,
- default: '208px',
- },
- offsetHeight: {
- type: String,
- default: '52px',
- },
},
setup(props, { slots }) {
const indicator = useLoadingIndicator({
@@ -52,12 +44,9 @@ export default defineComponent({
'div',
{
style: {
- position: 'fixed',
- top: props.offsetHeight,
- right: 0,
- left: props.offsetWidth,
+ position: 'absolute',
pointerEvents: 'none',
- width: `calc((100vw - ${props.offsetWidth}) * ${indicator.progress.value / 100})`,
+ width: `calc(100% * ${indicator.progress.value / 100})`,
height: `${props.height}px`,
opacity: indicator.isLoading.value ? 1 : 0,
background: props.color || undefined,