7.3 Refactor fixed listing height processing

[Squidly271]

Not important for 7.2

Due to merge of #2418, this is a simplification of #2415

Also adds in debouncing on resizing and handles edge cases of browser resized when on the VM Usage tab

Summary by CodeRabbit

• Bug Fixes
  • Improved table header resizing responsiveness in VM Manager.
  • Reduced lag during interactive window resizing via debounced resize handling.
  • Ensured initial header sizing on load and more stable table layout during resizes.
  • Clarified behavior so header resizing only runs when display resize is enabled.

[coderabbitai]

Walkthrough

Replaces immediate inline table-header resize handling in VMMachines.page with a debounced (150ms) window-resize workflow, adds Focus="tableHeaderResize" to page metadata, and moves the resizing logic into a global tableHeaderResize function that calls fillAvailableHeight and re-applies fixed-header styling.

Changes

Cohort / File(s)	Summary
Table header resize refactor emhttp/plugins/dynamix.vm.manager/VMMachines.page	Adds Focus="tableHeaderResize" to page metadata; introduces a global tableHeaderResize() function that calls fillAvailableHeight (50px offset) and reapplies fixed-header state; replaces immediate inline resize calls with a debounced window-resize handler (150ms, namespaced); adds explanatory comments and preserves conditional resize enablement behavior.

Sequence Diagram

sequenceDiagram
    participant User
    participant Window as Window<br/>(resize events)
    participant Debouncer as Debounce<br/>(150ms, namespaced)
    participant Handler as tableHeaderResize()<br/>(global)

    User->>Window: Resize browser window
    Window->>Debouncer: Emit resize events (many)
    Debouncer->>Debouncer: Reset 150ms timer on each event
    Note over Debouncer: Replaces immediate per-event calls with debounce
    Debouncer->>Handler: Timer elapses (150ms quiet)
    activate Handler
    Handler->>Handler: call fillAvailableHeight(selectors, 50)
    Handler->>Handler: clear/apply fixed-header & set column widths
    deactivate Handler

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A hop, a pause, a gentle tide—

I wait one-fifty, then stretch wide.
Headers fixed, no frantic race,
Columns settle, finding place.
A debounced hop brings tidy grace.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title concisely captures the primary change—refactoring fixed listing height processing—aligning directly with the core updates in the pull request and remaining clear and specific.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🔧 PR Test Plugin Available

A test plugin has been generated for this PR that includes the modified files.

Version: 2025.11.28.0328
Build: View Workflow Run

📥 Installation Instructions:

Install via Unraid Web UI:

1. Go to Plugins → Install Plugin
2. Copy and paste this URL:

https://preview.dl.unraid.net/pr-plugins/pr-2427/webgui-pr-2427.plg

3. Click Install

Alternative: Direct Download

• 📦 Download PLG
• 📦 Download TXZ

⚠️ Important Notes:

• Testing only: This plugin is for testing PR changes
• Backup included: Original files are automatically backed up
• Easy removal: Files are restored when plugin is removed
• Conflicts: Remove this plugin before installing production updates

📝 Modified Files:

Click to expand file list

emhttp/plugins/dynamix.vm.manager/VMMachines.page

🔄 To Remove:

Navigate to Plugins → Installed Plugins and remove webgui-pr-2427, or run:

plugin remove webgui-pr-2427

---

_{🤖 This comment is automatically generated and will be updated with each new push to this PR.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ce4653a and b54bb1a.

📒 Files selected for processing (1)

• emhttp/plugins/dynamix.vm.manager/VMMachines.page (2 hunks)

🔇 Additional comments (2)

emhttp/plugins/dynamix.vm.manager/VMMachines.page (2)

6-6: LGTM! Good addition for handling focus events.

The Focus attribute correctly enables the framework to call tableHeaderResize() when the page regains focus, addressing the edge case where the browser is resized while viewing other tabs.

---

479-501: LGTM! Well-structured global function.

The tableHeaderResize() function is properly extracted to global scope (required for the Focus attribute) and implements the fixed header resizing logic correctly:

• Calculates available height using appropriate selectors
• Removes and re-applies the 'fixed' class to handle layout changes
• Sets explicit column widths to maintain fixed table layout

The refactoring improves maintainability by consolidating the resize logic in a single, reusable function.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

emhttp/plugins/dynamix.vm.manager/VMMachines.page (1)

468-476: Resolved: resize handler accumulation; debounced and namespaced.

Using off('resize.vmTableResize').on('resize.vmTableResize', ...) with 150ms debounce prevents duplicate handlers and addresses the earlier concern.

If desired, bind this once outside loadlist() to avoid repeated off/on churn. Current approach is acceptable.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b54bb1a and 7e88002.

📒 Files selected for processing (1)

• emhttp/plugins/dynamix.vm.manager/VMMachines.page (2 hunks)

🔇 Additional comments (1)

emhttp/plugins/dynamix.vm.manager/VMMachines.page (1)

6-6: Good: Focus wired to a global function.

Matches the global tableHeaderResize and allows external triggers. Looks correct.