Skip to content

Commit b33b497

Browse files
tjbcktjbck
committed
enh: responsive styling
1 parent cce1762 commit b33b497

File tree

6 files changed

+77
-62
lines changed

6 files changed

+77
-62
lines changed

‎package-lock.json‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"@sveltejs/adapter-static": "^3.0.2",
2626
"@sveltejs/kit": "^2.5.20",
2727
"@sveltejs/vite-plugin-svelte": "^3.1.1",
28+
"@tailwindcss/container-queries": "^0.1.1",
2829
"@tailwindcss/typography": "^0.5.13",
2930
"@typescript-eslint/eslint-plugin": "^6.17.0",
3031
"@typescript-eslint/parser": "^6.17.0",

‎src/lib/components/chat/Chat.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1940,7 +1940,7 @@
19401940
</div>
19411941
{/if}
19421942

1943-
<div class="flex flex-col flex-auto z-10 w-full">
1943+
<div class="flex flex-col flex-auto z-10 w-full @container">
19441944
{#if $settings?.landingPageMode === 'chat' || createMessagesList(history, history.currentId).length > 0}
19451945
<div
19461946
class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0 max-w-full z-10 scrollbar-hidden"

‎src/lib/components/chat/MessageInput.svelte‎

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1075,8 +1075,8 @@
10751075
{/if}
10761076
</div>
10771077

1078-
<div class=" flex justify-between mt-1.5 mb-2.5 mx-0.5">
1079-
<div class="ml-1 self-end gap-0.5 flex items-center">
1078+
<div class=" flex justify-between mt-1.5 mb-2.5 mx-0.5 max-w-full">
1079+
<div class="ml-1 self-end gap-0.5 flex items-center flex-1 max-w-[80%]">
10801080
<InputMenu
10811081
bind:selectedToolIds
10821082
{screenCaptureHandler}
@@ -1129,67 +1129,69 @@
11291129
</button>
11301130
</InputMenu>
11311131

1132-
{#if $_user}
1133-
{#if $config?.features?.enable_web_search && ($_user.role === 'admin' || $_user?.permissions?.features?.web_search)}
1134-
<Tooltip content={$i18n.t('Search the internet')} placement="top">
1135-
<button
1136-
on:click|preventDefault={() => (webSearchEnabled = !webSearchEnabled)}
1137-
type="button"
1138-
class="px-1.5 sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {webSearchEnabled ||
1139-
($settings?.webSearch ?? false) === 'always'
1140-
? 'bg-blue-100 dark:bg-blue-500/20 text-blue-500 dark:text-blue-400'
1141-
: 'bg-transparent text-gray-600 dark:text-gray-400 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'}"
1142-
>
1143-
<GlobeAlt className="size-5" strokeWidth="1.75" />
1144-
<span
1145-
class="hidden sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
1146-
>{$i18n.t('Web Search')}</span
1132+
<div class="flex gap-0.5 items-center overflow-x-auto scrollbar-none flex-1">
1133+
{#if $_user}
1134+
{#if $config?.features?.enable_web_search && ($_user.role === 'admin' || $_user?.permissions?.features?.web_search)}
1135+
<Tooltip content={$i18n.t('Search the internet')} placement="top">
1136+
<button
1137+
on:click|preventDefault={() => (webSearchEnabled = !webSearchEnabled)}
1138+
type="button"
1139+
class="px-1.5 @sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {webSearchEnabled ||
1140+
($settings?.webSearch ?? false) === 'always'
1141+
? 'bg-blue-100 dark:bg-blue-500/20 text-blue-500 dark:text-blue-400'
1142+
: 'bg-transparent text-gray-600 dark:text-gray-400 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800'}"
11471143
>
1148-
</button>
1149-
</Tooltip>
1150-
{/if}
1144+
<GlobeAlt className="size-5" strokeWidth="1.75" />
1145+
<span
1146+
class="hidden @sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
1147+
>{$i18n.t('Web Search')}</span
1148+
>
1149+
</button>
1150+
</Tooltip>
1151+
{/if}
11511152

1152-
{#if $config?.features?.enable_image_generation && ($_user.role === 'admin' || $_user?.permissions?.features?.image_generation)}
1153-
<Tooltip content={$i18n.t('Generate an image')} placement="top">
1154-
<button
1155-
on:click|preventDefault={() =>
1156-
(imageGenerationEnabled = !imageGenerationEnabled)}
1157-
type="button"
1158-
class="px-1.5 sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {imageGenerationEnabled
1159-
? 'bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400'
1160-
: 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 '}"
1161-
>
1162-
<Photo className="size-5" strokeWidth="1.75" />
1163-
<span
1164-
class="hidden sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
1165-
>{$i18n.t('Image')}</span
1153+
{#if $config?.features?.enable_image_generation && ($_user.role === 'admin' || $_user?.permissions?.features?.image_generation)}
1154+
<Tooltip content={$i18n.t('Generate an image')} placement="top">
1155+
<button
1156+
on:click|preventDefault={() =>
1157+
(imageGenerationEnabled = !imageGenerationEnabled)}
1158+
type="button"
1159+
class="px-1.5 @sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {imageGenerationEnabled
1160+
? 'bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400'
1161+
: 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 '}"
11661162
>
1167-
</button>
1168-
</Tooltip>
1169-
{/if}
1163+
<Photo className="size-5" strokeWidth="1.75" />
1164+
<span
1165+
class="hidden @sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
1166+
>{$i18n.t('Image')}</span
1167+
>
1168+
</button>
1169+
</Tooltip>
1170+
{/if}
11701171

1171-
{#if $_user.role === 'admin' || $_user?.permissions?.features?.code_interpreter}
1172-
<Tooltip content={$i18n.t('Execute code for analysis')} placement="top">
1173-
<button
1174-
on:click|preventDefault={() =>
1175-
(codeInterpreterEnabled = !codeInterpreterEnabled)}
1176-
type="button"
1177-
class="px-1.5 sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {codeInterpreterEnabled
1178-
? 'bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400'
1179-
: 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 '}"
1180-
>
1181-
<CommandLine className="size-5" strokeWidth="1.75" />
1182-
<span
1183-
class="hidden sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
1184-
>{$i18n.t('Code Interpreter')}</span
1172+
{#if $_user.role === 'admin' || $_user?.permissions?.features?.code_interpreter}
1173+
<Tooltip content={$i18n.t('Execute code for analysis')} placement="top">
1174+
<button
1175+
on:click|preventDefault={() =>
1176+
(codeInterpreterEnabled = !codeInterpreterEnabled)}
1177+
type="button"
1178+
class="px-1.5 @sm:px-2.5 py-1.5 flex gap-1.5 items-center text-sm rounded-full font-medium transition-colors duration-300 focus:outline-none max-w-full overflow-hidden {codeInterpreterEnabled
1179+
? 'bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400'
1180+
: 'bg-transparent text-gray-600 dark:text-gray-300 border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 '}"
11851181
>
1186-
</button>
1187-
</Tooltip>
1182+
<CommandLine className="size-5" strokeWidth="1.75" />
1183+
<span
1184+
class="hidden @sm:block whitespace-nowrap overflow-hidden text-ellipsis translate-y-[0.5px] mr-0.5"
1185+
>{$i18n.t('Code Interpreter')}</span
1186+
>
1187+
</button>
1188+
</Tooltip>
1189+
{/if}
11881190
{/if}
1189-
{/if}
1191+
</div>
11901192
</div>
11911193

1192-
<div class="self-end flex space-x-1 mr-1">
1194+
<div class="self-end flex space-x-1 mr-1 flex-shrink-0">
11931195
{#if !history?.currentId || history.messages[history.currentId]?.done == true}
11941196
<Tooltip content={$i18n.t('Record voice')}>
11951197
<button

‎src/lib/components/chat/Placeholder.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
onMount(() => {});
8989
</script>
9090

91-
<div class="m-auto w-full max-w-6xl px-2 xl:px-20 translate-y-6 py-24 text-center">
91+
<div class="m-auto w-full max-w-6xl px-2 @xl:px-20 translate-y-6 py-24 text-center">
9292
{#if $temporaryChatEnabled}
9393
<Tooltip
9494
content="This chat won't appear in history and your messages will not be saved."
@@ -105,7 +105,7 @@
105105
class="w-full text-3xl text-gray-800 dark:text-gray-100 font-medium text-center flex items-center gap-4 font-primary"
106106
>
107107
<div class="w-full flex flex-col justify-center items-center">
108-
<div class="flex flex-row justify-center gap-3 sm:gap-3.5 w-fit px-5">
108+
<div class="flex flex-row justify-center gap-3 @sm:gap-3.5 w-fit px-5">
109109
<div class="flex flex-shrink-0 justify-center">
110110
<div class="flex -space-x-4 mb-0.5" in:fade={{ duration: 100 }}>
111111
{#each models as model, modelIdx}
@@ -126,7 +126,7 @@
126126
($i18n.language === 'dg-DG'
127127
? `/doge.png`
128128
: `${WEBUI_BASE_URL}/static/favicon.png`)}
129-
class=" size-9 sm:size-10 rounded-full border-[1px] border-gray-200 dark:border-none"
129+
class=" size-9 @sm:size-10 rounded-full border-[1px] border-gray-200 dark:border-none"
130130
alt="logo"
131131
draggable="false"
132132
/>
@@ -136,7 +136,7 @@
136136
</div>
137137
</div>
138138

139-
<div class=" text-3xl sm:text-4xl line-clamp-1" in:fade={{ duration: 100 }}>
139+
<div class=" text-3xl @sm:text-4xl line-clamp-1" in:fade={{ duration: 100 }}>
140140
{#if models[selectedModelIdx]?.name}
141141
{models[selectedModelIdx]?.name}
142142
{:else}
@@ -185,7 +185,7 @@
185185
</div>
186186

187187
<div
188-
class="text-base font-normal xl:translate-x-6 md:max-w-3xl w-full py-3 {atSelectedModel
188+
class="text-base font-normal @xl:translate-x-6 @md:max-w-3xl w-full py-3 {atSelectedModel
189189
? 'mt-2'
190190
: ''}"
191191
>

‎tailwind.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import typography from '@tailwindcss/typography';
2+
import containerQuries from '@tailwindcss/container-queries';
23

34
/** @type {import('tailwindcss').Config} */
45
export default {
@@ -38,5 +39,5 @@ export default {
3839
}
3940
}
4041
},
41-
plugins: [typography]
42+
plugins: [typography, containerQuries]
4243
};

0 commit comments

Comments
 (0)