Fix cookie settings banner horizontal space on mobile

src/features/cookieConsent/ui/CookieConsentBanner.tsx

@@ -25,7 +25,7 @@ type CookieConsentBannerProps = {
   onAcceptAll: (event: React.MouseEvent<HTMLButtonElement>) => void;
   onRejectNonEssential: (event: React.MouseEvent<HTMLButtonElement>) => void;
   onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  /** Visual surface used by optional dismiss effects (e.g. Thanos disintegrate). */
+  /** Visual surface used by optional dismiss effects (e.g. DOM disintegrate). */
   surfaceRef?: React.Ref<HTMLDivElement>;
 };
 
@@ -96,10 +96,15 @@ export const CookieConsentBanner: React.FC<CookieConsentBannerProps> = ({
           sx={{
             alignItems: { xs: "stretch", sm: "center" },
             justifyContent: "space-between",
-            pr: isSettingsView ? 4 : 0,
           }}
         >
-          <Box sx={{ minWidth: 0 }}>
+          <Box
+            sx={{
+              minWidth: 0,
+              // Reserve space for the overlaid close control without narrowing buttons.
+              pr: isSettingsView ? 5 : 0,
+            }}
+          >
             <Typography
               id="cookie-consent-title"
               variant="subtitle2"

src/features/cookieConsent/ui/CookieConsentBannerWithDismissEffect.tsx

@@ -52,13 +52,16 @@ export const CookieConsentBannerWithDismissEffect: React.FC<
           return;
         }
 
+        const settingsViewAtDismiss = isSettingsView;
+        setFrozenSettingsView(settingsViewAtDismiss);
+
         const persisted = action();
         if (persisted === false) {
+          setFrozenSettingsView(null);
           return;
         }
 
         isDismissingRef.current = true;
-        setFrozenSettingsView(isSettingsView);
         onBeginDismiss();
 
         void (async () => {

src/features/cookieConsent/ui/__tests__/CookieConsentBannerWithDismissEffect.test.tsx

@@ -3,6 +3,7 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { SnackbarProvider } from "notistack";
 import type * as Notistack from "notistack";
+import { useState } from "react";
 import { describe, expect, it, vi } from "vitest";
 
 import type * as SharedHooks from "#/shared/hooks";
@@ -127,6 +128,54 @@ describe("CookieConsentBannerWithDismissEffect", () => {
     expect(onCompleteDismiss).not.toHaveBeenCalled();
   });
 
+  it("keeps settings view frozen while close dismiss animation is pending", async () => {
+    disintegrateMock.mockClear();
+    const user = userEvent.setup();
+
+    const SettingsCloseHarness = () => {
+      const [isSettingsView, setIsSettingsView] = useState(true);
+
+      return (
+        <ThemeProvider theme={theme}>
+          <SnackbarProvider>
+            <CookieConsentBannerWithDismissEffect
+              isSettingsView={isSettingsView}
+              onAcceptAll={vi.fn(() => true)}
+              onRejectNonEssential={vi.fn()}
+              onClose={() => {
+                setIsSettingsView(false);
+              }}
+              onBeginDismiss={vi.fn()}
+              onCompleteDismiss={vi.fn()}
+            />
+          </SnackbarProvider>
+        </ThemeProvider>
+      );
+    };
+
+    render(<SettingsCloseHarness />);
+
+    await user.click(
+      screen.getByRole("button", { name: "COOKIE_SETTINGS_CLOSE" }),
+    );
+
+    expect(screen.getByText("COOKIE_SETTINGS_TITLE")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "COOKIE_SETTINGS_CLOSE" }),
+    ).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(disintegrateMock).toHaveBeenCalledTimes(1);
+    });
+
+    resolveDisintegrate?.();
+    await waitFor(() => {
+      expect(
+        screen.queryByText("COOKIE_SETTINGS_TITLE"),
+      ).not.toBeInTheDocument();
+    });
+  });
+
   it("still completes dismiss and shows a warning when the animation fails", async () => {
     disintegrateMock.mockClear();
     enqueueSnackbarMock.mockClear();