enh: responsive styling

This commit is contained in:
Timothy Jaeryang Baek
2025-02-05 01:03:40 -08:00
parent cce1762cb8
commit b33b49789e
6 changed files with 77 additions and 62 deletions

View File

@@ -88,7 +88,7 @@
onMount(() => {});
</script>
<div class="m-auto w-full max-w-6xl px-2 xl:px-20 translate-y-6 py-24 text-center">
<div class="m-auto w-full max-w-6xl px-2 @xl:px-20 translate-y-6 py-24 text-center">
{#if $temporaryChatEnabled}
<Tooltip
content="This chat won't appear in history and your messages will not be saved."
@@ -105,7 +105,7 @@
class="w-full text-3xl text-gray-800 dark:text-gray-100 font-medium text-center flex items-center gap-4 font-primary"
>
<div class="w-full flex flex-col justify-center items-center">
<div class="flex flex-row justify-center gap-3 sm:gap-3.5 w-fit px-5">
<div class="flex flex-row justify-center gap-3 @sm:gap-3.5 w-fit px-5">
<div class="flex flex-shrink-0 justify-center">
<div class="flex -space-x-4 mb-0.5" in:fade={{ duration: 100 }}>
{#each models as model, modelIdx}
@@ -126,7 +126,7 @@
($i18n.language === 'dg-DG'
? `/doge.png`
: `${WEBUI_BASE_URL}/static/favicon.png`)}
class=" size-9 sm:size-10 rounded-full border-[1px] border-gray-200 dark:border-none"
class=" size-9 @sm:size-10 rounded-full border-[1px] border-gray-200 dark:border-none"
alt="logo"
draggable="false"
/>
@@ -136,7 +136,7 @@
</div>
</div>
<div class=" text-3xl sm:text-4xl line-clamp-1" in:fade={{ duration: 100 }}>
<div class=" text-3xl @sm:text-4xl line-clamp-1" in:fade={{ duration: 100 }}>
{#if models[selectedModelIdx]?.name}
{models[selectedModelIdx]?.name}
{:else}
@@ -185,7 +185,7 @@
</div>
<div
class="text-base font-normal xl:translate-x-6 md:max-w-3xl w-full py-3 {atSelectedModel
class="text-base font-normal @xl:translate-x-6 @md:max-w-3xl w-full py-3 {atSelectedModel
? 'mt-2'
: ''}"
>