From ae0b2588bf3a8f884b5b7207285e4df52bdcc01d Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Fri, 16 Oct 2026 18:36:45 +0200
Subject: [PATCH] fix(app): move Show background to the end of workspace
 display menu

---
 .../browser/sidebar-mobile-menu-sheets.spec.ts    |  9 +++++++++
 .../e2e/browser/sidebar-project-filter.spec.ts    | 10 ++++++++++
 .../sidebar/display-preferences/menu.tsx          | 15 ++++++++-------
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/packages/app/e2e/browser/sidebar-mobile-menu-sheets.spec.ts b/packages/app/e2e/browser/sidebar-mobile-menu-sheets.spec.ts
index cf2f448913..7b4c36bf97 100644
--- a/packages/app/e2e/browser/sidebar-mobile-menu-sheets.spec.ts
+++ b/packages/app/e2e/browser/sidebar-mobile-menu-sheets.spec.ts
@@ -21,6 +21,15 @@ test("project and workspace kebabs open action sheets on compact layouts", async
     await page.getByRole("button", { name: "Open menu", exact: true }).click();
     await waitForSidebarHydration(page);
 
+    await page.getByTestId("sidebar-display-preferences-menu").click();
+    await expect(page.getByRole("menuitem")).toHaveText([
+      /^Grouping/,
+      /^Title/,
+      "Show",
+      "Show background",
+    ]);
+    await closeMenuSheet(page);
+
     await page
       .getByTestId(`sidebar-project-kebab-${projectEquivalenceViewKey(seeded.projectKey)}`)
       .click();
diff --git a/packages/app/e2e/browser/sidebar-project-filter.spec.ts b/packages/app/e2e/browser/sidebar-project-filter.spec.ts
index df9b9afddf..a2f8d14348 100644
--- a/packages/app/e2e/browser/sidebar-project-filter.spec.ts
+++ b/packages/app/e2e/browser/sidebar-project-filter.spec.ts
@@ -29,6 +29,16 @@ test.describe("Sidebar project filter", () => {
       await expect(alphaRow).toBeVisible({ timeout: 30_000 });
       await expect(betaRow).toBeVisible({ timeout: 30_000 });
 
+      await page.getByTestId("sidebar-display-preferences-menu").click();
+      await expect(page.getByRole("menuitem")).toHaveText([
+        /^Grouping/,
+        /^Title/,
+        "Show",
+        "Project",
+        "Show background",
+      ]);
+      await closeSidebarDisplayPreferences(page);
+
       await openSidebarProjectFilter(page);
       await expect(page.getByTestId("sidebar-project-filter-all")).toBeVisible();
       await toggleProjectFilter(page, alpha.projectKey);
diff --git a/packages/app/src/components/sidebar/display-preferences/menu.tsx b/packages/app/src/components/sidebar/display-preferences/menu.tsx
index d62b3f9ff1..be5a66ff6f 100644
--- a/packages/app/src/components/sidebar/display-preferences/menu.tsx
+++ b/packages/app/src/components/sidebar/display-preferences/menu.tsx
@@ -301,13 +301,6 @@ export function SidebarDisplayPreferencesMenu(): ReactElement {
           sheetTitle={t("sidebar.display.heading")}
           testID="sidebar-display-preferences-content"
         >
-          <MenuItem
-            selected={preferences.showBackground}
-            closeOnSelect={false}
-            onSelect={preferences.toggleBackground}
-          >
-            {t("sidebar.display.showBackground")}
-          </MenuItem>
           <MenuSubTrigger
             id="grouping"
             value={t(GROUPING_LABEL_KEYS[preferences.grouping])}
@@ -366,6 +359,14 @@ export function SidebarDisplayPreferencesMenu(): ReactElement {
               </MenuSubTrigger>
             </>
           ) : null}
+          <MenuSeparator />
+          <MenuItem
+            selected={preferences.showBackground}
+            closeOnSelect={false}
+            onSelect={preferences.toggleBackground}
+          >
+            {t("sidebar.display.showBackground")}
+          </MenuItem>
         </MenuSurface>
       </MenuRoot>
       <WorkspaceLabelManagerModal visible={managerOpen} onClose={closeManager} />