@marimo-team/frontend 0.23.16-dev43 → 0.23.16-dev45

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-BLnlUAQy.js"></script>
+    <script type="module" crossorigin src="./assets/index-Dmz2_F1x.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-TXkS1QI3.js">
     <link rel="modulepreload" crossorigin href="./assets/objects-BlG0ZrO0.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-LvLJmgfZ.js">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.23.16-dev43",
+  "version": "0.23.16-dev45",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/editor/__tests__/viewer-banner.test.tsx

@@ -54,6 +54,20 @@ describe("ViewerBanner", () => {
     expect(container).toBeEmptyDOMElement();
   });
 
+  it("pins the banner without reserving layout space", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, true);
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <ViewerBanner />
+        </TooltipProvider>
+      </Provider>,
+    );
+    const wrapper = screen.getByTestId("takeover-button").closest("div.sticky");
+    expect(wrapper).toHaveClass("sticky", "top-2", "h-0");
+  });
+
   it("renders nothing in present mode", () => {
     const store = createStore();
     store.set(kioskModeAtom, true);

package/src/components/editor/viewer-banner.tsx

@@ -51,8 +51,11 @@ export const ViewerBanner = () => {
     }
   };
 
+  // A zero-height sticky row pins the banner to the top-left of the notebook
+  // scroll area, so it stays visible while scrolling without reserving space in
+  // the flow.
   return (
-    <div className="absolute top-2 left-2 z-50 w-fit print:hidden">
+    <div className="sticky top-2 left-2 z-50 h-0 ml-2 w-fit print:hidden">
       <Banner
         kind="info"
         className="flex items-center gap-2 rounded px-2 py-1 text-xs shadow-sm"

package/src/core/edit-app.tsx

@@ -164,6 +164,7 @@ export const EditApp: React.FC<AppProps> = ({
         width={appConfig.width}
         onReconnect={reconnect}
       >
+        <ViewerBanner />
         <AppHeader
           connection={connection}
           className={cn(
@@ -179,8 +180,6 @@ export const EditApp: React.FC<AppProps> = ({
           )}
         </AppHeader>
 
-        <ViewerBanner />
-
         {/* Don't render until we have a single cell. NotStartedConnectionAlert
             still covers the "no remote runtime started" prompt. */}
         <ProgressiveBoundary