diff options
| author | Devin Griffin <[email protected]> | 2026-01-28 21:20:34 -0600 |
|---|---|---|
| committer | GitHub <[email protected]> | 2026-01-28 21:20:34 -0600 |
| commit | a7d7f5bb07eb197ce91cd7267d7b0103daf5613e (patch) | |
| tree | be57ed880e6cf2d01a5df4a6a81d75e5ec9865a7 /packages/app/src/components/settings-providers.tsx | |
| parent | 8cdb82038a465dece6e9482d4e10adbf7719b6bb (diff) | |
| download | opencode-a7d7f5bb07eb197ce91cd7267d7b0103daf5613e.tar.gz opencode-a7d7f5bb07eb197ce91cd7267d7b0103daf5613e.zip | |
fix(app): make settings more responsive for mobile and small web/desktop (#10775)
Diffstat (limited to 'packages/app/src/components/settings-providers.tsx')
| -rw-r--r-- | packages/app/src/components/settings-providers.tsx | 6 |
1 files changed, 3 insertions, 3 deletions
diff --git a/packages/app/src/components/settings-providers.tsx b/packages/app/src/components/settings-providers.tsx index abc2bee77..036e46935 100644 --- a/packages/app/src/components/settings-providers.tsx +++ b/packages/app/src/components/settings-providers.tsx @@ -115,7 +115,7 @@ export const SettingsProviders: Component = () => { } return ( - <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-10 pb-10"> +<div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10"> <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]"> <div class="flex flex-col gap-1 pt-6 pb-8 max-w-[720px]"> <h2 class="text-16-medium text-text-strong">{language.t("settings.providers.title")}</h2> @@ -136,7 +136,7 @@ export const SettingsProviders: Component = () => { > <For each={connected()}> {(item) => ( - <div class="group flex items-center justify-between gap-4 h-16 border-b border-border-weak-base last:border-none"> + <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"> <div class="flex items-center gap-3 min-w-0"> <ProviderIcon id={icon(item.id)} class="size-5 shrink-0 icon-strong-base" /> <span class="text-14-medium text-text-strong truncate">{item.name}</span> @@ -166,7 +166,7 @@ export const SettingsProviders: Component = () => { <div class="bg-surface-raised-base px-4 rounded-lg"> <For each={popular()}> {(item) => ( - <div class="flex items-center justify-between gap-4 h-16 border-b border-border-weak-base last:border-none"> + <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"> <div class="flex flex-col min-w-0"> <div class="flex items-center gap-x-3"> <ProviderIcon id={icon(item.id)} class="size-5 shrink-0 icon-strong-base" /> |