fix: Enhance DashStats UI: Update select elements for better layout a…

[elibosley]

…nd styling. Add new CSS rules for network-selects to improve responsiveness and alignment.

Summary by CodeRabbit

• Style
  • Improved layout and responsiveness of network selection controls in the Interface Information header.
  • Dropdowns now resize smoothly, avoid overflow, and truncate long values with ellipsis for better readability.
  • Enhanced alignment and spacing for a cleaner, more consistent appearance across related controls.
  • Visual/UI-only changes; no impact on functionality.

[coderabbitai]

Walkthrough

Updates the DashStats page to wrap network-related UI elements in a new container and add specific classes to network selects. Corresponding CSS introduces responsive layout and sizing rules for these selectors within the header area. No logic or control-flow changes.

Changes

Cohort / File(s)	Summary
UI markup updates for network selectors emhttp/plugins/dynamix/DashStats.page	Wrapped network gap span with class network-selects; added classes network-interface to port_select and network-type to enter_view selects.
Styles for network selectors emhttp/plugins/dynamix/sheets/DashStats.css	Added layout/styles for span.head_gap.network-selects; ensured child min-width: 0; added select.network-select, select.network-interface, and select.network-type rules for responsive sizing and ellipsis.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I twitch my ears at tidy UI rows,
New nets and types where the header flows.
Flex grows here, a trim ellipse there—
Hop, hop, hooray for responsive flair! 🐇
My carrots align, just like your selects.

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 succinctly communicates the core UI enhancement by stating that DashStats select elements are being updated for improved layout and styling, which directly aligns with the CSS and template changes in the pull request.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/network-widget-size

---

_{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.09.25.1502
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-2403/webgui-pr-2403.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/DashStats.page
emhttp/plugins/dynamix/sheets/DashStats.css

🔄 To Remove:

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

plugin remove webgui-pr-2403

---

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

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

emhttp/plugins/dynamix/DashStats.page (1)

501-514: Add accessible labels to selects

These selects have no associated labels. Add aria-labels for SR users without impacting layout.

-                                              <select name="port_select" class="network-select network-interface" onchange="portSelect(this.value)">
+                                              <select name="port_select" class="network-select network-interface" aria-label="<?=_('Network interface')?>" onchange="portSelect(this.value)">
                                                   <?foreach ($ports as $port):?>
                                                       <?=mk_option("",$port,_($port))?>
                                                   <?endforeach;?>
                                               </select>
-                                              <select name="enter_view" class="network-select network-type" onchange="changeView(this.value)">
+                                              <select name="enter_view" class="network-select network-type" aria-label="<?=_('Network view type')?>" onchange="changeView(this.value)">
                                                   <?=mk_option("", "0", _("General info"))?>
                                                   <?=mk_option("", "1", _("Counters info"))?>
                                                   <?=mk_option("", "2", _("Errors info"))?>
                                                   <?=mk_option("", "3", _("Network traffic"))?>
                                               </select>

emhttp/plugins/dynamix/sheets/DashStats.css (1)

58-82: Flex sizing: avoid width:100% on flex item; consider select ellipsis behavior

• Using width: 100% on a flex item can cause overflow in some Safari versions. Prefer a 0% basis and let flex grow.
• text-overflow on native select is inconsistently supported; verify truncation in Safari/iOS and Firefox.

-span.head_gap.network-selects {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    flex: 1 1 auto;
-}
+span.head_gap.network-selects {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex: 1 1 0%;
+}

 select.network-select {
     min-width: 0;
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    box-sizing: border-box;
 }

Please sanity-check the truncation/overflow on:

• macOS Safari and iOS Safari
• Firefox (latest)
• Edge/Chrome (latest)

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ad09b2b and 2b0244f.

📒 Files selected for processing (2)

• emhttp/plugins/dynamix/DashStats.page (1 hunks)
• emhttp/plugins/dynamix/sheets/DashStats.css (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Analyze (javascript-typescript)

[github-actions]

🧹 PR Test Plugin Cleaned Up

The test plugin and associated files for this PR have been removed from the preview environment.

---

_{🤖 This comment is automatically generated when a PR is closed.}