noob-components/.trellis/tasks/plan-resize-probe-row.md

Plan: Viewport Resize Handling for list-table-v2

1. Problem Analysis

Current State

• The list-table-v2 component uses a probe row technique to dynamically measure row height when rowHeight is NOT explicitly set (dynamic height mode)
• The measureProbeRow function (lines 217-231) already exists and correctly:
  • Clears estimatedRowHeight.value before re-measuring
  • Uses TWO requestAnimationFrame calls after nextTick to let el-table-v2 fully settle
  • Measures the probe row's offsetHeight

Problem

• When the viewport width changes, column widths may adjust (due to flexGrow: 1 in tableColumns computed)
• This can cause row heights to change, but currently there is no trigger to re-measure
• Without re-measuring, the estimatedRowHeight may become inaccurate, causing layout issues

Constraints (from previous attempts)

1. ResizeObserver on container caused errors in component setup - AVOID
2. Must use TWO requestAnimationFrame calls after nextTick for proper el-table-v2 settlement
3. Must clear estimatedRowHeight before re-measuring for el-table-v2 to recalculate properly

---

2. Implementation Approach

Strategy

Add a debounced window resize event listener that:

1. Checks if dynamic height mode is active (shouldUseProbeRow)
2. Calls the existing measureProbeRow function
3. Cleans up properly on component unmount

Why Window Resize Instead of ResizeObserver

• el-auto-resizer already handles container size changes internally
• Window resize is the correct trigger because column widths change based on viewport width (via flexGrow)
• ResizeObserver on container caused setup errors in previous attempts

Debounce Strategy

• Use lodash's debounce (already imported as lodash-es)
• Debounce delay: ~200-300ms to avoid excessive recalculations during active resize
• The debounced function will be created with onMounted and cleaned up with onUnmounted

---

3. Code Changes Needed

File: /home/hechang27/Documents/sprt/noob-components/packages/base/data/list-table-v2.vue

Import Additions (line 53)

import { ref, computed, watch, h, onMounted, onUpdated, onUnmounted, useSlots, renderSlot, nextTick } from "vue";

New State Variable

After line 66 (const estimatedRowHeight = ref<number | undefined>(undefined);):

// Debounced resize handler for re-measuring probe row
const debouncedResizeHandler = ref<() => void>();

New Lifecycle Hooks

After line 214 (after the existing watch block):

// Setup resize listener on mount
onMounted(() => {
  // Create debounced handler
  debouncedResizeHandler.value = lodash.debounce(() => {
    // Only re-measure in dynamic height mode
    if (shouldUseProbeRow.value) {
      measureProbeRow();
    }
  }, 250); // 250ms debounce delay

  // Attach window resize listener
  window.addEventListener('resize', debouncedResizeHandler.value);
});

// Cleanup on unmount
onUnmounted(() => {
  if (debouncedResizeHandler.value) {
    window.removeEventListener('resize', debouncedResizeHandler.value);
    debouncedResizeHandler.value.cancel(); // Cancel any pending debounce calls
  }
});

---

4. Verification Steps

Manual Testing

1. Open a page using list-table-v2 without explicit rowHeight prop
2. Open browser DevTools and inspect a row element to see its height
3. Resize the browser window (change width)
4. Verify that:
   • No console errors occur during resize
   • The row height is recalculated correctly after resize settles
   • The table layout remains correct after resize

Edge Cases to Verify

1. Rapid resize: Resize window quickly back and forth - should not cause errors or excessive measurements
2. Minimum width: Table should handle minimum width gracefully without breaking
3. No explicit rowHeight: Verify resize handling is NOT active when rowHeight IS set (fixed height mode)
4. Unmount cleanup: Navigate away from the page and verify no memory leaks or hanging listeners

Code Review Checklist

• onUnmounted is imported and used
• Debounced handler is properly cancelled on unmount
• shouldUseProbeRow.value check prevents unnecessary calls in fixed-height mode
• Two RAF frames are used in measureProbeRow (existing pattern preserved)
• estimatedRowHeight is cleared before re-measuring (existing pattern preserved)

---

5. Dependencies

• lodash-es debounce (already imported)
• Vue lifecycle hooks (already available)

No new dependencies required.