From cca40c7d6035bcf0c4eed8d5ae0c94959d82377e Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Sun, 7 Apr 2024 11:39:02 +0200
Subject: [PATCH] fix loadingIndicator clipping top left corner

---
 theseus_gui/src/App.vue                           |  7 +++----
 .../src/components/modrinth-loading-indicator.js  | 15 ++-------------
 2 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/theseus_gui/src/App.vue b/theseus_gui/src/App.vue
index a93e3c66d..4187eda43 100644
--- a/theseus_gui/src/App.vue
+++ b/theseus_gui/src/App.vue
@@ -373,10 +373,7 @@ command_listener(async (e) => {
         </section>
       </div>
       <div class="router-view">
-        <ModrinthLoadingIndicator
-          offset-height="var(--appbar-height)"
-          offset-width="var(--sidebar-width)"
-        />
+        <ModrinthLoadingIndicator />
         <RouterView v-slot="{ Component }">
           <template v-if="Component">
             <Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
@@ -474,6 +471,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/theseus_gui/src/components/modrinth-loading-indicator.js b/theseus_gui/src/components/modrinth-loading-indicator.js
index adc9bf98c..77040a82b 100644
--- a/theseus_gui/src/components/modrinth-loading-indicator.js
+++ b/theseus_gui/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,