fix: tabs background width 0

This commit is contained in:
sethburkart123
2024-09-04 13:22:17 +10:00
parent 19102f9bcd
commit 89f2743475
2 changed files with 7 additions and 10 deletions
@@ -53,12 +53,11 @@
</script> </script>
<div bind:this={containerRef} class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4 tab-width-container"> <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"> <div class="relative flex">
<MotionDiv <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) }} animate={{ x: calcXPos(hoveredTab) }}
style="width: var(--tab-width)"
transition={springTransition} transition={springTransition}
/> />
{#each tabs as { title }, index} {#each tabs as { title }, index}
@@ -88,9 +87,3 @@
</div> </div>
</MotionDiv> </MotionDiv>
</div> </div>
<style>
.tab-width {
width: var(--tab-width);
}
</style>
+4
View File
@@ -15,3 +15,7 @@
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
.tab-width {
width: var(--tab-width);
}