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

Author: louislam

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     extends: [
         "eslint:recommended",
         "plugin:vue/vue3-recommended",
+        "plugin:vue-scoped-css/vue3-recommended",
         "plugin:jsdoc/recommended-error",
         "prettier", // Disables ESLint formatting rules that conflict with Prettier
     ],
@@ -42,6 +43,7 @@ module.exports = {
         "vue/require-component-is": "off", // not allow is="style" https://github.com/vuejs/eslint-plugin-vue/issues/462#issuecomment-430234675
         "vue/attribute-hyphenation": "off", // This change noNL to "no-n-l" unexpectedly
         "vue/multi-word-component-names": "off",
+        "vue-scoped-css/no-unused-selector": "warn",
         curly: "error",
         "no-var": "error",
         "no-throw-literal": "error",

package-lock.json

@@ -11,7 +11,7 @@
     },
     "scripts": {
         "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
-        "lint:js-prod": "npm run lint:js -- --max-warnings 0",
+        "lint:js-prod": "npm run lint:js",
         "lint-fix:js": "eslint --ext \".js,.vue\" --fix --ignore-path .gitignore .",
         "lint:style": "stylelint \"**/*.{vue,css,scss}\" --ignore-path .gitignore",
         "lint-fix:style": "stylelint \"**/*.{vue,css,scss}\" --fix --ignore-path .gitignore",
@@ -189,6 +189,7 @@
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-jsdoc": "~46.4.6",
         "eslint-plugin-vue": "~8.7.1",
+        "eslint-plugin-vue-scoped-css": "~2.7.2",
         "favico.js": "~0.3.10",
         "get-port-please": "^3.2.0",
         "node-ssh": "~13.1.0",

package.json

@@ -739,11 +739,6 @@ export default {
     }
 }
 
-.actions-row {
-    display: flex;
-    align-items: center;
-}
-
 .selection-controls {
     margin-top: 5px;
     display: flex;
@@ -822,10 +817,6 @@ export default {
     transition: none !important;
 }
 
-.monitor-item {
-    width: 100%;
-}
-
 .tags {
     margin-top: 4px;
     padding-left: 67px;
@@ -834,11 +825,6 @@ export default {
     gap: 0;
 }
 
-.bottom-style {
-    padding-left: 67px;
-    margin-top: 5px;
-}
-
 @media (max-width: 549px), (min-width: 770px) and (max-width: 1149px), (min-width: 1200px) and (max-width: 1499px) {
     .selection-controls {
         .selected-count {

src/components/MonitorList.vue

@@ -23,12 +23,7 @@
 
             <router-link :to="monitorURL(monitor.id)" class="item" :class="{ disabled: !monitor.active }">
                 <div class="row">
-                    <div
-                        class="col-9 col-xl-6 small-padding d-flex gap-2 align-items-center"
-                        :class="{
-                            'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none',
-                        }"
-                    >
+                    <div class="small-padding d-flex gap-2 align-items-center" :class="monitorStyle">
                         <div class="me-1">
                             <Uptime :monitor="monitor" type="24" :pill="true" />
                         </div>
@@ -167,6 +162,15 @@ export default {
                 marginLeft: `${20 * this.depth}px`,
             };
         },
+        monitorStyle() {
+            const isFullWidth = this.$root.userHeartbeatBar === "bottom" || this.$root.userHeartbeatBar === "none";
+            const c = {};
+            if (!isFullWidth) {
+                c["col-9"] = true;
+                c["col-xl-6"] = true;
+            }
+            return c;
+        },
     },
     watch: {
         isSelectMode() {
@@ -329,10 +333,6 @@ export default {
     padding-right: 5px !important;
 }
 
-// .monitor-item {
-//     width: 100%;
-// }
-
 .tags {
     margin-top: 4px;
     padding-left: 4px;
@@ -390,4 +390,9 @@ export default {
         cursor: grabbing;
     }
 }
+
+.bottom-style {
+    margin-left: -10px;
+    margin-top: 5px;
+}
 </style>