@marimo-team/islands 0.22.1-dev9 → 0.22.1

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

@@ -69,43 +69,39 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
   }
 
   return (
-    <div className="flex items-center h-10 px-2 border-b gap-3">
-      {/* always-visible search */}
+    <div className="flex items-center h-10 px-2 border-b gap-2">
       {onSearchQueryChange && enableSearch && (
-        <div className="flex items-center">
-          <div className="flex items-center gap-1 rounded-full border px-2 w-56">
-            <SearchIcon className="w-4 h-4 text-muted-foreground shrink-0" />
-            <input
-              ref={inputRef}
-              type="text"
-              className="h-6 border-none bg-transparent focus:outline-hidden text-sm w-full min-w-0"
-              value={internalValue}
-              onKeyDown={(e) => {
-                if (e.key === "Escape") {
-                  setInternalValue("");
-                  inputRef.current?.blur();
-                }
-              }}
-              onChange={(e) => setInternalValue(e.target.value)}
-              placeholder="Search..."
-            />
-            {reloading && <Spinner size="small" />}
-            {internalValue && (
-              <Button
-                variant="text"
-                size="xs"
-                className="h-5 w-5 p-0 shrink-0"
-                onClick={() => setInternalValue("")}
-              >
-                <XIcon className="w-3 h-3 text-muted-foreground" />
-              </Button>
-            )}
-          </div>
+        <div className="flex flex-1 items-center gap-1 px-2 rounded-sm focus-within:ring-1 focus-within:ring-border transition-shadow">
+          <SearchIcon className="w-4 h-4 text-muted-foreground shrink-0" />
+          <input
+            ref={inputRef}
+            type="text"
+            className="h-6 border-none bg-transparent focus:outline-hidden text-sm w-full min-w-0"
+            value={internalValue}
+            onKeyDown={(e) => {
+              if (e.key === "Escape") {
+                setInternalValue("");
+                inputRef.current?.blur();
+              }
+            }}
+            onChange={(e) => setInternalValue(e.target.value)}
+            placeholder="Search..."
+          />
+          {reloading && <Spinner size="small" />}
+          {internalValue && (
+            <Button
+              variant="text"
+              size="xs"
+              className="h-5 w-5 p-0 shrink-0"
+              onClick={() => setInternalValue("")}
+            >
+              <XIcon className="w-3 h-3 text-muted-foreground" />
+            </Button>
+          )}
         </div>
       )}
 
-      {/* actions grouped together */}
-      <div className="flex items-center gap-1 shrink-0">
+      <div className="flex items-center shrink-0">
         {showChartBuilder && (
           <Button
             variant="text"
@@ -117,7 +113,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
             onClick={toggleDisplayHeader}
           >
             <ChartSplineIcon className="w-3.5 h-3.5" />
-            Chart Builder
+            Visualize
           </Button>
         )}
         {showTableExplorer && togglePanel && (
@@ -131,7 +127,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
             onClick={() => togglePanel(PANEL_TYPES.ROW_VIEWER)}
           >
             <PanelRightIcon className="w-3.5 h-3.5" />
-            Table Explorer
+            Explorer
           </Button>
         )}
         {downloadAs && <ExportMenu downloadAs={downloadAs} />}

package/src/components/data-table/__tests__/columns.test.tsx

@@ -230,7 +230,7 @@ describe("generateColumns", () => {
     });
 
     // "age" is a number column — should auto right-align
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[1].cell as any)({
       column: {
         columnDef: columns[1],
@@ -241,7 +241,7 @@ describe("generateColumns", () => {
     expect(cell?.props.className).toContain("text-right");
 
     // "name" is a string column — should remain left-aligned
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const nameCell = (columns[0].cell as any)({
       column: {
         columnDef: columns[0],
@@ -261,7 +261,7 @@ describe("generateColumns", () => {
     });
 
     // "age" is numeric but explicitly set to left
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[1].cell as any)({
       column: {
         columnDef: columns[1],
@@ -301,7 +301,7 @@ describe("generateColumns", () => {
     });
 
     // Assuming getCellStyleClass is a function that returns a class name
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const cell = (columns[0].cell as any)({
       column: {
         columnDef: columns[0],
@@ -333,7 +333,7 @@ describe("generateColumns", () => {
     // Right-justified: parent wrapper should have items-end, sort/filter icons should flip to the left
     const { container: rightContainer } = render(
       <TooltipProvider>
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        {/* oxlint-disable-next-line typescript/no-explicit-any */}
         {(columns[0].header as any)({ column: mockColumn(columns[0]) })}
       </TooltipProvider>,
     );
@@ -347,7 +347,7 @@ describe("generateColumns", () => {
     // Center-justified: parent wrapper should have items-center, no flex-row-reverse
     const { container: centerContainer } = render(
       <TooltipProvider>
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        {/* oxlint-disable-next-line typescript/no-explicit-any */}
         {(columns[1].header as any)({ column: mockColumn(columns[1]) })}
       </TooltipProvider>,
     );
@@ -572,7 +572,7 @@ describe("LocaleNumber", () => {
         <LocaleNumber value={1_234_567.89} />
       </I18nProvider>,
     );
-    // eslint-disable-next-line no-irregular-whitespace
+    // oxlint-disable-next-line no-irregular-whitespace
     expect(container.textContent).toMatchInlineSnapshot(`"1 234 567,89"`);
   });
 

package/src/components/data-table/cell-hover-template/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 
 export interface CellHoverTemplateTableState {
   cellHoverTemplate: string | null;

package/src/components/data-table/cell-hover-text/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 
 import type { RowData } from "@tanstack/react-table";
 

package/src/components/data-table/cell-selection/__tests__/feature.test.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import type { Cell, Column, Row, Table } from "@tanstack/react-table";
 import { describe, expect, it, vi } from "vitest";

package/src/components/data-table/cell-selection/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 import type { OnChangeFn, RowData, Updater } from "@tanstack/react-table";
 
 export interface CellSelectionItem {
@@ -40,8 +40,9 @@ export interface CellSelectionInstance<TData extends RowData> {
 declare module "@tanstack/react-table" {
   interface TableState extends CellSelectionTableState {}
 
-  interface TableOptionsResolved<TData extends RowData>
-    extends CellSelectionOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends CellSelectionOptions {}
 
   interface Table<TData extends RowData> extends CellSelectionInstance<TData> {}
 

package/src/components/data-table/cell-styling/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 import type { RowData } from "@tanstack/react-table";
 
 export type CellStyleState = Record<

package/src/components/data-table/charts/chart-spec/altair-generator.ts

@@ -78,7 +78,7 @@ export function generateAltairChart(
 
     if (encodings?.tooltip) {
       const tooltip = encodings.tooltip;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      // oxlint-disable-next-line typescript/no-explicit-any
       const makeTooltip = (t: Record<string, any>) => {
         const kwargs = makeKwargs(t);
         return new FunctionCall("alt.Tooltip", kwargs);
@@ -149,7 +149,7 @@ ${variableName}
   `.trim();
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 function makeKwargs<T extends Record<string, any>>(obj: T) {
   const result: Record<string, PythonCode> = {};
 

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

@@ -257,7 +257,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
           saveTabChartType(tab.tabName, chartType);
         };
         return (
-          <TabsContent key={idx} value={tab.tabName} className="h-[400px] mt-1">
+          <TabsContent key={idx} value={tab.tabName} className="h-[400px] mt-0">
             <ChartPanel
               tableData={data}
               chartConfig={tab.config}
@@ -475,7 +475,7 @@ export const ChartPanel: React.FC<{
   );
 
   return (
-    <div className="flex flex-row gap-2 h-full rounded-md border pr-2">
+    <div className="flex flex-row gap-2 h-full rounded-md border-t pr-2">
       <div
         className={`relative flex flex-col gap-2 overflow-auto px-2 py-3 scrollbar-thin transition-width duration-200 ${formCollapsed ? "w-8" : "w-[300px]"}`}
       >

package/src/components/data-table/charts/components/chart-items.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import * as SelectPrimitive from "@radix-ui/react-select";
 import { ChevronDown } from "lucide-react";
+import { Select as SelectPrimitive } from "radix-ui";
 import React from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import type { z } from "zod";

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -72,7 +72,7 @@ export const ColumnExplorerPanel = ({
   });
 
   return (
-    <div className="mt-5 mb-3">
+    <div className="mb-3">
       <span className="text-xs font-semibold ml-2 flex">
         {prettifyRowColumnCount(totalRows, totalColumns, locale)}
         <CopyClipboardIcon

package/src/components/data-table/column-formatting/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 
 import type { OnChangeFn, RowData } from "@tanstack/react-table";
 import type { DataType } from "@/core/kernel/messages";
@@ -38,7 +38,7 @@ export interface ColumnFormattingInstance {
   setColumnFormatting: (value?: FormatOption) => void;
   getColumnFormatting?: () => FormatOption | undefined;
   getCanFormat?: () => boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   applyColumnFormatting: (value: any) => any;
 }
 
@@ -48,8 +48,9 @@ declare module "@tanstack/react-table" {
   //merge column formatting's state with the existing table state
   interface TableState extends ColumnFormattingTableState {}
   //merge column formatting's options with the existing table options
-  interface TableOptionsResolved<TData extends RowData>
-    extends ColumnFormattingOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends ColumnFormattingOptions {}
   //merge column formatting's instance APIs with the existing table instance APIs
   interface Column<TData extends RowData> extends ColumnFormattingInstance {}
 }

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

@@ -63,8 +63,10 @@ import { stringifyUnknownValue } from "./utils";
 
 const TOP_K_ROWS = 30;
 
-interface DataTableColumnHeaderProps<TData, TValue>
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface DataTableColumnHeaderProps<
+  TData,
+  TValue,
+> extends React.HTMLAttributes<HTMLDivElement> {
   column: Column<TData, TValue>;
   header: React.ReactNode;
   justify?: "left" | "center" | "right";

package/src/components/data-table/column-summary/legacy-chart-spec.ts

@@ -282,7 +282,7 @@ export function getDataSpecAndSourceName<T>(data: string | T[]): {
       const base64 = extractBase64FromDataURL(data);
       const decoded = window.atob(base64);
 
-      // eslint-disable-next-line unicorn/prefer-ternary
+      // oxlint-disable-next-line unicorn/prefer-ternary
       if (decoded.startsWith(ARROW_MAGIC_NUMBER)) {
         dataSpec = {
           values: base64ToUint8Array(base64),

package/src/components/data-table/column-wrapping/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 import type { OnChangeFn, RowData } from "@tanstack/react-table";
 
 export type ColumnWrappingState = Record<string, "nowrap" | "wrap" | undefined>;
@@ -22,8 +22,9 @@ export interface ColumnWrappingInstance {
 declare module "@tanstack/react-table" {
   interface TableState extends ColumnWrappingTableState {}
 
-  interface TableOptionsResolved<TData extends RowData>
-    extends ColumnWrappingOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends ColumnWrappingOptions {}
 
   interface Column<TData extends RowData> extends ColumnWrappingInstance {}
 }

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

@@ -1,7 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 "use no memo";
 
-import { PopoverClose } from "@radix-ui/react-popover";
+import { Popover as PopoverPrimitive } from "radix-ui";
+
+const PopoverClose = PopoverPrimitive.Close;
+
 import type { Column, ColumnDef } from "@tanstack/react-table";
 import { formatDate, isValid } from "date-fns";
 import { useLocale, useNumberFormatter } from "react-aria";

package/src/components/data-table/copy-column/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 import type { RowData } from "@tanstack/react-table";
 
 export interface CopyColumnOptions {
@@ -12,8 +12,9 @@ export interface CopyColumnInstance {
 
 // Use declaration merging to add our new feature APIs
 declare module "@tanstack/react-table" {
-  interface TableOptionsResolved<TData extends RowData>
-    extends CopyColumnOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends CopyColumnOptions {}
 
   interface Column<TData extends RowData> extends CopyColumnInstance {}
 }

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

@@ -314,18 +314,19 @@ const DataTableInternal = <TData,>({
               virtualize={virtualize}
             />
           </Table>
+          <TableBottomBar
+            part="table-footer"
+            className="pt-1.5 pb-0.5 border-t border-border"
+            totalColumns={totalColumns}
+            pagination={pagination}
+            selection={selection}
+            onRowSelectionChange={onRowSelectionChange}
+            table={table}
+            getRowIds={getRowIds}
+            showPageSizeSelector={showPageSizeSelector}
+            tableLoading={reloading}
+          />
         </div>
-        <TableBottomBar
-          part="table-footer"
-          totalColumns={totalColumns}
-          pagination={pagination}
-          selection={selection}
-          onRowSelectionChange={onRowSelectionChange}
-          table={table}
-          getRowIds={getRowIds}
-          showPageSizeSelector={showPageSizeSelector}
-          tableLoading={reloading}
-        />
       </CellSelectionProvider>
     </div>
   );

package/src/components/data-table/focus-row/types.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-empty-interface */
+/* oxlint-disable typescript/no-empty-object-type */
 
 import type { OnChangeFn, RowData } from "@tanstack/react-table";
 
@@ -25,8 +25,9 @@ export interface FocusRowInstance {
 declare module "@tanstack/react-table" {
   interface TableState extends FocusRowTableState {}
 
-  interface TableOptionsResolved<TData extends RowData>
-    extends FocusRowOptions {}
+  interface TableOptionsResolved<
+    TData extends RowData,
+  > extends FocusRowOptions {}
 
   interface Row<TData extends RowData> extends FocusRowInstance {}
 }

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

@@ -43,7 +43,7 @@ export const LoadingTable = ({
           <TableBody>
             {Array.from({ length: pageSize }).map((_, i) => (
               <TableRow key={i}>
-                {Array.from({ length: NUM_COLUMNS }).map((_, j) => (
+                {Array.from({ length: NUM_COLUMNS }).map((__, j) => (
                   <TableCell key={j}>
                     <div className="h-4 bg-(--slate-5) animate-pulse rounded-md w-[90%]" />
                   </TableCell>

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

@@ -71,7 +71,7 @@ export const DataTablePagination = <TData,>({
 
   // Ensure unique page sizes
   const pageSizeSet = new Set([5, 10, 25, 50, 100, pageSize]);
-  const pageSizes = [...pageSizeSet].sort((a, b) => a - b);
+  const pageSizes = [...pageSizeSet].toSorted((a, b) => a - b);
 
   const renderPageSizeSelector = () => {
     return (

package/src/components/data-table/range-focus/__tests__/atoms.test.ts

@@ -10,7 +10,7 @@ vi.mock("@/utils/copy", () => ({
 }));
 
 vi.mock("../utils", async (importOriginal) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   const original = (await importOriginal()) as any;
   return {
     ...original,
@@ -28,7 +28,7 @@ import {
 } from "../atoms";
 import { getCellsBetween, getCellValues } from "../utils";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 type T = any;
 
 // Create mock table and cells
@@ -56,18 +56,18 @@ function createMockCell(
 }
 
 function createMockTable(): Table<T> {
-  const mockToggleSelected = vi.fn().mockImplementation(function (this: {
-    isSelected: boolean;
-  }) {
-    this.isSelected = !this.isSelected;
-    return { isSelected: this.isSelected };
-  });
+  const mockToggleSelected = vi
+    .fn()
+    .mockImplementation(function (this: { isSelected: boolean }) {
+      this.isSelected = !this.isSelected;
+      return { isSelected: this.isSelected };
+    });
 
-  const mockGetIsSelected = vi.fn().mockImplementation(function (this: {
-    isSelected: boolean;
-  }) {
-    return this.isSelected;
-  });
+  const mockGetIsSelected = vi
+    .fn()
+    .mockImplementation(function (this: { isSelected: boolean }) {
+      return this.isSelected;
+    });
 
   const rows = [
     {

package/src/components/data-table/range-focus/__tests__/use-cell-range-selection.test.ts

@@ -23,17 +23,15 @@ describe("isInteractiveTarget", () => {
     expect(isInteractiveTarget(createMouseEvent(span, cell))).toBe(false);
   });
 
-  it.each([
-    "input",
-    "button",
-    "select",
-    "textarea",
-  ])("returns true when clicking a <%s>", (tag) => {
-    const cell = document.createElement("td");
-    const el = document.createElement(tag);
-    cell.append(el);
-    expect(isInteractiveTarget(createMouseEvent(el, cell))).toBe(true);
-  });
+  it.each(["input", "button", "select", "textarea"])(
+    "returns true when clicking a <%s>",
+    (tag) => {
+      const cell = document.createElement("td");
+      const el = document.createElement(tag);
+      cell.append(el);
+      expect(isInteractiveTarget(createMouseEvent(el, cell))).toBe(true);
+    },
+  );
 
   it("returns true when clicking an <a> link", () => {
     const cell = document.createElement("td");

package/src/components/data-table/range-focus/atoms.ts

@@ -32,9 +32,9 @@ function initialState(): CellSelectionState {
   };
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 type AnyTable = Table<any>;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 type AnyCell = Cell<any, unknown>;
 
 const {

package/src/components/data-table/range-focus/cell-selection-stats.tsx

@@ -34,7 +34,9 @@ export const CellSelectionStats = <TData,>({
   if (dataCellCount < 2) {
     return (
       <Tooltip content="Select multiple cells to see stats">
-        <span className={cn("text-sm text-muted-foreground italic", className)}>
+        <span
+          className={cn("text-xs text-muted-foreground/80 italic", className)}
+        >
           No selection
         </span>
       </Tooltip>

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

@@ -9,7 +9,6 @@ import {
   type HeaderGroup,
   type Row,
   type Table,
-  type Table as TanStackTable,
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { type JSX, useLayoutEffect, useRef, useState } from "react";
@@ -52,7 +51,7 @@ export function renderTableHeader<TData>(
             )}
             style={style}
             ref={(thead) => {
-              columnSizingHandler(thead, table, header.column);
+              columnSizingHandler({ table, column: header.column, thead });
             }}
           >
             {header.isPlaceholder
@@ -323,23 +322,30 @@ function getPinningStyles<TData>(
 
 // Update column sizes in table state for column pinning offsets
 // https://github.com/TanStack/table/discussions/3947#discussioncomment-9564867
-function columnSizingHandler<TData>(
-  thead: HTMLTableCellElement | null,
-  table: TanStackTable<TData>,
-  column: Column<TData>,
-) {
+function columnSizingHandler<TData>({
+  table,
+  column,
+  thead,
+}: {
+  table: Table<TData>;
+  column: Column<TData>;
+  thead: HTMLTableCellElement | null;
+}): void {
   if (!thead) {
     return;
   }
-  if (
-    table.getState().columnSizing[column.id] ===
-    thead.getBoundingClientRect().width
-  ) {
+  // Round to avoid infinite re-render loops: the browser's table layout
+  // algorithm may render a <th> at a slightly different width than the
+  // CSS `width` we set via column.getSize(), so a strict float === float
+  // comparison never stabilizes. Rounding to integers ensures convergence
+  // after at most one cycle.
+  const measuredWidth = Math.round(thead.getBoundingClientRect().width);
+  if (table.getState().columnSizing[column.id] === measuredWidth) {
     return;
   }
 
   table.setColumnSizing((prevSizes) => ({
     ...prevSizes,
-    [column.id]: thead.getBoundingClientRect().width,
+    [column.id]: measuredWidth,
   }));
 }

package/src/components/data-table/row-viewer-panel/row-viewer.tsx

@@ -247,7 +247,7 @@ export const RowViewerPanel: React.FC<RowViewerPanelProps> = ({
 
   return (
     <div
-      className="flex flex-col gap-3 mt-4 focus:outline-hidden"
+      className="flex flex-col gap-3 focus:outline-hidden"
       ref={panelRef}
       tabIndex={-1}
       onKeyDown={handleKeyDown}

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

@@ -42,7 +42,7 @@ export interface TableExplorerPanelProps {
 }
 
 const tabTriggerClassName =
-  "text-xs uppercase tracking-wide font-semibold cursor-pointer transition-colors";
+  "text-[13px] uppercase tracking-wide font-semibold cursor-pointer transition-colors";
 const activeClassName = "text-primary";
 const inactiveClassName = "hover:text-foreground";
 
@@ -110,7 +110,7 @@ export const TableExplorerPanel: React.FC<TableExplorerPanelProps> = ({
     <Tabs
       value={resolvedTab}
       onValueChange={(value) => onTabChange(value as PanelType)}
-      className="h-full flex flex-col min-w-[350px]"
+      className="flex flex-col min-w-[350px]"
     >
       <Fill name={SlotNames.CONTEXT_AWARE_PANEL_HEADER}>
         <div className="flex items-center gap-1">

package/src/components/dependency-graph/dependency-graph-tree.tsx

@@ -51,7 +51,7 @@ export const DependencyGraphTree: React.FC<PropsWithChildren<Props>> = ({
   layoutDirection,
   settings,
 }) => {
-  // eslint-disable-next-line react/hook-use-state
+  // oxlint-disable-next-line react/hook-use-state
   const [initial] = useState(() => {
     let elements = elementsBuilder.createElements(
       cellIds,