fix: hide desktop settings back button

hazre · hazre · commit ae66ba6bec82 · 2026-03-31T14:19:05.000+02:00
diff --git a/src/app/features/settings/Settings.tsx b/src/app/features/settings/Settings.tsx
@@ -242,8 +242,7 @@ export function Settings({
     setLegacyActivePage(SettingsPages.GeneralPage);
   };
 
-  const shouldShowSectionBack =
-    visibleSection !== null && (screenSize === ScreenSize.Mobile || visibleSection !== 'general');
+  const shouldShowSectionBack = visibleSection !== null && screenSize === ScreenSize.Mobile;
   const sectionRequestBack = shouldShowSectionBack ? handleRequestBack : undefined;
 
   return (
diff --git a/src/app/features/settings/SettingsRoute.test.tsx b/src/app/features/settings/SettingsRoute.test.tsx
@@ -355,7 +355,7 @@ describe('SettingsSectionPage', () => {
     ).toEqual(['Back', 'Close']);
   });
 
-  it('supports custom title semantics and close label', () => {
+  it('supports custom title semantics and close label without a desktop back button', () => {
     render(
       <ScreenSizeProvider value={ScreenSize.Desktop}>
         <SettingsSectionPage
@@ -369,7 +369,7 @@ describe('SettingsSectionPage', () => {
     );
 
     expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Keyboard Shortcuts');
-    expect(screen.getByRole('button', { name: 'Back' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Back' })).not.toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Close keyboard shortcuts' })).toBeInTheDocument();
   });
 
@@ -720,18 +720,17 @@ describe('Settings shallow route shell', () => {
     expect(screen.getByRole('heading', { name: 'Devices section' })).toBeInTheDocument();
   });
 
-  it('returns to general settings when desktop section back is clicked', async () => {
+  it('does not show a desktop section back button in shallow settings', async () => {
     const user = userEvent.setup();
 
     renderClientShell(ScreenSize.Desktop);
 
     await user.click(screen.getByRole('button', { name: 'Open settings' }));
     await user.click(screen.getByRole('button', { name: 'Devices' }));
-    await user.click(screen.getByRole('button', { name: 'Back' }));
 
     expect(screen.getByRole('heading', { name: 'Home route' })).toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: 'General section' })).toBeInTheDocument();
-    expect(screen.queryByRole('heading', { name: 'Devices section' })).not.toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Devices section' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Back' })).not.toBeInTheDocument();
   });
 
   it('closes a desktop shallow settings flow in one step after switching sections', async () => {
diff --git a/src/app/features/settings/SettingsSectionPage.tsx b/src/app/features/settings/SettingsSectionPage.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { Box, Icon, IconButton, Icons, Text } from 'folds';
 import { Page, PageHeader } from '$components/page';
+import { ScreenSize, useScreenSizeContext } from '$hooks/useScreenSize';
 import { settingsHeader } from './styles.css';
 
 type SettingsSectionPageProps = {
@@ -22,14 +23,16 @@ export function SettingsSectionPage({
   actionLabel,
   children,
 }: SettingsSectionPageProps) {
+  const screenSize = useScreenSizeContext();
   const closeLabel = actionLabel ?? 'Close';
+  const showBack = screenSize === ScreenSize.Mobile && requestBack;
 
   return (
     <Page>
       <PageHeader className={settingsHeader}>
         <Box grow="Yes" gap="200">
           <Box grow="Yes" alignItems="Center" gap="200">
-            {requestBack && (
+            {showBack && (
               <IconButton aria-label={backLabel ?? 'Back'} onClick={requestBack} variant="Surface">
                 <Icon src={Icons.ArrowLeft} />
               </IconButton>
