@marimo-team/frontend 0.23.12-dev9 → 0.23.12

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-CrgYGp5w.js"></script>
+    <script type="module" crossorigin src="./assets/index-BjsskD4V.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-y72bE5iF.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-LvLJmgfZ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-Bj1aDYRI.js">
@@ -133,7 +133,7 @@
     <link rel="modulepreload" crossorigin href="./assets/debounce-OiXznToA.js">
     <link rel="modulepreload" crossorigin href="./assets/database-zap-DIlSqcdp.js">
     <link rel="modulepreload" crossorigin href="./assets/main-DmhaVp6Y.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-BidbgSuB.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-06TDmJ8V.js">
     <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-Bo313Z9X.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-BCXa3Ocm.js">
     <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-DEHK-C20.js">
@@ -147,38 +147,38 @@
     <link rel="modulepreload" crossorigin href="./assets/usePress-mjvipKvz.js">
     <link rel="modulepreload" crossorigin href="./assets/input-b2KTOk0X.js">
     <link rel="modulepreload" crossorigin href="./assets/ImperativeModal-MQnbMIO2.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-BWqpbaiv.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-DgWTiCtG.js">
     <link rel="modulepreload" crossorigin href="./assets/multi-map-9ogswH46.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-Bjh7v4lb.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-C7RH0Nc7.js">
     <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-DfGLyCbP.js">
     <link rel="modulepreload" crossorigin href="./assets/links-DK7te6sJ.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-DFXV3Rm5.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-DNaOKKqW.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-CyasABTK.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-IBNGDypD.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-icon-BCIGtBo0.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-DXJCvdz4.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-DI-YUWev.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-ClDZE-YW.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-Cq4mwWYz.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-mVfTJz3V.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-B3ypjIx-.js">
     <link rel="modulepreload" crossorigin href="./assets/package-BoMcg6sy.js">
     <link rel="modulepreload" crossorigin href="./assets/sparkles-DctOjjEz.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-G8Q8ZYoi.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-BQt_FXJL.js">
     <link rel="modulepreload" crossorigin href="./assets/eye-off-DI0EQXw0.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-cw-DcEasnos.js">
-    <link rel="modulepreload" crossorigin href="./assets/tree-actions-CesD4Rcl.js">
+    <link rel="modulepreload" crossorigin href="./assets/tree-actions-lVyJAYy7.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-DTBVbtl-.js">
-    <link rel="modulepreload" crossorigin href="./assets/html-to-image-TCtIotr9.js">
-    <link rel="modulepreload" crossorigin href="./assets/focus-CocfMydm.js">
+    <link rel="modulepreload" crossorigin href="./assets/html-to-image-CbQeOjEJ.js">
+    <link rel="modulepreload" crossorigin href="./assets/focus-DqhVePQT.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-CT1LpOBD.js">
     <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-CUQODgGJ.js">
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-P--XWZhg.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-5FQGJX7Z-C6VN0dQj.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-CGZTB2Dx.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-C1yypOYF.js">
     <link rel="modulepreload" crossorigin href="./assets/command-CsbsBLBw.js">
     <link rel="modulepreload" crossorigin href="./assets/field-CA9HCE2Y.js">
     <link rel="modulepreload" crossorigin href="./assets/popover-DMNO6Poc.js">
     <link rel="modulepreload" crossorigin href="./assets/errors-48KFPvCp.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-DgEarSps.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-VxqV5OSK.js">
     <link rel="modulepreload" crossorigin href="./assets/table-Fk_msRcD.js">
     <link rel="modulepreload" crossorigin href="./assets/useIframeCapabilities-DuGyzPVb.js">
     <link rel="modulepreload" crossorigin href="./assets/error-banner-C4DZksWV.js">
@@ -198,21 +198,21 @@
     <link rel="modulepreload" crossorigin href="./assets/plus-CExKUszm.js">
     <link rel="modulepreload" crossorigin href="./assets/trash-2-CjPoUZCP.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-CgWOEYeG.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-CxKHBYIA.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-FFLZqPUK.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-DVEV2j1H.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-CPbVtjKW.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-BzxoPflZ.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-BbgM2h8n.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-oHsVFerC.js">
     <link rel="modulepreload" crossorigin href="./assets/icons-D3YFXNmD.js">
