From 89f27434751a2e454446ab6ba9b3397730262d66 Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Wed, 4 Sep 2024 13:22:17 +1000
Subject: [PATCH] fix: tabs background width 0

---
 .../components/TabbedContainer.svelte               | 13 +++----------
 src/svelte-interface/index.css                      |  4 ++++
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/svelte-interface/components/TabbedContainer.svelte b/src/svelte-interface/components/TabbedContainer.svelte
index 339a532c..cd0f3c67 100644
--- a/src/svelte-interface/components/TabbedContainer.svelte
+++ b/src/svelte-interface/components/TabbedContainer.svelte
@@ -53,12 +53,11 @@
 </script>
 
 <div bind:this={containerRef} class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4 tab-width-container">
-  <div class="hidden tab-width"></div>
+  <div class="hidden"></div>
   <div class="relative flex">
     <MotionDiv
-      class="absolute top-0 left-0 z-0 h-full bg-[#DDDDDD] dark:bg-[#38373D] rounded-full opacity-40"
+      class="absolute top-0 left-0 z-0 h-full bg-[#DDDDDD] dark:bg-[#38373D] rounded-full opacity-40 tab-width"
       animate={{ x: calcXPos(hoveredTab) }}
-      style="width: var(--tab-width)"
       transition={springTransition}
     />
     {#each tabs as { title }, index}
@@ -87,10 +86,4 @@
       {/each}
     </div>
   </MotionDiv>
-</div>
-
-<style>
-  .tab-width {
-    width: var(--tab-width);
-  }
-</style>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/svelte-interface/index.css b/src/svelte-interface/index.css
index 51d129cb..51263b33 100644
--- a/src/svelte-interface/index.css
+++ b/src/svelte-interface/index.css
@@ -14,4 +14,8 @@
 
 ::-webkit-scrollbar {
   display: none;
+}
+
+.tab-width {
+  width: var(--tab-width);
 }
\ No newline at end of file