From 6c21afaa577bca8fcad9e15a447e3115a59b4e30 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Fri, 28 Feb 2025 03:29:20 -0500
Subject: [PATCH] [F] Fix settings colliding with userbox?

---
 AquaNet/src/app.sass                  |  3 +++
 AquaNet/src/components/Tooltip.svelte |  2 +-
 AquaNet/src/pages/UserHome.svelte     | 24 ++++++++++++++----------
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/AquaNet/src/app.sass b/AquaNet/src/app.sass
index 7678ecbe..0301b28f 100644
--- a/AquaNet/src/app.sass
+++ b/AquaNet/src/app.sass
@@ -318,6 +318,9 @@ main.content
 
     max-width: 400px
 
+.aqua-tooltip
+  z-index: 900
+
 .no-margin
   margin: 0
 
diff --git a/AquaNet/src/components/Tooltip.svelte b/AquaNet/src/components/Tooltip.svelte
index d5316e26..6445f245 100644
--- a/AquaNet/src/components/Tooltip.svelte
+++ b/AquaNet/src/components/Tooltip.svelte
@@ -60,7 +60,7 @@
 
   .tooltip
     position: absolute
-    z-index: 1000
+    z-index: 900
     background: white
     padding: 10px 16px
     border-radius: vars.$border-radius
diff --git a/AquaNet/src/pages/UserHome.svelte b/AquaNet/src/pages/UserHome.svelte
index 7a680aed..455b36e3 100644
--- a/AquaNet/src/pages/UserHome.svelte
+++ b/AquaNet/src/pages/UserHome.svelte
@@ -136,7 +136,7 @@
       <img use:pfp={d.user.aquaUser} alt="" class="pfp" on:error={pfpNotFound}>
       <div class="name-box">
         <div class="name-left">
-          
+
           {#if d.user.aquaUser}
             {#if d.user.aquaUser.displayName}
               <h2>{d.user.aquaUser?.displayName}</h2>
@@ -160,16 +160,17 @@
             {d.user.rival ? t("UserHome.RemoveRival") : t("UserHome.AddRival")}
           </span>
         {/if}
-        {#if me && me.username === username}
-          <a class="setting-icon clickable" use:tooltip={t("UserHome.Settings")} href="/settings">
-            <Icon icon="eos-icons:rotating-gear"/>
-          </a>
-        {/if}
       </div>
       <nav>
         {#each d.validGames as [g, name]}
           <a href={`/u/${username}/${g}`} class:active={game === g}>{name}</a>
         {/each}
+
+        {#if me && me.username === username}
+          <a class="setting-icon clickable" use:tooltip={t("UserHome.Settings")} href="/settings">
+            <Icon icon="eos-icons:rotating-gear"/>
+          </a>
+        {/if}
       </nav>
     </div>
 
@@ -181,9 +182,9 @@
             <span class="profile-bio-text">{d.user.aquaUser?.profileBio}</span>
           </div>
         </div>
-      </div> 
+      </div>
     {/if}
-    
+
     <ChuniUserboxDisplay {game} {username} bind:error={error} />
 
     <div>
@@ -311,7 +312,7 @@
     </div>
 
     <!-- I don't like doing this but it may be preferable to gaslighting the types -->
-     
+
     <RatingComposition title="B30" comp={d.user.ratingComposition.best30} {allMusics} game={game != "auto" ? game : "mai2"}/>
     <RatingComposition title="B35" comp={d.user.ratingComposition.best35} {allMusics} game={game != "auto" ? game : "mai2"}/>
     <RatingComposition title="B15" comp={d.user.ratingComposition.best15} {allMusics} game={game != "auto" ? game : "mai2"}/>
@@ -397,6 +398,9 @@
       display: flex
       align-items: center
 
+      position: relative
+      z-index: 20
+
     .name-box
       flex: 1
       display: flex
@@ -453,7 +457,7 @@
   .info-bottom
     width: max-content
 
-    &.profile-bio-container, 
+    &.profile-bio-container,
     &.profile-bio-container div
       width: 100%