fix(monitor-list): cannot display monitor name in full width

[louislam]

Summary

Resolves #5981

I also found that some css classes were missing/wrong place, probably due to unknown refactor pull requests. Add eslint-plugin-vue-scoped-css to prevent such things.

Please follow this checklist to avoid unnecessary back and forth (click to expand)

• ⚠️ If there are Breaking change (a fix or feature that alters existing functionality in a way that could cause issues) I have called them out
• 🧠 I have disclosed any use of LLMs/AI in this contribution and reviewed all generated content.
  I understand that I am responsible for and able to explain every line of code I submit.
• 🔍 Any UI changes adhere to visual style of this project.
• 🛠️ I have self-reviewed and self-tested my code to ensure it works as expected.
• 📝 I have commented my code, especially in hard-to-understand areas (e.g., using JSDoc for methods).
• 🤖 I added or updated automated tests where appropriate.
• 📄 Documentation updates are included (if applicable).
• 🧰 Dependency updates are listed and explained.
• ⚠️ CI passes and is green.

Screenshots for Visual Changes

• UI Modifications: Highlight any changes made to the user interface.
• Before & After: Include screenshots or comparisons (if applicable).

Before:

After:

[louislam]

  1687:1  warning  The selector `.maintenance-bg-info` is unused  vue-scoped-css/no-unused-selector
  1691:1  warning  The selector `.maintenance-icon` is unused     vue-scoped-css/no-unused-selector
  1705:1  warning  The selector `.mobile` is unused               vue-scoped-css/no-unused-selector
  1715:1  warning  The selector `.dark` is unused                 vue-scoped-css/no-unused-selector

✖ 72 problems (0 errors, 72 warnings)

Well... There are actually a lot of unused classes, set as warning first, as I am not sure if it is actually safe to remove them, because some classes looks like reference to global classes like .dark, .mobile.

[Copilot]

Pull request overview

This PR fixes a bug where monitor names are truncated/cropped in the monitor list, particularly when monitors are nested in groups. It refactors how the monitor name column's width is determined, replacing static Bootstrap column classes with a computed property, and moves CSS class definitions to the correct component. It also introduces eslint-plugin-vue-scoped-css to catch unused scoped CSS selectors going forward.

Changes:

• Fixes monitor name column width by using a computed monitorItem property that applies col-9 col-xl-6 for the normal heartbeat bar layout, and monitor-item for the full-width (bottom/none) layout.
• Removes misplaced CSS rules (.monitor-item, .bottom-style, .actions-row) from MonitorList.vue and adds the correct .bottom-style to MonitorListItem.vue.
• Adds eslint-plugin-vue-scoped-css as a dev dependency and configures it in ESLint.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/components/MonitorListItem.vue	Replaces static column classes with a computed monitorItem property; adds .bottom-style CSS rule
src/components/MonitorList.vue	Removes misplaced .monitor-item, .bottom-style, and .actions-row CSS rules
package.json	Adds eslint-plugin-vue-scoped-css dev dependency; modifies lint:js-prod script
package-lock.json	Lockfile updates for the new dependency
.eslintrc.js	Enables vue-scoped-css/vue3-recommended and vue-scoped-css/no-unused-selector rule