From 71d326e434ff21cbbda7ded1e48993656730d089 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Fri, 19 Apr 2024 12:45:21 -0400
Subject: [PATCH] Styling fixes

---
 src/lib/components/ContentLayout.svelte |  2 +
 src/routes/app/add-ons/+page.svelte     | 66 ++++++++++++++-----------
 2 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/src/lib/components/ContentLayout.svelte b/src/lib/components/ContentLayout.svelte
index 4aa822207..35c9beda9 100644
--- a/src/lib/components/ContentLayout.svelte
+++ b/src/lib/components/ContentLayout.svelte
@@ -30,6 +30,7 @@
     width: 100%;
     position: sticky;
     top: 0;
+    z-index: 2;
     padding: 0.625rem;
   }
   main {
@@ -44,6 +45,7 @@
     width: 100%;
     position: sticky;
     bottom: 0;
+    z-index: 2;
     padding: 0.625rem;
   }
 </style>
diff --git a/src/routes/app/add-ons/+page.svelte b/src/routes/app/add-ons/+page.svelte
index 41efbbfee..3c5e244ef 100644
--- a/src/routes/app/add-ons/+page.svelte
+++ b/src/routes/app/add-ons/+page.svelte
@@ -49,6 +49,7 @@
     Array.from(($page.url as URL).searchParams.entries()).find(
       ([_, value]) => value === "true",
     )?.[0] ?? "all";
+  $: showTip = ["active", "featured", "premium"].includes(active);
 
   $: query = ($page.url as URL).searchParams.get("query") ?? "";
 </script>
@@ -61,34 +62,37 @@
       <PageToolbar slot="header">
         <Search name="query" {query} on:submit={search} slot="center" />
       </PageToolbar>
-
-      {#if active === "active"}
-        <Tip
-          --background-color="var(--orange-light)"
-          --border-color="var(--orange)"
-          --fill="var(--orange-dark)"
-        >
-          <Pin size={1.75} slot="icon" />
-          {$_("addonBrowserDialog.pinnedTip")}
-        </Tip>
-      {:else if active === "featured"}
-        <Tip
-          --background-color="var(--yellow-light)"
-          --border-color="var(--yellow)"
-          --fill="var(--yellow-dark)"
-        >
-          <Star size={1.75} slot="icon" />
-          {$_("addonBrowserDialog.featuredTip")}
-        </Tip>
-      {:else if active === "premium"}
-        <Tip
-          --background-color="var(--green-light)"
-          --border-color="var(--green)"
-          --fill="var(--green-dark)"
-        >
-          <Premium size={1.75} slot="icon" />
-          {$_("addonBrowserDialog.premiumTip")}
-        </Tip>
+      {#if showTip}
+        <div class="tip">
+          {#if active === "active"}
+            <Tip
+              --background-color="var(--orange-light)"
+              --border-color="var(--orange)"
+              --fill="var(--orange-dark)"
+            >
+              <Pin size={1.75} slot="icon" />
+              {$_("addonBrowserDialog.pinnedTip")}
+            </Tip>
+          {:else if active === "featured"}
+            <Tip
+              --background-color="var(--yellow-light)"
+              --border-color="var(--yellow)"
+              --fill="var(--yellow-dark)"
+            >
+              <Star size={1.75} slot="icon" />
+              {$_("addonBrowserDialog.featuredTip")}
+            </Tip>
+          {:else if active === "premium"}
+            <Tip
+              --background-color="var(--green-light)"
+              --border-color="var(--green)"
+              --fill="var(--green-dark)"
+            >
+              <Premium size={1.75} slot="icon" />
+              {$_("addonBrowserDialog.premiumTip")}
+            </Tip>
+          {/if}
+        </div>
       {/if}
       {#await data.addons}
         <Empty icon={Hourglass24}>Loading…</Empty>
@@ -119,3 +123,9 @@
     </ContentLayout>
   </svelte:fragment>
 </MainLayout>
+
+<style>
+  .tip {
+    margin: 1rem;
+  }
+</style>