gloomberb 0.9.3 → 0.9.4

package/src/plugins/prediction-markets/detail.test.tsx

@@ -48,4 +48,54 @@ describe("prediction markets detail views", () => {
     expect(frame).not.toContain("Kalshi");
     expect(frame).not.toContain("targets");
   });
+
+  test("keeps grouped outcomes in place while selected detail is loading", async () => {
+    testSetup = await testRender(<GroupedDetailHarness loading />, {
+      width: 64,
+      height: 24,
+    });
+    await flushFrames(testSetup);
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Outcomes");
+    expect(frame).toContain("Above 4.25%");
+    expect(frame).toContain("Loading chart...");
+    expect(frame).not.toContain("No chart history.");
+    expect(frame).not.toContain("Loading market detail...");
+  });
+
+  test("renders book levels in the shared data table", async () => {
+    testSetup = await testRender(<GroupedDetailHarness detailTab="book" />, {
+      width: 64,
+      height: 24,
+    });
+    await flushFrames(testSetup);
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("OUT");
+    expect(frame).toContain("SIDE");
+    expect(frame).toContain("PRICE");
+    expect(frame).toContain("SIZE");
+    expect(frame).toContain("YES");
+    expect(frame).toContain("BID");
+    expect(frame).toContain("47c");
+  });
+
+  test("renders recent trades in the shared data table", async () => {
+    testSetup = await testRender(<GroupedDetailHarness detailTab="trades" />, {
+      width: 64,
+      height: 24,
+    });
+    await flushFrames(testSetup);
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("TIME");
+    expect(frame).toContain("SIDE");
+    expect(frame).toContain("OUT");
+    expect(frame).toContain("PRICE");
+    expect(frame).toContain("SIZE");
+    expect(frame).toContain("BUY");
+    expect(frame).toContain("YES");
+    expect(frame).toContain("48c");
+  });
 });

package/src/plugins/prediction-markets/pane.test.tsx

@@ -130,6 +130,32 @@ describe("prediction markets pane interactions", () => {
     expect(frame).not.toContain("Was there a typo in the url or port?");
   });
 
