authorgravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-09-04 17:16:51-04:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-04 17:16:51-04:00
log764946502390845919d974490bc85e87b788c996
treefef38cbdb5def3627ff0d1bf9d3fe0f827f7417e
parent935917f50a2d9ccdd772464de140c187ca80bb0b
signature Signed by PGP key B5690EEEBB952194

fix(web): align provider controls with machine tabs (#9769)

1 files changed, 10 insertions(+), 11 deletions(-)

apps/web/src/components/settings/ProviderSettingsPanel.tsx+10-11
...@@ -191,8 +191,10 @@ function ProviderSettingsPlaceholder({...@@ -191,8 +191,10 @@ function ProviderSettingsPlaceholder({
191 readonly children?: ReactNode;191 readonly children?: ReactNode;
192}) {192}) {
193 return (193 return (
194 <SettingsSection {...searchableSetting("providers")} variant="plain">194 <SettingsSection {...searchableSetting("providers")} hideTitle variant="plain">
195 {deviceTabs}195 {deviceTabs ? (
196 <div className="flex min-h-11 min-w-0 items-center px-3 sm:px-4">{deviceTabs}</div>
197 ) : null}
196 <div198 <div
197 className={cn(199 className={cn(
198 providerCardClassName,200 providerCardClassName,
...@@ -323,7 +325,7 @@ function ProviderSettingsPanelContent(target: ProviderSettingsTarget) {...@@ -323,7 +325,7 @@ function ProviderSettingsPanelContent(target: ProviderSettingsTarget) {
323 options.length === 1 && options[0]?.entry.target._tag === "PrimaryConnectionTarget";325 options.length === 1 && options[0]?.entry.target._tag === "PrimaryConnectionTarget";
324 const deviceTabs =326 const deviceTabs =
325 !onlyPrimaryDevice && options.length > 0 ? (327 !onlyPrimaryDevice && options.length > 0 ? (
326 <ScrollArea hideScrollbars scrollFade className="mx-3 h-11 min-w-0 rounded-none sm:mx-4">328 <ScrollArea hideScrollbars scrollFade className="h-11 min-w-0 flex-1 rounded-none">
327 <div role="group" aria-label="Devices" className="flex h-full w-max min-w-full px-1">329 <div role="group" aria-label="Devices" className="flex h-full w-max min-w-full px-1">
328 {options.map((environment) => {330 {options.map((environment) => {
329 const machine = resolveEnvironmentMachineKind(environment.serverConfig);331 const machine = resolveEnvironmentMachineKind(environment.serverConfig);
...@@ -977,11 +979,10 @@ export function EnvironmentProviderSettings({...@@ -977,11 +979,10 @@ export function EnvironmentProviderSettings({
977979
978 return (980 return (
979 <>981 <>
980 <SettingsSection982 <SettingsSection {...searchableSetting("providers")} hideTitle variant="plain">
981 {...searchableSetting("providers")}983 <div className="flex min-h-11 min-w-0 items-center gap-2 px-3 sm:px-4">
982 variant="plain"984 {deviceTabs}
983 headerAction={985 <div className="ml-auto flex min-w-0 shrink-0 items-center gap-2">
984 <div className="flex min-w-0 items-center gap-2">
985 {readOnly ? (986 {readOnly ? (
986 <span className="min-w-0 truncate text-xs text-muted-foreground">987 <span className="min-w-0 truncate text-xs text-muted-foreground">
987 <ProviderLastChecked lastCheckedAt={lastCheckedAt} />988 <ProviderLastChecked lastCheckedAt={lastCheckedAt} />
...@@ -1030,9 +1031,7 @@ export function EnvironmentProviderSettings({...@@ -1030,9 +1031,7 @@ export function EnvironmentProviderSettings({
1030 </>1031 </>
1031 )}1032 )}
1032 </div>1033 </div>
1033 }1034 </div>
1034 >
1035 {deviceTabs}
1036 {readOnly ? (1035 {readOnly ? (
1037 <div className={cn(providerCardClassName, "overflow-hidden")}>1036 <div className={cn(providerCardClassName, "overflow-hidden")}>
1038 <SettingsRow1037 <SettingsRow