From 7002815fc278c32f9a37ed12f01c8f693a4ede4f Mon Sep 17 00:00:00 2001
From: QinQin <qinqin@geotab.com>
Date: Tue, 5 May 2026 14:50:56 -0400
Subject: [PATCH] fix: improve banner layout on mobile devices

Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
---
 src/lib/components/chat/Navbar.svelte   | 33 +++++++++++++++++++++++--
 src/lib/components/common/Banner.svelte |  2 +-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/chat/Navbar.svelte b/src/lib/components/chat/Navbar.svelte
index 5c4e1364b4..e792cdf1fa 100644
--- a/src/lib/components/chat/Navbar.svelte
+++ b/src/lib/components/chat/Navbar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte';
+	import { getContext, afterUpdate } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
 	import {
@@ -56,6 +56,15 @@
 	export let moveChatHandler: (id: string, folderId: string) => void;
 
 	let closedBannerIds = [];
+	let bannersExpanded = false;
+	let bannerContainer: HTMLDivElement;
+	let bannersOverflowing = false;
+
+	afterUpdate(() => {
+		if (bannerContainer) {
+			bannersOverflowing = bannerContainer.scrollHeight > bannerContainer.clientHeight;
+		}
+	});
 
 	let showShareChatModal = false;
 	let showDownloadChatModal = false;
@@ -268,7 +277,12 @@
 	<div class="absolute top-[100%] left-0 right-0 h-fit">
 		{#if !history.currentId && !$chatId && ($banners.length > 0 || ($config?.license_metadata?.type ?? null) === 'trial' || (($config?.license_metadata?.seats ?? null) !== null && $config?.user_count > $config?.license_metadata?.seats))}
 			<div class=" w-full z-30">
-				<div class=" flex flex-col gap-1 w-full">
+				<div
+					bind:this={bannerContainer}
+					class=" flex flex-col gap-1 w-full {bannersExpanded
+						? ''
+						: 'max-h-28'} md:max-h-none overflow-hidden"
+				>
 					{#if ($config?.license_metadata?.type ?? null) === 'trial'}
 						<Banner
 							banner={{
@@ -316,6 +330,21 @@
 						/>
 					{/each}
 				</div>
+
+				{#if bannersOverflowing || bannersExpanded}
+					<button
+						class="w-full text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 py-0.5 md:hidden"
+						on:click={() => {
+							bannersExpanded = !bannersExpanded;
+						}}
+					>
+						{#if bannersExpanded}
+							{$i18n.t('Show less')}
+						{:else}
+							{$i18n.t('Show more')}
+						{/if}
+					</button>
+				{/if}
 			</div>
 		{/if}
 	</div>
diff --git a/src/lib/components/common/Banner.svelte b/src/lib/components/common/Banner.svelte
index a80056cb67..7e3ef7c5e0 100644
--- a/src/lib/components/common/Banner.svelte
+++ b/src/lib/components/common/Banner.svelte
@@ -49,7 +49,7 @@
 			class="{className} top-0 left-0 right-0 py-1 flex justify-center items-center relative border border-transparent text-gray-800 dark:text-gary-100 bg-transparent backdrop-blur-xl z-30"
 			transition:fade={{ delay: 100, duration: 300 }}
 		>
-			<div class=" flex flex-col md:flex-row md:items-center flex-1 text-sm w-fit gap-1.5">
+			<div class=" flex flex-row items-center flex-1 text-sm gap-1.5">
 				<div class="flex justify-between self-start">
 					<div
 						class=" text-xs font-semibold {classNames[banner.type] ??