Skip to content

Commit a7d7f5b

Browse files
DNGriffinDNGriffin
authored
fix(app): make settings more responsive for mobile and small web/desktop (#10775)
1 parent 8cdb820 commit a7d7f5b

6 files changed

Lines changed: 21 additions & 16 deletions

File tree

‎packages/app/src/components/settings-general.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ export const SettingsGeneral: Component = () => {
130130
const soundOptions = [...SOUND_OPTIONS]
131131

132132
return (
133-
<div class="flex flex-col h-full overflow-y-auto no-scrollbar px-10 pb-10">
133+
<div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
134134
<div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
135135
<div class="flex flex-col gap-1 pt-6 pb-8">
136136
<h2 class="text-16-medium text-text-strong">{language.t("settings.tab.general")}</h2>
@@ -406,8 +406,8 @@ interface SettingsRowProps {
406406

407407
const SettingsRow: Component<SettingsRowProps> = (props) => {
408408
return (
409-
<div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
410-
<div class="flex flex-col gap-0.5">
409+
<div class="flex flex-wrap items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
410+
<div class="flex flex-col gap-0.5 min-w-0">
411411
<span class="text-14-medium text-text-strong">{props.title}</span>
412412
<span class="text-12-regular text-text-weak">{props.description}</span>
413413
</div>

‎packages/app/src/components/settings-keybinds.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,7 @@ export const SettingsKeybinds: Component = () => {
352352
})
353353

354354
return (
355-
<div class="flex flex-col h-full overflow-y-auto no-scrollbar px-10 pb-10">
355+
<div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
356356
<div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
357357
<div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
358358
<div class="flex items-center justify-between gap-4">

‎packages/app/src/components/settings-models.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const SettingsModels: Component = () => {
3939
})
4040

4141
return (
42-
<div class="flex flex-col h-full overflow-y-auto no-scrollbar px-10 pb-10">
42+
<div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
4343
<div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
4444
<div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]">
4545
<h2 class="text-16-medium text-text-strong">{language.t("settings.models.title")}</h2>
@@ -99,7 +99,7 @@ export const SettingsModels: Component = () => {
9999
{(item) => {
100100
const key = { providerID: item.provider.id, modelID: item.id }
101101
return (
102-
<div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
102+
<div class="flex flex-wrap items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
103103
<div class="min-w-0">
104104
<span class="text-14-regular text-text-strong truncate block">{item.name}</span>
105105
</div>

‎packages/app/src/components/settings-permissions.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -175,14 +175,14 @@ export const SettingsPermissions: Component = () => {
175175

176176
return (
177177
<div class="flex flex-col h-full overflow-y-auto no-scrollbar">
178-
<div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
179-
<div class="flex flex-col gap-1 p-8 max-w-[720px]">
178+
<div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
179+
<div class="flex flex-col gap-1 px-4 py-8 sm:p-8 max-w-[720px]">
180180
<h2 class="text-16-medium text-text-strong">{language.t("settings.permissions.title")}</h2>
181181
<p class="text-14-regular text-text-weak">{language.t("settings.permissions.description")}</p>
182182
</div>
183183
</div>
184184

185-
<div class="flex flex-col gap-6 p-8 pt-6 max-w-[720px]">
185+
<div class="flex flex-col gap-6 px-4 py-6 sm:p-8 sm:pt-6 max-w-[720px]">
186186
<div class="flex flex-col gap-2">
187187
<h3 class="text-14-medium text-text-strong">{language.t("settings.permissions.section.tools")}</h3>
188188
<div class="border border-border-weak-base rounded-lg overflow-hidden">
@@ -217,8 +217,8 @@ interface SettingsRowProps {
217217

218218
const SettingsRow: Component<SettingsRowProps> = (props) => {
219219
return (
220-
<div class="flex items-center justify-between gap-4 px-4 py-3 border-b border-border-weak-base last:border-none">
221-
<div class="flex flex-col gap-0.5">
220+
<div class="flex flex-wrap items-center justify-between gap-4 px-4 py-3 border-b border-border-weak-base last:border-none">
221+
<div class="flex flex-col gap-0.5 min-w-0">
222222
<span class="text-14-medium text-text-strong">{props.title}</span>
223223
<span class="text-12-regular text-text-weak">{props.description}</span>
224224
</div>

‎packages/app/src/components/settings-providers.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export const SettingsProviders: Component = () => {
115115
}
116116

117117
return (
118-
<div class="flex flex-col h-full overflow-y-auto no-scrollbar px-10 pb-10">
118+
<div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
119119
<div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
120120
<div class="flex flex-col gap-1 pt-6 pb-8 max-w-[720px]">
121121
<h2 class="text-16-medium text-text-strong">{language.t("settings.providers.title")}</h2>
@@ -136,7 +136,7 @@ export const SettingsProviders: Component = () => {
136136
>
137137
<For each={connected()}>
138138
{(item) => (
139-
<div class="group flex items-center justify-between gap-4 h-16 border-b border-border-weak-base last:border-none">
139+
<div class="group flex flex-wrap items-center justify-between gap-4 min-h-16 py-3 border-b border-border-weak-base last:border-none">
140140
<div class="flex items-center gap-3 min-w-0">
141141
<ProviderIcon id={icon(item.id)} class="size-5 shrink-0 icon-strong-base" />
142142
<span class="text-14-medium text-text-strong truncate">{item.name}</span>
@@ -166,7 +166,7 @@ export const SettingsProviders: Component = () => {
166166
<div class="bg-surface-raised-base px-4 rounded-lg">
167167
<For each={popular()}>
168168
{(item) => (
169-
<div class="flex items-center justify-between gap-4 h-16 border-b border-border-weak-base last:border-none">
169+
<div class="flex flex-wrap items-center justify-between gap-4 min-h-16 py-3 border-b border-border-weak-base last:border-none">
170170
<div class="flex flex-col min-w-0">
171171
<div class="flex items-center gap-x-3">
172172
<ProviderIcon id={icon(item.id)} class="size-5 shrink-0 icon-strong-base" />

‎packages/ui/src/components/tabs.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -375,8 +375,13 @@
375375

376376
&[data-variant="settings"] {
377377
[data-slot="tabs-list"] {
378-
width: 200px;
379-
min-width: 200px;
378+
width: 150px;
379+
min-width: 150px;
380+
381+
@media (min-width: 640px) {
382+
width: 200px;
383+
min-width: 200px;
384+
}
380385
padding: 12px;
381386
gap: 0;
382387
background-color: var(--background-base);

0 commit comments

Comments
 (0)