-    <link rel="modulepreload" crossorigin href="./assets/radio-group-Czn6pjhm.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-BDx00oB1.js">
+    <link rel="modulepreload" crossorigin href="./assets/radio-group-BaOG2bSA.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-3UBj62S1.js">
     <link rel="modulepreload" crossorigin href="./assets/objectWithoutPropertiesLoose-Msf1n32r.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-DSv-aO_T.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-DtUWOxnZ.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-CNyK8G1T.js">
     <link rel="modulepreload" crossorigin href="./assets/file-headphone-CUN2DC78.js">
     <link rel="modulepreload" crossorigin href="./assets/file-BvoBtS_V.js">
     <link rel="modulepreload" crossorigin href="./assets/image-jhXeQEgs.js">
-    <link rel="modulepreload" crossorigin href="./assets/file-icons-BwFX01F6.js">
+    <link rel="modulepreload" crossorigin href="./assets/file-icons-BeJWUbBH.js">
     <link rel="modulepreload" crossorigin href="./assets/switch-DHhZkGEv.js">
     <link rel="modulepreload" crossorigin href="./assets/events-BRbNg7Li.js">
     <link rel="modulepreload" crossorigin href="./assets/globals-BDWM3c_z.js">
@@ -221,11 +221,11 @@
     <link rel="modulepreload" crossorigin href="./assets/memoize-Tp7rARFe.js">
     <link rel="modulepreload" crossorigin href="./assets/get-C-qh_et5.js">
     <link rel="modulepreload" crossorigin href="./assets/_baseSet-CsW0tABf.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-CzwQl1aE.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-DD6m9X2h.js">
     <link rel="modulepreload" crossorigin href="./assets/label-CFvCMYuj.js">
-    <link rel="modulepreload" crossorigin href="./assets/textarea-Dz09niIv.js">
+    <link rel="modulepreload" crossorigin href="./assets/textarea-BM7hAwR3.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-ccw-CUkO1Vlo.js">
-    <link rel="modulepreload" crossorigin href="./assets/form-DgnBiuvP.js">
+    <link rel="modulepreload" crossorigin href="./assets/form-pEJO4Mq_.js">
     <link rel="modulepreload" crossorigin href="./assets/renderShortcut-CKbqJyj4.js">
     <link rel="modulepreload" crossorigin href="./assets/useBoolean-48bgGoSa.js">
     <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-zUHU--0D.js">
@@ -247,7 +247,7 @@
     <link rel="stylesheet" crossorigin href="./assets/cells-BVzo2MHf.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DdDKmWlR.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-BQtz7-np.css">
-    <link rel="stylesheet" crossorigin href="./assets/index-Bj8QWDiJ.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-CaelsqOA.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

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

package/src/components/data-table/TableBottomBar.tsx

@@ -3,6 +3,7 @@
 
 import type { RowSelectionState, Table } from "@tanstack/react-table";
 import { useLocale } from "react-aria";
+import { isStaticNotebook } from "@/core/static/static-state";
 import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