+  test("shows loading instead of an empty state while empty catalogs are pending", async () => {
+    attachPredictionMarketsPersistence(new MemoryPersistence());
+
+    const releaseFetches: Array<() => void> = [];
+    globalThis.fetch = (async (input: Request | string | URL) => {
+      await new Promise<void>((resolve) => {
+        releaseFetches.push(resolve);
+      });
+      const url = String(input);
+      if (url.includes("/trade-api/v2/events?")) {
+        return new Response(JSON.stringify({ events: [] }), { status: 200 });
+      }
+      return new Response(JSON.stringify([]), { status: 200 });
+    }) as unknown as typeof fetch;
+
+    testSetup = await testRender(<Harness />, { width: 120, height: 34 });
+    await flushFrames(testSetup);
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Loading markets...");
+    expect(frame).not.toContain("No markets matched.");
+
+    for (const release of releaseFetches) release();
+    await flushFrames(testSetup);
+  });
+
   test("selects a market on single click and opens detail on double click", async () => {
     installPredictionMarketMocks();
 
@@ -172,6 +198,23 @@ describe("prediction markets pane interactions", () => {
 
     frame = testSetup.captureCharFrame();
     expect(frame).toContain("Kalshi primary rule");
+    expect(frame).toContain("\u2190 Back Will the Fed cut rates?");
+    expect(frame.match(/Will the Fed cut rates\?/g) ?? []).toHaveLength(1);
+    expect(frame).not.toContain("[/]search");
+    expect(frame).not.toContain("[w]atch");
+    expect(frame).not.toContain("[1-4]browse");
+
+    const metricsHeader = frame
+      .split("\n")
+      .find((line) =>
+        line.includes("YES") &&
+        line.includes("NO") &&
+        line.includes("24H VOL"),
+      );
+    expect(metricsHeader).toContain("TOTAL VOL");
+    expect(metricsHeader).toContain("OI");
+    expect(metricsHeader).toContain("SPREAD");
+    expect(metricsHeader).toContain("LAST");
   });
 
   test("focuses the pane when a market row is clicked", async () => {

package/src/plugins/prediction-markets/pane.tsx

@@ -2,6 +2,7 @@ import { Box, Input, Text } from "../../ui";
 import { useCallback, useMemo, useRef } from "react";
 import {
   DataTableStackView,
+  Spinner,
   Tabs,
   usePaneFooter,
   type DataTableKeyEvent,
@@ -13,6 +14,7 @@ import { colors } from "../../theme/colors";
 import { PREDICTION_CATEGORY_OPTIONS } from "./categories";
 import { usePredictionMarketsController } from "./controller";
 import { PredictionMarketDetailPane } from "./detail/pane";
+import { resolvePredictionDetailTitle } from "./detail/shared";
 import { getPredictionColumnValue } from "./metrics";
 import { BROWSE_TABS, VENUE_TABS } from "./navigation";
 import { isPlainArrowUp, stopSearchFocusNavigation } from "../../utils/search-focus-navigation";
@@ -73,33 +75,45 @@ export function PredictionMarketsPane({ focused, width, height }: PaneProps) {
     controller.catalogStatus?.tone === "danger"
       ? colors.negative
       : colors.borderFocused;
-  usePaneFooter("prediction-markets", () => ({
-    info: [
-      ...(controller.searchQuery.trim() ? [{ id: "search", parts: [{ text: `search: ${controller.searchQuery.trim()}`, tone: "value" as const }] }] : []),
-      ...(controller.searchLoading ? [{ id: "search-loading", parts: [{ text: "searching", tone: "muted" as const }] }] : []),
-      ...(controller.catalogStatus ? [{
-        id: "catalog",
-        parts: [{ text: controller.catalogStatus.message, tone: controller.catalogStatus.tone === "danger" ? "warning" as const : "muted" as const, color: catalogStatusColor }],
-      }] : []),
-    ],
-    hints: [
-      { id: "search", key: "/", label: "search", onPress: controller.actions.focusSearch },
-      { id: "watch", key: "w", label: "atch", onPress: controller.selectedRow ? () => controller.actions.toggleWatchlist(controller.selectedRow!) : undefined, disabled: !controller.selectedRow },
-      {
-        id: "browse",
-        key: "1-4",
-        label: "browse",
-        onPress: () => {
-          const index = BROWSE_TABS.findIndex((tab) => tab.value === controller.browseTab);
-          controller.actions.selectBrowseTab(BROWSE_TABS[(index + 1) % BROWSE_TABS.length]!.value as PredictionBrowseTab);
+  const rowsLoading =
+    controller.visibleRows.length === 0 &&
+    (controller.catalogLoadCount > 0 || controller.searchLoading);
+  const detailTitle = resolvePredictionDetailTitle({
+    detail: controller.detail,
+    selectedRow: controller.selectedRow,
+    selectedSummary: controller.selectedSummary,
+  });
+  usePaneFooter("prediction-markets", () => {
+    if (controller.detailOpen) return null;
+    return {
+      info: [
+        ...(controller.searchQuery.trim() ? [{ id: "search", parts: [{ text: `search: ${controller.searchQuery.trim()}`, tone: "value" as const }] }] : []),
+        ...(controller.searchLoading ? [{ id: "search-loading", parts: [{ text: "searching", tone: "muted" as const }] }] : []),
+        ...(controller.catalogStatus ? [{
+          id: "catalog",
+          parts: [{ text: controller.catalogStatus.message, tone: controller.catalogStatus.tone === "danger" ? "warning" as const : "muted" as const, color: catalogStatusColor }],
+        }] : []),
+      ],
+      hints: [
+        { id: "search", key: "/", label: "search", onPress: controller.actions.focusSearch },
+        { id: "watch", key: "w", label: "atch", onPress: controller.selectedRow ? () => controller.actions.toggleWatchlist(controller.selectedRow!) : undefined, disabled: !controller.selectedRow },
+        {
+          id: "browse",
+          key: "1-4",
+          label: "browse",
+          onPress: () => {
+            const index = BROWSE_TABS.findIndex((tab) => tab.value === controller.browseTab);
+            controller.actions.selectBrowseTab(BROWSE_TABS[(index + 1) % BROWSE_TABS.length]!.value as PredictionBrowseTab);
+          },
         },
-      },
-    ],
-  }), [
+      ],
+    };
+  }, [
     catalogStatusColor,
     controller.browseTab,
     controller.catalogStatus?.message,
     controller.catalogStatus?.tone,
+    controller.detailOpen,
     controller.searchLoading,
     controller.searchQuery,
     controller.selectedRow,
@@ -275,6 +289,7 @@ export function PredictionMarketsPane({ focused, width, height }: PaneProps) {
       detailOpen={controller.detailOpen && !!controller.selectedSummary}
       onBack={controller.actions.closeDetail}
       detailContent={detailContent}
+      detailTitle={detailTitle}
       rootBefore={browseControls}
       rootWidth={width}
       rootHeight={height}
@@ -301,6 +316,19 @@ export function PredictionMarketsPane({ focused, width, height }: PaneProps) {
       getItemKey={(row) => row.key}
       virtualize
       renderCell={renderCell}
+      emptyContent={
+        rowsLoading ? (
+          <Box width="100%" paddingX={1} paddingY={1}>
+            <Spinner
+              label={
+                controller.searchQuery.trim().length > 0
+                  ? "Searching markets..."
+                  : "Loading markets..."
+              }
+            />
+          </Box>
+        ) : undefined
+      }
       emptyStateTitle="No markets matched."
       emptyStateHint="Change the venue, browse tab, or search query."
     />

package/src/plugins/prediction-markets/test-helpers.tsx

@@ -24,6 +24,7 @@ import {
   attachPredictionMarketsPersistence,
 } from "./services/fetch";
 import { normalizeKalshiMarket } from "./services/kalshi/adapter";
+import type { PredictionDetailTab } from "./types";
 
 export const TEST_PANE_ID = "prediction-markets:main";
 const originalFetch = globalThis.fetch;
@@ -408,7 +409,13 @@ export function ChartHarness({
   );
 }
 
-export function GroupedDetailHarness() {
+export function GroupedDetailHarness({
+  detailTab = "overview",
+  loading = false,
+}: {
+  detailTab?: PredictionDetailTab;
+  loading?: boolean;
+} = {}) {
   const [state, dispatch] = useReducer(
     appReducer,
     (() => {
@@ -475,29 +482,40 @@ export function GroupedDetailHarness() {
     <AppContext value={{ state, dispatch }}>
       <PaneInstanceProvider paneId={TEST_PANE_ID}>
         <PredictionMarketDetailPane
-          detail={{
-            summary,
-            siblings: selectedRow!.markets.map((market) => ({
-              key: market.key,
-              marketId: market.marketId,
-              label: market.marketLabel,
-              yesPrice: market.yesPrice,
-              volume24h: market.volume24h,
-            })),
-            rules: [],
-            history: [],
-            book: {
-              yesBids: [],
-              yesAsks: [],
-              noBids: [],
-              noAsks: [],
-              lastTradePrice: null,
-            },
-            trades: [],
-          }}
+          detail={
+            loading
+              ? null
+              : {
+                  summary,
+                  siblings: selectedRow!.markets.map((market) => ({
+                    key: market.key,
+                    marketId: market.marketId,
+                    label: market.marketLabel,
+                    yesPrice: market.yesPrice,
+                    volume24h: market.volume24h,
+                  })),
+                  rules: [],
+                  history: [],
+                  book: {
+                    yesBids: [{ price: 0.47, size: 120 }],
+                    yesAsks: [{ price: 0.49, size: 95 }],
+                    noBids: [{ price: 0.51, size: 80 }],
+                    noAsks: [{ price: 0.53, size: 105 }],
+                    lastTradePrice: null,
+                  },
+                  trades: [{
+                    id: "trade-1",
+                    timestamp: Date.parse("2026-04-01T12:34:56Z"),
+                    side: "buy",
+                    outcome: "yes",
+                    price: 0.48,
+                    size: 50,
+                  }],
+                }
+          }
           detailError={null}
-          detailLoadCount={0}
-          detailTab="overview"
+          detailLoadCount={loading ? 1 : 0}
+          detailTab={detailTab}
           detailWidth={58}
           focused
           height={24}

package/src/renderers/electrobun/view/cli-pane-shot-entry.tsx

@@ -20,7 +20,7 @@ import { resolvePaneBodyFrame } from "../../../components/layout/pane/sizing";
 import { getPaneDisplayTitle } from "../../../components/layout/pane/title";
 import type { AppConfig } from "../../../types/config";
 import type { CachedFinancialsTarget, DataProvider, QuoteSubscriptionTarget } from "../../../types/data-provider";
-import type { TickerFinancials } from "../../../types/financials";
+import type { OptionsChain, TickerFinancials } from "../../../types/financials";
 import type { TickerRecord } from "../../../types/ticker";
 import type { AppState, PaneRuntimeState } from "../../../core/state/app/state";
 import type { PaneDef } from "../../../types/plugin";
@@ -32,6 +32,7 @@ interface CliPaneShotPayload {
   heightCells: number;
   tickers: TickerRecord[];
   financials: Array<[string, TickerFinancials]>;
+  optionsChains: Array<[string, OptionsChain]>;
   paneState: Record<string, PaneRuntimeState>;
 }
 
@@ -56,6 +57,7 @@ const TRACKED_RESPONSE_METHODS = new Set<PropertyKey>([
 
 let pendingShotWork = 0;
 let didInstallShotFetchTracker = false;
+let shotDataProvider: DataProvider | null = null;
 
 const rendererHost: RendererHost = {
   requestExit() {},
@@ -152,6 +154,7 @@ function waitForShotReadiness(): () => void {
 
 function createShotDataProvider(payload: CliPaneShotPayload): DataProvider {
   const financials = new Map(payload.financials.map(([symbol, data]) => [normalizeSymbol(symbol), data]));
+  const optionsChains = new Map((payload.optionsChains ?? []).map(([symbol, data]) => [normalizeSymbol(symbol), data]));
 
   const getFinancials = (symbol: string) => {
     const data = financials.get(normalizeSymbol(symbol));
@@ -187,6 +190,13 @@ function createShotDataProvider(payload: CliPaneShotPayload): DataProvider {
     getExchangeRate() {
       return resolveShotWork(1);
     },
+    getOptionsChain(ticker) {
+      return trackShotWork(Promise.resolve().then(() => {
+        const chain = optionsChains.get(normalizeSymbol(ticker));
+        if (!chain) throw new Error(`No screenshot options data available for ${ticker}.`);
+        return chain;
+      }));
+    },
     search(query) {
       const normalized = normalizeSymbol(query);
       return resolveShotWork(payload.tickers
@@ -217,6 +227,7 @@ function createShotDataProvider(payload: CliPaneShotPayload): DataProvider {
 
 function installShotMarketData(payload: CliPaneShotPayload): void {
   const provider = createShotDataProvider(payload);
+  shotDataProvider = provider;
   const coordinator = new MarketDataCoordinator(provider);
   coordinator.primeCachedFinancials(payload.tickers.flatMap((ticker) => {
     const financials = payload.financials.find(([symbol]) => normalizeSymbol(symbol) === normalizeSymbol(ticker.metadata.ticker))?.[1];
@@ -236,7 +247,7 @@ function createRuntime(payload: CliPaneShotPayload): PluginRuntimeAccess {
     return (payload.config.pluginConfig[pluginId]?.[key] as T | undefined) ?? null;
   }
   return {
-    getMarketData: () => null,
+    getMarketData: () => shotDataProvider,
     getCapability: () => null,
     getBrokerAdapter: () => null,
     connectBrokerInstance: async () => {},

package/src/renderers/electrobun/view/data-table/index.tsx

@@ -59,6 +59,7 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
   isSelected,
   onSelect,
   onActivate,
+  onTableMouseDown,
   onRowMouseDown,
   onRowContextMenu,
   rowContextMenuSurface = false,
@@ -71,6 +72,9 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
   emptyStateHint,
   virtualize = true,
   overscan = 3,
+  columnGap = 1,
+  horizontalPadding = 1,
+  fillAvailableWidth = true,
   showHorizontalScrollbar = true,
   scrollToIndex,
   scrollToIndexAlign = "nearest",
@@ -85,10 +89,13 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
   const bodyVertical = useScrollbarState(true);
   const [viewportWidth, setViewportWidth] = useState(0);
   const [scrollbarActive, markScrollbarActive] = useScrollbarActivity();
-  const tableWidth = useMemo(() => getTableWidth(columns), [columns]);
+  const tableWidth = useMemo(
+    () => getTableWidth(columns, columnGap, horizontalPadding),
+    [columnGap, columns, horizontalPadding],
+  );
   const gridTemplateColumns = useMemo(
-    () => buildTableGridTemplateColumns(columns),
-    [columns],
+    () => buildTableGridTemplateColumns(columns, fillAvailableWidth),
+    [columns, fillAvailableWidth],
   );
   const selectRow = useCallback((item: T, index: number) => {
     onSelect(item, index);
@@ -136,8 +143,9 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     : WEB_CELL_HEIGHT + items.length * WEB_CELL_HEIGHT;
   const bodyAfterHeight = bodyAfter ? WEB_CELL_HEIGHT * 6 : 0;
   const horizontalScrollEnabled = showHorizontalScrollbar
-    && hasMeaningfulTableHorizontalOverflow(tableWidth, viewportWidth);
+    && hasMeaningfulTableHorizontalOverflow(tableWidth, viewportWidth, columnGap);
   const scrollContentWidth = horizontalScrollEnabled
+    || !fillAvailableWidth
     ? Math.max(1, tableWidth * WEB_CELL_WIDTH)
     : "100%";
   const measureViewportWidth = useCallback(() => {
@@ -247,6 +255,7 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
         style={bodyScrollerStyle}
         onMouseDown={() => {
           focusPane();
+          onTableMouseDown?.({});
         }}
         onMouseLeave={() => {
           if (hoveredIdx !== null) setHoveredIdx(null);
@@ -270,7 +279,10 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
         >
           <WebDataTableHeader
             columns={columns}
+            columnGap={columnGap}
+            horizontalPadding={horizontalPadding}
             focusPane={focusPane}
+            onTableMouseDown={onTableMouseDown}
             gridTemplateColumns={gridTemplateColumns}
             onHeaderClick={onHeaderClick}
             sortColumnId={sortColumnId}
@@ -314,7 +326,10 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
                     item={item}
                     itemKey={itemKey}
                     columns={columns}
+                    columnGap={columnGap}
+                    horizontalPadding={horizontalPadding}
                     focusPane={focusPane}
+                    onTableMouseDown={onTableMouseDown}
                     gridTemplateColumns={gridTemplateColumns}
                     onActivateRow={onActivate ? activateRow : undefined}
                     onRowContextMenu={onRowContextMenu}

package/src/renderers/electrobun/view/data-table/row.tsx

@@ -44,16 +44,30 @@ function contentJustifyForAlign(align: string | undefined): CSSProperties["justi
   return "flex-start";
 }
 
+function columnGapCss(columnGap: number): CSSProperties["columnGap"] {
+  return columnGap === 0 ? 0 : `calc(${columnGap} * var(--cell-w))`;
+}
+
+function inlinePaddingPx(horizontalPadding: number): number {
+  return TABLE_INLINE_PADDING_PX * horizontalPadding;
+}
+
 export function WebDataTableHeader<C extends DataTableColumn>({
   columns,
+  columnGap,
+  horizontalPadding,
   focusPane,
+  onTableMouseDown,
   gridTemplateColumns,
   onHeaderClick,
   sortColumnId,
   sortDirection,
 }: {
   columns: C[];
+  columnGap: number;
+  horizontalPadding: number;
   focusPane: () => void;
+  onTableMouseDown?: (event: any) => void;
   gridTemplateColumns: string;
   onHeaderClick: (columnId: string) => void;
   sortColumnId: string | null;
@@ -69,13 +83,13 @@ export function WebDataTableHeader<C extends DataTableColumn>({
         zIndex: 2,
         display: "grid",
         gridTemplateColumns,
-        columnGap: "var(--cell-w)",
+        columnGap: columnGapCss(columnGap),
         alignItems: "center",
         width: "100%",
         minWidth: 0,
         height: WEB_CELL_HEIGHT,
-        paddingLeft: TABLE_INLINE_PADDING_PX,
-        paddingRight: TABLE_INLINE_PADDING_PX,
+        paddingLeft: inlinePaddingPx(horizontalPadding),
+        paddingRight: inlinePaddingPx(horizontalPadding),
         boxSizing: "border-box",
         backgroundColor: CSS_PANEL,
       }}
@@ -99,6 +113,7 @@ export function WebDataTableHeader<C extends DataTableColumn>({
             }}
             onMouseDown={(event) => {
               focusPane();
+              onTableMouseDown?.(event);
               event.preventDefault();
               onHeaderClick(column.id);
             }}
@@ -128,7 +143,10 @@ function WebDataTableRowInner<
   C extends DataTableColumn,
 >({
   columns,
+  columnGap,
+  horizontalPadding,
   focusPane,
+  onTableMouseDown,
   onActivateRow,
   onRowContextMenu,
   onRowMouseDown,
@@ -148,7 +166,10 @@ function WebDataTableRowInner<
   setHoveredIdx,
 }: {
   columns: C[];
+  columnGap: number;
+  horizontalPadding: number;
   focusPane: () => void;
+  onTableMouseDown?: (event: any) => void;
   onActivateRow?: (item: T, index: number) => void;
   onRowContextMenu?: DataTableProps<T, C>["onRowContextMenu"];
   onRowMouseDown?: DataTableProps<T, C>["onRowMouseDown"];
@@ -177,13 +198,13 @@ function WebDataTableRowInner<
     transform: `translateY(${rowStart}px)`,
     display: "grid",
     gridTemplateColumns,
-    columnGap: "var(--cell-w)",
+    columnGap: columnGapCss(columnGap),
     alignItems: "center",
     width: "100%",
     minWidth: 0,
     height: rowSize,
-    paddingLeft: TABLE_INLINE_PADDING_PX,
-    paddingRight: TABLE_INLINE_PADDING_PX,
+    paddingLeft: inlinePaddingPx(horizontalPadding),
+    paddingRight: inlinePaddingPx(horizontalPadding),
     boxSizing: "border-box",
     lineHeight: "var(--cell-h)",
   };
@@ -199,6 +220,7 @@ function WebDataTableRowInner<
         }}
         onMouseDown={(event) => {
           focusPane();
+          onTableMouseDown?.(event);
           event.preventDefault();
         }}
       >
@@ -243,6 +265,7 @@ function WebDataTableRowInner<
       }}
       onMouseDown={(event) => {
         focusPane();
+        onTableMouseDown?.(event);
         if (onRowMouseDown?.(item, index, eventWithCellCoordinates(event)) === true) {
           return;
         }
@@ -274,6 +297,7 @@ function WebDataTableRowInner<
             }}
             onMouseDown={(event) => {
               focusPane();
+              onTableMouseDown?.(event);
               if (cell.onMouseDown) {
                 cell.onMouseDown(eventWithCellCoordinates(event));
                 return;

package/src/renderers/electrobun/view/desktop/controls.tsx

@@ -84,6 +84,7 @@ export function WebTextField({
   inputRef,
   onChange,
   onSubmit,
+  onBlur,
   hint,
   type = "text",
   variant = "default",
@@ -155,7 +156,12 @@ export function WebTextField({
           }}
           onInput={onChange}
           onChange={onChange}
-          onSubmit={() => onSubmit?.(value ?? resolvedInputRef.current?.editBuffer.getText() ?? "")}
+          onSubmit={(nextValue?: string) => onSubmit?.(
+            typeof nextValue === "string" ? nextValue : resolvedInputRef.current?.editBuffer.getText() ?? value ?? "",
+          )}
+          onBlur={(nextValue?: string) => onBlur?.(
+            typeof nextValue === "string" ? nextValue : resolvedInputRef.current?.editBuffer.getText() ?? value ?? "",
+          )}
         />
       </Box>
       {hint && (
@@ -347,14 +353,14 @@ export function WebPageStackView({
 
   if (!detailOpen) {
     return (
-      <Box flexDirection="column" flexGrow={1} overflow="hidden">
+      <Box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} minWidth={0} minHeight={0} overflow="hidden">
         {rootContent}
       </Box>
     );
   }
 
   return (
-    <Box flexDirection="column" flexGrow={1} overflow="hidden">
+    <Box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} minWidth={0} minHeight={0} overflow="hidden">
       <Box
         flexDirection="row"
         alignItems="flex-start"
@@ -370,7 +376,7 @@ export function WebPageStackView({
           flexDirection="row"
           alignItems="center"
           backgroundColor={panelFill()}
-          onMouseDown={(event) => {
+          onMouseDown={(event: { preventDefault?: () => void; stopPropagation?: () => void }) => {
             event.preventDefault?.();
             event.stopPropagation?.();
             onBack();
@@ -413,7 +419,7 @@ export function WebPageStackView({
           </Text>
         ) : null}
       </Box>
-      <Box flexDirection="column" flexGrow={1} overflow="hidden">
+      <Box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} minWidth={0} minHeight={0} overflow="hidden">
         {detailContent}
       </Box>
     </Box>