From 3cb8cddd8bf4667ddda00dbdbbfd56996130cc19 Mon Sep 17 00:00:00 2001
From: Rudy Celekli <rudy@gradiahq.com>
Date: Mon, 12 Oct 2026 21:10:21 -0400
Subject: [PATCH] fix: dismiss desktop tip when session storage writes fail

---
 .../src/components/desktop-tip-modal.test.tsx | 29 +++++++++++++++++++
 apps/app/src/components/desktop-tip-modal.tsx |  3 ++
 2 files changed, 32 insertions(+)
 create mode 100644 apps/app/src/components/desktop-tip-modal.test.tsx

diff --git a/apps/app/src/components/desktop-tip-modal.test.tsx b/apps/app/src/components/desktop-tip-modal.test.tsx
new file mode 100644
index 0000000..3785a39
--- /dev/null
+++ b/apps/app/src/components/desktop-tip-modal.test.tsx
@@ -0,0 +1,29 @@
+import { afterEach, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+
+afterEach(() => { cleanup(); vi.restoreAllMocks(); sessionStorage.clear(); });
+
+it("dismisses for the rest of the tab when storage rejects writes", async () => {
+  vi.resetModules();
+  const { DesktopTipModal } = await import("./desktop-tip-modal");
+  vi.spyOn(Storage.prototype, "setItem").mockImplementation(() => {
+    throw new DOMException("Storage unavailable", "QuotaExceededError");
+  });
+  const view = render(<DesktopTipModal />);
+  expect(screen.getByText("Best viewed on desktop")).toBeInTheDocument();
+  fireEvent.click(screen.getByRole("button", { name: "Continue anyway" }));
+  expect(screen.queryByText("Best viewed on desktop")).not.toBeInTheDocument();
+  view.unmount();
+  render(<DesktopTipModal />);
+  expect(screen.queryByText("Best viewed on desktop")).not.toBeInTheDocument();
+});
+
+it("supports Escape when storage rejects writes", async () => {
+  vi.resetModules();
+  const { DesktopTipModal } = await import("./desktop-tip-modal");
+  vi.spyOn(Storage.prototype, "setItem").mockImplementation(() => { throw new Error("Denied"); });
+  render(<DesktopTipModal />);
+  fireEvent.keyDown(document, { key: "Escape" });
+  expect(screen.queryByText("Best viewed on desktop")).not.toBeInTheDocument();
+});
diff --git a/apps/app/src/components/desktop-tip-modal.tsx b/apps/app/src/components/desktop-tip-modal.tsx
index 582ea04..168dad2 100644
--- a/apps/app/src/components/desktop-tip-modal.tsx
+++ b/apps/app/src/components/desktop-tip-modal.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useSyncExternalStore } from "react";
 
 const DISMISSED_KEY = "desktop-tip-dismissed";
+let dismissedInMemory = false;
 
 let listeners: Array<() => void> = [];
 function emitChange() {
@@ -18,6 +19,7 @@ export function DesktopTipModal() {
       };
     },
     () => {
+      if (dismissedInMemory) return false;
       try { return !sessionStorage.getItem(DISMISSED_KEY); }
       catch { return false; }
     },
@@ -25,6 +27,7 @@ export function DesktopTipModal() {
   );
 
   const dismiss = () => {
+    dismissedInMemory = true;
     try { sessionStorage.setItem(DISMISSED_KEY, "1"); }
     catch { /* privacy-restricted context */ }
     emitChange();