From 0a2c9a8f789680a9869e2096cc620ba93d8ee012 Mon Sep 17 00:00:00 2001
From: alice <122629939+espcaa@users.noreply.github.com>
Date: Thu, 11 Dec 2025 15:27:31 +0100
Subject: [PATCH 1/2] popup css fix

---
 lark-ui/src/lib/BottomNavigation.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lark-ui/src/lib/BottomNavigation.svelte b/lark-ui/src/lib/BottomNavigation.svelte
index a36e1b7..9ab546e 100644
--- a/lark-ui/src/lib/BottomNavigation.svelte
+++ b/lark-ui/src/lib/BottomNavigation.svelte
@@ -341,7 +341,7 @@
     bottom: 120%;
     left: 50%;
     translate: -50% 0;
-    z-index: 200;
+    z-index: 1001;
     padding: 1.5rem 2rem;
     background-image: url('/shapes/shape-popover-2.svg');
     background-size: contain;

From 3dfee24b1cfa4648d04636a6aceb29034fab578e Mon Sep 17 00:00:00 2001
From: alice <122629939+espcaa@users.noreply.github.com>
Date: Thu, 11 Dec 2025 15:50:09 +0100
Subject: [PATCH 2/2] better responsiveness

---
 lark-ui/src/lib/BottomNavigation.svelte        | 18 ++++++++++++++++++
 lark-ui/src/routes/+page.svelte                |  6 +++---
 lark-ui/src/routes/app/explore/+page.svelte    |  2 +-
 .../src/routes/app/explore/Leaderboard.svelte  |  2 +-
 lark-ui/src/routes/app/shop/+page.svelte       |  2 +-
 5 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/lark-ui/src/lib/BottomNavigation.svelte b/lark-ui/src/lib/BottomNavigation.svelte
index 9ab546e..8a99655 100644
--- a/lark-ui/src/lib/BottomNavigation.svelte
+++ b/lark-ui/src/lib/BottomNavigation.svelte
@@ -267,6 +267,8 @@
   .nav-tabs {
     display: flex;
     gap: 60px;
+    min-width: 0;
+    flex-wrap: wrap;
   }
 
   .nav-item {
@@ -390,6 +392,14 @@
       font-size: 48px;
     }
     
+    .bottom-nav-items {
+      padding: 0 20px;
+    }
+    
+    .nav-tabs {
+      gap: 20px;
+    }
+    
     .bottom-navigation {
       height: 80px;
       padding: 0 1rem;
@@ -401,6 +411,14 @@
       font-size: 32px;
     }
     
+    .bottom-nav-items {
+      padding: 0 8px;
+    }
+    
+    .nav-tabs {
+      gap: 12px;
+    }
+    
     .bottom-navigation {
       height: 60px;
       padding: 0 0.5rem;
diff --git a/lark-ui/src/routes/+page.svelte b/lark-ui/src/routes/+page.svelte
index 06d74a5..34c412b 100644
--- a/lark-ui/src/routes/+page.svelte
+++ b/lark-ui/src/routes/+page.svelte
@@ -382,10 +382,10 @@
   </section>
 
   <section
-    class="w-full flex flex-col items-center overflow-x-hidden pt-12 md:pt-16"
+    class="w-full flex flex-col items-center pt-12 md:pt-16"
   >
     <div
-      class="bg-[#2A2746] aspect-video w-[110%] sm:w-[95%] md:w-[85%] lg:w-4/5 p-4 flex items-center justify-center mb-8 relative z-10"
+      class="bg-[#2A2746] aspect-video w-[95%] sm:w-[95%] md:w-[85%] lg:w-4/5 p-4 flex items-center justify-center mb-8 relative z-10"
     >
       <iframe
         width="560"
@@ -401,7 +401,7 @@
     </div>
 
     <div
-      class="w-[110%] sm:w-[95%] md:w-[85%] lg:w-4/5 relative block leading-[0]"
+      class="w-[95%] sm:w-[95%] md:w-[85%] lg:w-4/5 relative block leading-[0]"
     >
       <img alt="" class="w-full h-auto block" src="/envelope.svg" />
 
diff --git a/lark-ui/src/routes/app/explore/+page.svelte b/lark-ui/src/routes/app/explore/+page.svelte
index 62b356b..7ea1b93 100644
--- a/lark-ui/src/routes/app/explore/+page.svelte
+++ b/lark-ui/src/routes/app/explore/+page.svelte
@@ -247,7 +247,7 @@
 			<p class="text-[3vh]">No approved projects yet. Check back soon!</p>
 		</div>
 	{:else}
-		<div class="grid grid-cols-4 w-full px-[3vw] gap-x-[3vw] gap-y-[6vh] pb-[10vh]">
+		<div class="grid w-full px-[3vw] gap-x-[3vw] gap-y-[6vh] pb-[10vh]" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
 			{#each visibleProjects as project (project.id)}
 				<ProjectCard
 					{project}
diff --git a/lark-ui/src/routes/app/explore/Leaderboard.svelte b/lark-ui/src/routes/app/explore/Leaderboard.svelte
index 0cb3993..95af465 100644
--- a/lark-ui/src/routes/app/explore/Leaderboard.svelte
+++ b/lark-ui/src/routes/app/explore/Leaderboard.svelte
@@ -36,7 +36,7 @@
     }
 
     .leaderboard.small {
-        width: 18vw;
+        width: clamp(200px, 18vw, 400px);
         height: 22vh;
         cursor: pointer;
     }
diff --git a/lark-ui/src/routes/app/shop/+page.svelte b/lark-ui/src/routes/app/shop/+page.svelte
index 8ee7bb8..a889bfa 100644
--- a/lark-ui/src/routes/app/shop/+page.svelte
+++ b/lark-ui/src/routes/app/shop/+page.svelte
@@ -76,7 +76,7 @@
         {#if items.length === 0}
             <div class="empty">No items available in the shop yet.</div>
         {:else}
-            <div class="grid grid-cols-4 w-full px-[3vw] gap-x-[3vw] gap-y-[6vh] pb-[10vh] text-[#fee1c0]">
+            <div class="grid w-full px-[3vw] gap-x-[3vw] gap-y-[6vh] pb-[10vh] text-[#fee1c0]" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
                 {#each items as item}
                     <ShopCard 
                         itemId={item.itemId}