fix(app): move Show background to the end of workspace display menu

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();

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);

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} />