diff options
Diffstat (limited to 'packages/app/src/components')
5 files changed, 14 insertions, 14 deletions
diff --git a/packages/app/src/components/settings-general.tsx b/packages/app/src/components/settings-general.tsx index 180a99c73..08d68b1cb 100644 --- a/packages/app/src/components/settings-general.tsx +++ b/packages/app/src/components/settings-general.tsx @@ -130,7 +130,7 @@ export const SettingsGeneral: Component = () => { const soundOptions = [...SOUND_OPTIONS] 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"> <h2 class="text-16-medium text-text-strong">{language.t("settings.tab.general")}</h2> @@ -406,8 +406,8 @@ interface SettingsRowProps { const SettingsRow: Component<SettingsRowProps> = (props) => { return ( - <div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none"> - <div class="flex flex-col gap-0.5"> + <div class="flex flex-wrap items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none"> + <div class="flex flex-col gap-0.5 min-w-0"> <span class="text-14-medium text-text-strong">{props.title}</span> <span class="text-12-regular text-text-weak">{props.description}</span> </div> diff --git a/packages/app/src/components/settings-keybinds.tsx b/packages/app/src/components/settings-keybinds.tsx index a2cd3280c..453d70049 100644 --- a/packages/app/src/components/settings-keybinds.tsx +++ b/packages/app/src/components/settings-keybinds.tsx @@ -352,7 +352,7 @@ export const SettingsKeybinds: 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-4 pt-6 pb-6 max-w-[720px]"> <div class="flex items-center justify-between gap-4"> diff --git a/packages/app/src/components/settings-models.tsx b/packages/app/src/components/settings-models.tsx index 0cb6deee1..062d17330 100644 --- a/packages/app/src/components/settings-models.tsx +++ b/packages/app/src/components/settings-models.tsx @@ -39,7 +39,7 @@ export const SettingsModels: 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-4 pt-6 pb-6 max-w-[720px]"> <h2 class="text-16-medium text-text-strong">{language.t("settings.models.title")}</h2> @@ -99,7 +99,7 @@ export const SettingsModels: Component = () => { {(item) => { const key = { providerID: item.provider.id, modelID: item.id } return ( - <div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none"> + <div class="flex flex-wrap items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none"> <div class="min-w-0"> <span class="text-14-regular text-text-strong truncate block">{item.name}</span> </div> diff --git a/packages/app/src/components/settings-permissions.tsx b/packages/app/src/components/settings-permissions.tsx index bcbf7b68f..87a1a7e2a 100644 --- a/packages/app/src/components/settings-permissions.tsx +++ b/packages/app/src/components/settings-permissions.tsx @@ -175,14 +175,14 @@ export const SettingsPermissions: Component = () => { return ( <div class="flex flex-col h-full overflow-y-auto no-scrollbar"> - <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 p-8 max-w-[720px]"> +<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 px-4 py-8 sm:p-8 max-w-[720px]"> <h2 class="text-16-medium text-text-strong">{language.t("settings.permissions.title")}</h2> <p class="text-14-regular text-text-weak">{language.t("settings.permissions.description")}</p> </div> </div> - <div class="flex flex-col gap-6 p-8 pt-6 max-w-[720px]"> + <div class="flex flex-col gap-6 px-4 py-6 sm:p-8 sm:pt-6 max-w-[720px]"> <div class="flex flex-col gap-2"> <h3 class="text-14-medium text-text-strong">{language.t("settings.permissions.section.tools")}</h3> <div class="border border-border-weak-base rounded-lg overflow-hidden"> @@ -217,8 +217,8 @@ interface SettingsRowProps { const SettingsRow: Component<SettingsRowProps> = (props) => { return ( - <div class="flex items-center justify-between gap-4 px-4 py-3 border-b border-border-weak-base last:border-none"> - <div class="flex flex-col gap-0.5"> + <div class="flex flex-wrap items-center justify-between gap-4 px-4 py-3 border-b border-border-weak-base last:border-none"> + <div class="flex flex-col gap-0.5 min-w-0"> <span class="text-14-medium text-text-strong">{props.title}</span> <span class="text-12-regular text-text-weak">{props.description}</span> </div> 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" /> |