comments: adjust table column flex properties for better responsiveness and update initial table height calculation

Author: yashin4112

ui/src/components/ContentMapper/index.scss

@@ -706,12 +706,13 @@ div .table-row {
     }
 
     // Target actual column containers. Honour the per-column `width` venus applies inline
-    // from the `columns` config (flex-basis: auto reads that width) instead of forcing every
-    // column to an equal `flex: 1 1 0`. Columns with an explicit width hold it; the last
-    // column (no width in config) grows to fill the remaining space.
+    // from the `columns` config (flex-basis: auto reads that width) as the STARTING size,
+    // instead of forcing every column to an equal `flex: 1 1 0`. flex-shrink:1 (+ min-width:0)
+    // lets the fixed-width columns give way on narrow viewports so the row never exceeds the
+    // available width and forces a horizontal scrollbar; they hold their width when there's room.
     .Table__head__column,
     .Table__body__column {
-      flex: 0 0 auto;
+      flex: 0 1 auto;
       min-width: 0 !important;
       display: flex !important;
       align-items: center;

ui/src/components/ContentMapper/useMeasuredTableHeight.ts

@@ -33,6 +33,9 @@ const MIN_USABLE_HEIGHT = 80; // floor for the table body so it never collapses/
 // Fallback for the bounded box height (matches .entry-asset-mapper's calc(100vh - 246px) cap),
 // used only when the box isn't mounted/measured yet.
 const BOX_HEIGHT_FALLBACK = 246;
+// Reserve when no chrome is measured yet (toggle defaults to 0). Same terms as measure()'s
+// `reserve` so the pre-measure guess uses the hook's own box model, not a stray constant.
+const RESERVE_FALLBACK = PANEL_FALLBACK + FOOTER_FALLBACK + PAGINATION_AND_BUFFER;
 const BOX_SELECTOR = '.entry-asset-mapper';
 const TOGGLE_SELECTOR = '.mapper-view-toggle';
 
@@ -41,7 +44,11 @@ export function useMeasuredTableHeight(
   deps: unknown[],
   { panelSelector, footerSelector }: MeasuredTableHeightOptions,
 ): number {
-  const [tableHeight, setTableHeight] = useState<number>(() => window.innerHeight - 520);
+  // Pre-measure guess: same model as measure() (box fallback − reserve), clamped to the floor
+  // so the one frame react-window renders before the effect runs never gets a negative height.
+  const [tableHeight, setTableHeight] = useState<number>(() =>
+    Math.max(MIN_USABLE_HEIGHT, window.innerHeight - BOX_HEIGHT_FALLBACK - RESERVE_FALLBACK),
+  );
 
   useEffect(() => {
     const measure = () => {