scriptoriumadmin/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-09-30 01:51:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix: improve banner layout on mobile devices

Browse source 
Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
This commit is contained in:
QinQin 2026-05-05 14:50:56 -04:00
parent a32d26e61d
commit 7002815fc2
2 changed files with 32 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/lib/components/chat/Navbar.svelte
View file

@ -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>

2
src/lib/components/common/Banner.svelte
View file

@ -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] ??