@@ -40,6 +41,8 @@ export const TableBottomBar = <TData,>({
   className,
 }: TableBottomBarProps<TData>) => {
   const { locale } = useLocale();
+  // Pagination fetches each page via a kernel RPC, absent in static exports.
+  const isStatic = isStaticNotebook();
   const handleSelectAllRows = (value: boolean) => {
     if (!onRowSelectionChange) {
       return;
@@ -171,7 +174,7 @@ export const TableBottomBar = <TData,>({
         <CellSelectionStats table={table} className="lg:hidden" />
       </div>
       <div className="ml-auto lg:ml-0 lg:justify-self-center flex items-center shrink-0">
-        {pagination && (
+        {pagination && !isStatic && (
           <DataTablePagination
             table={table}
             tableLoading={tableLoading}

package/src/components/data-table/data-table.tsx

@@ -25,6 +25,7 @@ import { useLocale } from "react-aria";
 
 import { Button } from "@/components/ui/button";
 import { Table } from "@/components/ui/table";
+import { isStaticNotebook } from "@/core/static/static-state";
 import { Banner } from "@/plugins/impl/common/error-banner";
 import type {
   CalculateTopKRows,
@@ -182,6 +183,11 @@ const DataTableInternal = <TData,>({
   onViewedRowChange,
   renderTableExplorerPanel,
 }: DataTableProps<TData>) => {
+  // The top bar's controls (search, filters, column explorer, chart builder)
+  // all require a live kernel, which static exports don't have.
+  const isStatic = isStaticNotebook();
+  const showTableTopBar = !isStatic;
+
   const [showLoadingBar, setShowLoadingBar] = React.useState<boolean>(false);
   const { locale } = useLocale();
 
@@ -267,11 +273,12 @@ const DataTableInternal = <TData,>({
         }
       : {}),
     manualSorting: manualSorting,
+    enableSorting: !isStatic,
     enableMultiSort: true,
     getSortedRowModel: getSortedRowModel(),
     // filtering
     manualFiltering: true,
-    enableColumnFilters: showFilters,
+    enableColumnFilters: showFilters && !isStatic,
     getFilteredRowModel: getFilteredRowModel(),
     onColumnFiltersChange: onFiltersChange,
     // selection
@@ -355,22 +362,24 @@ const DataTableInternal = <TData,>({
             part="table-wrapper"
             className={cn(className || "rounded-md border overflow-hidden")}
           >
-            <TableTopBar
-              table={table}
-              showSearch={showSearch}
-              searchQuery={searchQuery}
-              onSearchQueryChange={onSearchQueryChange}
-              reloading={reloading}
-              showChartBuilder={showChartBuilder}
-              isChartBuilderOpen={isChartBuilderOpen}
-              toggleDisplayHeader={toggleDisplayHeader}
-              showTableExplorer={showTableExplorer}
-              togglePanel={togglePanel}
-              isAnyPanelOpen={isAnyPanelOpen}
-              downloadAs={downloadAs}
-              sizeBytes={sizeBytes}
-              sizeBytesIsLoading={sizeBytesIsLoading}
-            />
+            {showTableTopBar && (
+              <TableTopBar
+                table={table}
+                showSearch={showSearch}
+                searchQuery={searchQuery}
+                onSearchQueryChange={onSearchQueryChange}
+                reloading={reloading}
+                showChartBuilder={showChartBuilder}
+                isChartBuilderOpen={isChartBuilderOpen}
+                toggleDisplayHeader={toggleDisplayHeader}
+                showTableExplorer={showTableExplorer}
+                togglePanel={togglePanel}
+                isAnyPanelOpen={isAnyPanelOpen}
+                downloadAs={downloadAs}
+                sizeBytes={sizeBytes}
+                sizeBytesIsLoading={sizeBytesIsLoading}
+              />
+            )}
             {allUserColumnsHidden && (
               <Banner className="mb-1 mx-2 rounded flex items-center justify-between">
                 <span>All columns are hidden.</span>

package/src/components/data-table/utils.ts

@@ -4,6 +4,7 @@ import type { Table } from "@tanstack/react-table";
 import type { TableData } from "@/plugins/impl/DataTablePlugin";
 import { vegaLoadData } from "@/plugins/impl/vega/loader";
 import { jsonParseWithSpecialChar } from "@/utils/json/json-parser";
+import { isRecord } from "@/utils/records";
 import { getMimeValues } from "./mime-cell";
 import type { DataType } from "@/core/kernel/messages";
 import {
@@ -232,10 +233,6 @@ function stripHtml(html: string): string {
 
 const HTML_MIMETYPES = new Set(["text/html", "text/markdown"]);
 
-function isRecord(value: unknown): value is Record<string, unknown> {
-  return value !== null && typeof value === "object" && !Array.isArray(value);
-}
-
 /**
  * Get clipboard-ready text and optional HTML for a cell.
  *

package/src/components/editor/ai/__tests__/completion-utils.test.ts

@@ -1,6 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { beforeEach, describe, expect, it, type Mock, vi } from "vitest";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  type Mock,
+  vi,
+} from "vitest";
 import { variableName } from "@/__tests__/branded";
+import * as aiContext from "@/core/ai/context/context";
 import { getCodes } from "@/core/codemirror/copilot/getCodes";
 import { dataSourceConnectionsAtom } from "@/core/datasets/data-source-connections";
 import { DUCKDB_ENGINE } from "@/core/datasets/engines";
@@ -8,10 +17,11 @@ import { datasetsAtom } from "@/core/datasets/state";
 import type { DatasetsState } from "@/core/datasets/types";
 import { store } from "@/core/state/jotai";
 import { variablesAtom } from "@/core/variables/state";
-import type { UIMessage } from "ai";
+import type { FileUIPart, UIMessage } from "ai";
 import {
   codeToCells,
   getAICompletionBody,
+  getAICompletionBodyWithAttachments,
   isContextAttachment,
   MARIMO_CONTEXT_PART_TYPE,
   resolveChatContext,
@@ -440,6 +450,42 @@ describe("isContextAttachment", () => {
   });
 });
 
+describe("context attachment stamping", () => {
+  const rawAttachment: FileUIPart = {
+    type: "file",
+    mediaType: "image/png",
+    url: "data:image/png;base64,abc",
+  };
+
+  beforeEach(() => {
+    vi.spyOn(aiContext, "getAIContextRegistry").mockReturnValue({
+      parseAllContextIds: () => ["data://t1"],
+      formatContextForAI: () => '<data name="t1" />',
+      getAttachmentsForContext: async () => [rawAttachment],
+    } as unknown as ReturnType<typeof aiContext.getAIContextRegistry>);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("stamps chat attachments as context-derived", async () => {
+    const { attachments } = await resolveChatContext("see @data://t1");
+    expect(attachments).toHaveLength(1);
+    expect(isContextAttachment(attachments[0])).toBe(true);
+    // The original attachment is left untouched (we return a stamped copy).
+    expect(rawAttachment.providerMetadata).toBeUndefined();
+  });
+
+  it("stamps completion attachments the same way as chat", async () => {
+    const { attachments } = await getAICompletionBodyWithAttachments({
+      input: "see @data://t1",
+    });
+    expect(attachments).toHaveLength(1);
+    expect(isContextAttachment(attachments[0])).toBe(true);
+  });
+});
+
 describe("codeToCells", () => {
   it("should return empty array for empty string", () => {
     const code = "";

package/src/components/editor/ai/completion-utils.ts

@@ -9,6 +9,7 @@ import {
 import type { ReactCodeMirrorRef } from "@uiw/react-codemirror";
 import type { DataUIPart, FileUIPart, UIMessage } from "ai";
 import { getAIContextRegistry } from "@/core/ai/context/context";
+import type { ContextLocatorId } from "@/core/ai/context/registry";
 import { getCodes } from "@/core/codemirror/copilot/getCodes";
 import type { LanguageAdapterType } from "@/core/codemirror/language/types";
 import type { AiCompletionRequest } from "@/core/network/types";
@@ -89,20 +90,51 @@ export function isContextAttachment(part: UIMessage["parts"][number]): boolean {
 }
 
 /**
- * Resolve @-context for messages. They represent referenced
- * datasets, variables, or other context from the user's prompt.
+ * Stamp a context-derived attachment with a provenance marker.
+ *
+ * Some @-mentions resolve to file attachments (e.g. a cell's image output),
+ * which get appended to the user message right alongside files the user
+ * uploaded by hand. Once they're in the message the two are indistinguishable,
+ * so we mark the context-derived ones. This matters on message edit: we
+ * re-resolve context from the edited text, and `isContextAttachment` lets us
+ * drop only the stale context attachments while preserving the user's own
+ * uploads
  */
-export async function resolveChatContext(
+function stampContextAttachment(attachment: FileUIPart): FileUIPart {
+  return {
+    ...attachment,
+    providerMetadata: {
+      ...attachment.providerMetadata,
+      // Merge within the `marimo` namespace so we don't clobber any other
+      // marimo metadata a provider may have already set.
+      marimo: {
+        ...attachment.providerMetadata?.marimo,
+        ...CONTEXT_ATTACHMENT_METADATA.marimo,
+      },
+    },
+  };
+}
+
+interface ResolvedContext {
+  plainText: string;
+  contextIds: ContextLocatorId[];
+  attachments: FileUIPart[];
+}
+
+/**
+ * Parse @-context for messages
+ */
+async function resolveContextAttachments(
   input: string,
-): Promise<ResolvedChatContext> {
+): Promise<ResolvedContext> {
   if (!input.includes(CONTEXT_TRIGGER)) {
-    return { contextPart: null, attachments: [] };
+    return { plainText: "", contextIds: [], attachments: [] };
   }
 
   const registry = getAIContextRegistry(store);
   const contextIds = registry.parseAllContextIds(input);
   if (contextIds.length === 0) {
-    return { contextPart: null, attachments: [] };
+    return { plainText: "", contextIds: [], attachments: [] };
   }
 
   const plainText = registry.formatContextForAI(contextIds);
@@ -110,20 +142,24 @@ export async function resolveChatContext(
   let attachments: FileUIPart[] = [];
   try {
     const resolved = await registry.getAttachmentsForContext(contextIds);
-    attachments = resolved.map((attachment) => ({
-      ...attachment,
-      providerMetadata: {
-        ...attachment.providerMetadata,
-        marimo: {
-          ...attachment.providerMetadata?.marimo,
-          ...CONTEXT_ATTACHMENT_METADATA.marimo,
-        },
-      },
-    }));
+    attachments = resolved.map(stampContextAttachment);
   } catch (error) {
     Logger.error("Error getting attachments:", error);
   }
 
+  return { plainText, contextIds, attachments };
+}
+
+/**
+ * Resolve @-context for messages. They represent referenced
+ * datasets, variables, or other context from the user's prompt.
+ */
+export async function resolveChatContext(
+  input: string,
+): Promise<ResolvedChatContext> {
+  const { plainText, contextIds, attachments } =
+    await resolveContextAttachments(input);
+
   let contextPart: MarimoContextUIPart | null = null;
   if (plainText.trim()) {
     contextPart = {
@@ -141,31 +177,13 @@ export async function resolveChatContext(
 export async function getAICompletionBodyWithAttachments({
   input,
 }: Opts): Promise<AICompletionBodyWithAttachments> {
-  let contextString = "";
-  let attachments: FileUIPart[] = [];
-
-  // Skip if no '@' in the input
-  if (input.includes("@")) {
-    const registry = getAIContextRegistry(store);
-    const contextIds = registry.parseAllContextIds(input);
-
-    // Get context string
-    contextString = registry.formatContextForAI(contextIds);
-
-    // Get attachments
-    try {
-      attachments = await registry.getAttachmentsForContext(contextIds);
-      Logger.debug("Included attachments", attachments.length);
-    } catch (error) {
-      Logger.error("Error getting attachments:", error);
-    }
-  }
+  const { plainText, attachments } = await resolveContextAttachments(input);
 
   return {
     body: {
       includeOtherCode: getCodes(""),
       context: {
-        plainText: contextString,
+        plainText,
         schema: [],
         variables: [],
       },

package/src/components/editor/app-container.tsx

@@ -48,7 +48,9 @@ export const AppContainer: React.FC<PropsWithChildren<Props>> = ({
               "bg-background w-full h-full text-textColor",
               "flex flex-col overflow-y-auto",
               width === "full" && "config-width-full",
-              width === "columns" ? "overflow-x-auto" : "overflow-x-hidden",
+              width === "columns"
+                ? "overflow-x-auto"
+                : "overflow-x-auto sm:overflow-x-hidden",
               "print:height-fit",
             )}
           >

package/src/components/editor/output/ImageOutput.tsx

@@ -5,8 +5,8 @@ import type { JSX } from "react";
 interface Props {
   src: string;
   alt?: string;
-  width?: number;
-  height?: number;
+  width?: number | string;
+  height?: number | string;
   className?: string;
 }
 
@@ -17,9 +17,18 @@ export const ImageOutput = ({
   height,
   className,
 }: Props): JSX.Element => {
+  // Convert numeric values to pixel strings, pass string values (like "100%") as-is
+  const style: React.CSSProperties = {};
+  if (width !== undefined) {
+    style.width = typeof width === "number" ? `${width}px` : width;
+  }
+  if (height !== undefined) {
+    style.height = typeof height === "number" ? `${height}px` : height;
+  }
+
   return (
     <span className={className}>
-      <img src={src} alt={alt} width={width} height={height} />
+      <img src={src} alt={alt} style={style} />
     </span>
   );
 };

package/src/components/editor/renderers/vertical-layout/vertical-layout-wrapper.tsx

@@ -32,9 +32,9 @@ export const VerticalLayoutWrapper: React.FC<PropsWithChildren<Props>> = ({
           // This padding needs to be the same from above to be correctly applied
           "pb-24 sm:pb-12",
           appConfig.width === "compact" &&
-            "max-w-(--content-width) min-w-[400px]",
+            "max-w-(--content-width) sm:min-w-[400px]",
           appConfig.width === "medium" &&
-            "max-w-(--content-width-medium) min-w-[400px]",
+            "max-w-(--content-width-medium) sm:min-w-[400px]",
           appConfig.width === "columns" && "w-fit",
           appConfig.width === "full" && "max-w-full",
           // Hide the cells for a fake loading effect, to avoid flickering

package/src/core/codemirror/go-to-definition/__tests__/commands.test.ts

@@ -253,6 +253,73 @@ a = 10`;
     `);
   });
 
+  test("from-import alias is the binding, not the imported name", async () => {
+    const code = `\
+from math import sin as my_sin
+print(my_sin)`;
+    view = createEditor(code);
+    const usagePosition = code.lastIndexOf("my_sin");
+    const result = goToVariableDefinition(view, "my_sin", usagePosition);
+
+    expect(result).toBe(true);
+    await tick();
+    // The alias `my_sin` (after `as`) is the real binding.
+    expect(renderEditorView(view)).toMatchInlineSnapshot(`
+      "
+      from math import sin as my_sin
+                              ^
+      print(my_sin)
+      "
+    `);
+  });
+
+  test("module path in from-import is not a local definition", async () => {
+    const code = `\
+from math import sin
+print(math)`;
+    view = createEditor(code);
+    const usagePosition = code.lastIndexOf("math");
+    // `math` is a module reference in the from-clause, not a binding in this
+    // cell, so the scoped resolver should return false and let the caller fall
+    // through to cross-cell resolution.
+    const result = goToVariableDefinition(view, "math", usagePosition);
+
+    expect(result).toBe(false);
+    expect(view.state.selection.main.head).toBe(0);
+  });
+
+  test("imported name without `as` is a local definition", async () => {
+    const code = `\
+from math import sin
+print(sin)`;
+    view = createEditor(code);
+    const usagePosition = code.lastIndexOf("sin");
+    const result = goToVariableDefinition(view, "sin", usagePosition);
+
+    expect(result).toBe(true);
+    await tick();
+    expect(renderEditorView(view)).toMatchInlineSnapshot(`
+      "
+      from math import sin
+                       ^
+      print(sin)
+      "
+    `);
+  });
+
+  test("imported name shadowed by `as` is not a binding", async () => {
+    const code = `\
+from math import sin as my_sin
+print(sin)`;
+    view = createEditor(code);
+    const usagePosition = code.lastIndexOf("sin");
+    // `sin` here refers to nothing in this cell (it was renamed to `my_sin`),
+    // so the scoped resolver should return false.
+    const result = goToVariableDefinition(view, "sin", usagePosition);
+
+    expect(result).toBe(false);
+  });
+
   test("selects outer-scope function declaration", async () => {
     view = createEditor(`\
 def x():

package/src/core/codemirror/go-to-definition/__tests__/utils.test.ts

@@ -133,4 +133,51 @@ output = _x + 10`;
     await tick();
     expect(view.state.selection.main.head).toBe(code.indexOf("_x = 10"));
   });
+
+  test("falls through to cross-cell when in-cell occurrence is only a module path in a from-import", async () => {
+    // Regression: ImportStatement used to register every VariableName child
+    // (the module path and pre-`as` names) as in-cell declarations, so the
+    // local-first short-circuit would steal F12 from cross-cell resolution.
+    const moduleCell = cellId("module-cell");
+    const usageCell = cellId("usage-cell");
+    const moduleCode = `mymodule = 100`;
+    const usageCode = `\
+from mymodule import something
+print(mymodule)`;
+
+    const moduleView = createEditor(moduleCode, moduleCode.length);
+    const usageView = createEditor(
+      usageCode,
+      usageCode.lastIndexOf("mymodule"),
+    );
+    views.push(moduleView, usageView);
+
+    const notebook = initialNotebookState();
+    notebook.cellHandles[moduleCell] = {
+      current: { editorView: moduleView, editorViewOrNull: moduleView },
+    } as never;
+    notebook.cellHandles[usageCell] = {
+      current: { editorView: usageView, editorViewOrNull: usageView },
+    } as never;
+
+    store.set(notebookAtom, notebook);
+    store.set(variablesAtom, {
+      [variableName("mymodule")]: {
+        dataType: "int",
+        declaredBy: [moduleCell],
+        name: variableName("mymodule"),
+        usedBy: [usageCell],
+        value: "100",
+      },
+    });
+
+    const result = goToDefinitionAtCursorPosition(usageView);
+
+    expect(result).toBe(true);
+    await tick();
+    // Cross-cell jump: moduleView's cursor should land on `mymodule = 100`.
+    expect(moduleView.state.selection.main.head).toBe(
+      moduleCode.indexOf("mymodule"),
+    );
+  });
 });