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

2026-04-18 12:09:43 +00:00 · 2026-03-02 09:20:10 +08:00
parent 2c6dcbb7fa
commit 9be0f8a081
5 changed files with 182 additions and 25 deletions
--- a/.eslintrc.js
+++ b/.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",
--- a/package-lock.json
+++ b/package-lock.json
@@ -129,6 +129,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",
@@ -4030,6 +4031,19 @@
            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
            "license": "MIT"
        },
+        "node_modules/atob": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+            "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+            "dev": true,
+            "license": "(MIT OR Apache-2.0)",
+            "bin": {
+                "atob": "bin/atob.js"
+            },
+            "engines": {
+                "node": ">= 4.5.0"
+            }
+        },
        "node_modules/available-typed-arrays": {
            "version": "1.0.7",
            "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -5451,6 +5465,18 @@
                "node": ">= 8"
            }
        },
+        "node_modules/css": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
+            "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "inherits": "^2.0.4",
+                "source-map": "^0.6.1",
+                "source-map-resolve": "^0.6.0"
+            }
+        },
        "node_modules/css-color-converter": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/css-color-converter/-/css-color-converter-2.0.0.tgz",
@@ -5525,6 +5551,16 @@
                "url": "https://github.com/sponsors/fb55"
            }
        },
+        "node_modules/css/node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
        "node_modules/cssesc": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5689,6 +5725,16 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/decode-uri-component": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+            "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10"
+            }
+        },
        "node_modules/decompress-response": {
            "version": "6.0.0",
            "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -6605,6 +6651,22 @@
                "url": "https://opencollective.com/eslint"
            }
        },
+        "node_modules/eslint-compat-utils": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.4.1.tgz",
+            "integrity": "sha512-5N7ZaJG5pZxUeNNJfUchurLVrunD1xJvyg5kYOIVF8kg1f3ajTikmAu/5fZ9w100omNPOoMjngRszh/Q/uFGMg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "semver": "^7.5.4"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "peerDependencies": {
+                "eslint": ">=6.0.0"
+            }
+        },
        "node_modules/eslint-config-prettier": {
            "version": "10.1.8",
            "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
@@ -6666,6 +6728,33 @@
                "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0"
            }
        },
+        "node_modules/eslint-plugin-vue-scoped-css": {
+            "version": "2.7.2",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-vue-scoped-css/-/eslint-plugin-vue-scoped-css-2.7.2.tgz",
+            "integrity": "sha512-myJ99CJuwmAx5kq1WjgIeaUkxeU6PIEUh7age79Alm30bhN4fVTapOQLSMlvVTgxr36Y3igsZ3BCJM32LbHHig==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@eslint-community/eslint-utils": "^4.4.0",
+                "eslint-compat-utils": "^0.4.0",
+                "lodash": "^4.17.21",
+                "postcss": "^8.4.31",
+                "postcss-safe-parser": "^6.0.0",
+                "postcss-scss": "^4.0.3",
+                "postcss-selector-parser": "^6.0.9",
+                "postcss-styl": "^0.12.0"
+            },
+            "engines": {
+                "node": "^12.22 || ^14.17 || >=16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ota-meshi"
+            },
+            "peerDependencies": {
+                "eslint": ">=5.0.0",
+                "vue-eslint-parser": ">=7.1.0"
+            }
+        },
        "node_modules/eslint-scope": {
            "version": "7.2.2",
            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
@@ -6959,6 +7048,13 @@
            "dev": true,
            "license": "MIT"
        },
+        "node_modules/fast-diff": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+            "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+            "dev": true,
+            "license": "Apache-2.0"
+        },
        "node_modules/fast-fifo": {
            "version": "1.3.2",
            "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
@@ -9441,6 +9537,13 @@
            "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
            "license": "MIT"
        },
+        "node_modules/lodash.sortedlastindex": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/lodash.sortedlastindex/-/lodash.sortedlastindex-4.1.0.tgz",
+            "integrity": "sha512-s8xEQdsp2Tu5zUqVdFSe9C0kR8YlnAJYLqMdkh+pIRBRxF6/apWseLdHl3/+jv2I61dhPwtI/Ff+EqvCpc+N8w==",
+            "dev": true,
+            "license": "MIT"
+        },
        "node_modules/lodash.truncate": {
            "version": "4.4.2",
            "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
@@ -11305,6 +11408,26 @@
                "node": ">=4"
            }
        },
+        "node_modules/postcss-styl": {
+            "version": "0.12.3",
+            "resolved": "https://registry.npmjs.org/postcss-styl/-/postcss-styl-0.12.3.tgz",
+            "integrity": "sha512-8I7Cd8sxiEITIp32xBK4K/Aj1ukX6vuWnx8oY/oAH35NfQI4OZaY5nd68Yx8HeN5S49uhQ6DL0rNk0ZBu/TaLg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "debug": "^4.1.1",
+                "fast-diff": "^1.2.0",
+                "lodash.sortedlastindex": "^4.1.0",
+                "postcss": "^7.0.27 || ^8.0.0",
+                "stylus": "^0.57.0"
+            },
+            "engines": {
+                "node": "^8.10.0 || ^10.13.0 || ^11.10.1 || >=12.13.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/stylus"
+            }
+        },
        "node_modules/postcss-value-parser": {
            "version": "4.2.0",
            "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -13104,6 +13227,18 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/source-map-resolve": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
+            "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
+            "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "atob": "^2.1.2",
+                "decode-uri-component": "^0.2.0"
+            }
+        },
        "node_modules/source-map-support": {
            "version": "0.5.21",
            "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -13676,6 +13811,34 @@
                "node": ">=8"
            }
        },
+        "node_modules/stylus": {
+            "version": "0.57.0",
+            "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.57.0.tgz",
+            "integrity": "sha512-yOI6G8WYfr0q8v8rRvE91wbxFU+rJPo760Va4MF6K0I6BZjO4r+xSynkvyPBP9tV1CIEUeRsiidjIs2rzb1CnQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "css": "^3.0.0",
+                "debug": "^4.3.2",
+                "glob": "^7.1.6",
+                "safer-buffer": "^2.1.2",
+                "sax": "~1.2.4",
+                "source-map": "^0.7.3"
+            },
+            "bin": {
+                "stylus": "bin/stylus"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/stylus/node_modules/sax": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+            "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+            "dev": true,
+            "license": "ISC"
+        },
        "node_modules/supports-color": {
            "version": "8.1.1",
            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
--- a/package.json
+++ b/package.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",
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -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 {
--- a/src/components/MonitorListItem.vue
+++ b/src/components/MonitorListItem.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>