@marimo-team/islands 0.25.3-dev237 → 0.25.3-dev239

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.25.3-dev237",
+  "version": "0.25.3-dev239",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/ui/__tests__/fullscreen.test.tsx

@@ -1,8 +1,50 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { act, render } from "@testing-library/react";
+import { act, render, renderHook } from "@testing-library/react";
 import { useRef } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { useIsFullScreen } from "../fullscreen";
+import { useFullScreenClass, useIsFullScreen } from "../fullscreen";
+
+describe("useFullScreenClass", () => {
+  let fullscreenElement: Element | null = null;
+
+  beforeEach(() => {
+    fullscreenElement = null;
+    Object.defineProperty(document, "fullscreenElement", {
+      configurable: true,
+      get: () => fullscreenElement,
+    });
+  });
+
+  afterEach(() => {
+    Reflect.deleteProperty(document, "fullscreenElement");
+    document.documentElement.classList.remove("marimo-fullscreen");
+  });
+
+  it("reflects fullscreen state at mount and on entry and exit", () => {
+    fullscreenElement = document.body;
+    const { unmount } = renderHook(useFullScreenClass);
+    expect(document.documentElement).toHaveClass("marimo-fullscreen");
+
+    fullscreenElement = null;
+    act(() => document.dispatchEvent(new Event("fullscreenchange")));
+    expect(document.documentElement).not.toHaveClass("marimo-fullscreen");
+
+    fullscreenElement = document.body;
+    act(() => document.dispatchEvent(new Event("fullscreenchange")));
+    expect(document.documentElement).toHaveClass("marimo-fullscreen");
+    unmount();
+  });
+
+  it("removes the class and listener on unmount", () => {
+    fullscreenElement = document.body;
+    const { unmount } = renderHook(useFullScreenClass);
+    unmount();
+    expect(document.documentElement).not.toHaveClass("marimo-fullscreen");
+
+    act(() => document.dispatchEvent(new Event("fullscreenchange")));
+    expect(document.documentElement).not.toHaveClass("marimo-fullscreen");
+  });
+});
 
 const FullScreenFlag = ({ label }: { label: string }) => {
   const ref = useRef<HTMLDivElement>(null);

package/src/components/ui/fullscreen.tsx

@@ -4,7 +4,12 @@ import type { Popover } from "radix-ui";
 
 type PopoverContentProps = Popover.PopoverContentProps;
 
-import React, { type RefObject, useState, useSyncExternalStore } from "react";
+import React, {
+  type RefObject,
+  useLayoutEffect,
+  useState,
+  useSyncExternalStore,
+} from "react";
 import { isInVscodeExtension } from "@/core/vscode/is-in-vscode";
 import { useEventListener } from "@/hooks/useEventListener";
 
@@ -14,6 +19,25 @@ const VSCODE_OUTPUT_CONTAINER_SELECTOR = "[data-vscode-output-container]";
 // Otherwise, we give a 30px buffer to the max-height.
 export const MAX_HEIGHT_OFFSET = isInVscodeExtension() ? 0 : 30;
 
+// An explicit class avoids document-wide :has(:fullscreen) style invalidation.
+export function useFullScreenClass() {
+  useLayoutEffect(() => {
+    const syncFullScreenClass = () => {
+      document.documentElement.classList.toggle(
+        "marimo-fullscreen",
+        Boolean(document.fullscreenElement),
+      );
+    };
+
+    syncFullScreenClass();
+    document.addEventListener("fullscreenchange", syncFullScreenClass);
+    return () => {
+      document.removeEventListener("fullscreenchange", syncFullScreenClass);
+      document.documentElement.classList.remove("marimo-fullscreen");
+    };
+  }, []);
+}
+
 /**
  * Get the full screen element if we are in full screen mode
  */

package/src/core/MarimoApp.tsx

@@ -7,6 +7,7 @@ import { Provider as SlotzProvider } from "@marimo-team/react-slotz";
 import type React from "react";
 import { memo, type PropsWithChildren, Suspense } from "react";
 import { TailwindIndicator } from "@/components/debug/indicator";
+import { useFullScreenClass } from "@/components/ui/fullscreen";
 import { useAppConfig, useResolvedMarimoConfig } from "@/core/config/config";
 import { getInitialAppMode } from "@/core/mode";
 import { CssVariables } from "@/theme/ThemeProvider";
@@ -58,6 +59,7 @@ export function preloadPage(mode: string) {
  * The root component of the Marimo app.
  */
 export const MarimoApp: React.FC = memo(() => {
+  useFullScreenClass();
   const [userConfig] = useResolvedMarimoConfig();
   const appConfig = useAppConfig();
   const editorFontSize = toRem(userConfig.display.code_editor_font_size);

package/src/css/common.css

@@ -31,7 +31,7 @@
 }
 
 /* When any element is fullscreen, hide the element with this class */
-:root:has(:fullscreen) .hide-on-fullscreen {
+:root.marimo-fullscreen .hide-on-fullscreen {
   display: none !important;
 }