fix: Resolve all 17 stylelint errors across 7 Vue components

Merge duplicate CSS selectors, reorder selectors to fix descending
specificity warnings, and replace invalid h7 element with h6.

Author: rubenvdlinde

src/components/GenericObjectTable.vue

@@ -1213,6 +1213,30 @@ export default {
 	margin-bottom: 12px;
 }
 
+.viewTable {
+	width: 100%;
+	border-collapse: collapse;
+	table-layout: auto;
+	min-width: 600px;
+}
+
+.viewTable th,
+.viewTable td {
+	padding: 12px 8px;
+	text-align: left;
+	border-bottom: 1px solid var(--color-border);
+	width: auto;
+	min-width: 120px;
+}
+
+.viewTable th {
+	background: var(--color-background-dark);
+	font-weight: 600;
+	position: sticky;
+	top: 0;
+	z-index: 1;
+}
+
 .statisticsTable {
 	width: 100%;
 	border-collapse: collapse;
@@ -1240,13 +1264,6 @@ export default {
 	padding: 4px 8px;
 }
 
-.truncatedText {
-	max-width: 200px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 /* Filter Styles */
 .viewFilters {
 	display: flex;
@@ -1338,30 +1355,6 @@ export default {
 	background: var(--color-main-background);
 }
 
-.viewTable {
-	width: 100%;
-	border-collapse: collapse;
-	table-layout: auto;
-	min-width: 600px;
-}
-
-.viewTable th,
-.viewTable td {
-	padding: 12px 8px;
-	text-align: left;
-	border-bottom: 1px solid var(--color-border);
-	width: auto;
-	min-width: 120px;
-}
-
-.viewTable th {
-	background: var(--color-background-dark);
-	font-weight: 600;
-	position: sticky;
-	top: 0;
-	z-index: 1;
-}
-
 .viewTableRow:hover {
 	background: var(--color-background-hover);
 }

src/modals/object/MergeObject.vue

@@ -815,6 +815,7 @@ export default {
 .object-id {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;
+	font-family: monospace;
 	margin: 0;
 }
 
@@ -924,6 +925,32 @@ export default {
 	white-space: nowrap;
 }
 
+.file-table th, .relation-table th {
+	background-color: var(--color-background-dark);
+	font-weight: bold;
+	position: sticky;
+	top: 0;
+	z-index: 1;
+}
+
+.report-table {
+	width: 100%;
+	border-collapse: collapse;
+	margin-top: 8px;
+}
+
+.report-table th,
+.report-table td {
+	padding: 8px 12px;
+	text-align: left;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.report-table th {
+	background-color: var(--color-background-dark);
+	font-weight: bold;
+}
+
 .file-table th:nth-child(1), .file-table td:nth-child(1) {
 	width: 60%;
 }
@@ -948,14 +975,6 @@ export default {
 	width: 25%;
 }
 
-.file-table th, .relation-table th {
-	background-color: var(--color-background-dark);
-	font-weight: bold;
-	position: sticky;
-	top: 0;
-	z-index: 1;
-}
-
 .file-table tbody tr:hover,
 .relation-table tbody tr:hover {
 	background-color: var(--color-background-hover);
@@ -998,12 +1017,6 @@ export default {
 	margin-top: 8px;
 }
 
-.object-id {
-	color: var(--color-text-maxcontrast);
-	font-size: 0.9em;
-	font-family: monospace;
-}
-
 .object-title {
 	color: var(--color-main-text);
 	font-weight: 500;
@@ -1032,24 +1045,6 @@ export default {
 	margin-bottom: 4px;
 }
 
-.report-table {
-	width: 100%;
-	border-collapse: collapse;
-	margin-top: 8px;
-}
-
-.report-table th,
-.report-table td {
-	padding: 8px 12px;
-	text-align: left;
-	border-bottom: 1px solid var(--color-border);
-}
-
-.report-table th {
-	background-color: var(--color-background-dark);
-	font-weight: bold;
-}
-
 .error-text {
 	color: var(--color-error);
 }

src/modals/object/ObjectModal.vue

@@ -724,6 +724,7 @@ export default {
 
 .codeMirrorContainer :deep(.cm-editor) {
 	height: 100%;
+	outline: none !important;
 }
 
 .codeMirrorContainer :deep(.cm-scroller) {
@@ -796,22 +797,11 @@ export default {
 	padding: 16px;
 }
 
-.form-field {
-	margin-bottom: 16px;
-}
-
 /* CodeMirror */
-.codeMirrorContainer {
-	margin-block-start: 6px;
-}
-
 .codeMirrorContainer :deep(.cm-content) {
 	border-radius: 0 !important;
 	border: none !important;
 }
-.codeMirrorContainer :deep(.cm-editor) {
-	outline: none !important;
-}
 .codeMirrorContainer.light > .vue-codemirror {
 	border: 1px dotted silver;
 }

src/modals/object/ViewObject.vue

@@ -3431,11 +3431,15 @@ export default {
 	justify-content: space-between;
 	text-align: left;
 	width: 100%;
+	flex-wrap: wrap;
 }
 
 .value-input-container {
 	flex: 1;
 	text-align: left;
+	padding: 0;
+	margin: 0;
+	width: 100%;
 }
 
 .drop-property-btn {
@@ -3486,14 +3490,6 @@ export default {
 	text-align: left;
 }
 
-.value-input-container {
-	flex: 1;
-	text-align: left;
-	padding: 0;
-	margin: 0;
-	width: 100%;
-}
-
 .value-input-container .text-field {
 	margin: 0;
 	padding: 0;
@@ -3829,10 +3825,6 @@ export default {
 	word-break: unset;
 }
 
-.value-cell-content {
-	flex-wrap: wrap;
-}
-
 .viewObjectDialog .viewTable td.table-row-type {
     overflow: hidden;
     text-overflow: ellipsis;

src/views/dashboard/DashboardIndex.vue

@@ -33,6 +33,11 @@ export default {
     margin-block-end: 4rem;
 }
 
+.dashboard-content > .graphs .content {
+    display: flex;
+    gap: 4px;
+}
+
 /* most searched terms */
 .dashboard-content > .most-searched-terms {
     display: grid;
@@ -113,10 +118,6 @@ body[data-theme-dark] .dashboard-content > .most-searched-terms > div {
     grid-column-start: 1;
     grid-column-end: 3;
 }
-.dashboard-content > .graphs .content {
-    display: flex;
-    gap: 4px;
-}
 .dashboard-content > .graphs .dashboard-small-list {
     display: flex;
     flex-direction: column;

src/views/settings/sections/ArchiMateImportExport.vue

@@ -229,7 +229,7 @@
 											:key="sectionName"
 											class="section-error-group">
 											<div class="section-header">
-												<h7>{{ sectionData.section_name }}</h7>
+												<h6>{{ sectionData.section_name }}</h6>
 												<span class="section-error-count">{{ sectionData.total_errors }} errors</span>
 											</div>
 											<div class="section-error-details">
@@ -1305,6 +1305,8 @@ export default {
 
 .error-details {
 	padding: 1rem;
+	flex: 1;
+	min-width: 0;
 }
 
 .error-details p {
@@ -1672,11 +1674,6 @@ export default {
 .error-type-badge.encoding { background: #f1f8e9; color: #558b2f; }
 .error-type-badge.general { background: #f5f5f5; color: #424242; }
 
-.error-details {
-	flex: 1;
-	min-width: 0;
-}
-
 .error-message {
 	font-weight: 500;
 	color: var(--color-main-text);
@@ -1736,7 +1733,7 @@ export default {
 	border-bottom: 1px solid var(--color-border);
 }
 
-.section-header h7 {
+.section-header h6 {
 	margin: 0;
 	font-size: 0.9rem;
 	font-weight: 600;

src/views/settings/sections/StatisticsOverview.vue

@@ -496,6 +496,32 @@ export default defineComponent({
 	border-bottom: 1px solid var(--color-border-dark);
 }
 
+.modules-table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 0.9em;
+}
+
+.modules-table thead {
+	position: sticky;
+	top: 0;
+	background-color: var(--color-background-hover);
+	z-index: 1;
+}
+
+.modules-table th {
+	padding: 10px 12px;
+	text-align: left;
+	font-weight: 600;
+	border-bottom: 2px solid var(--color-border);
+	white-space: nowrap;
+}
+
+.modules-table td {
+	padding: 8px 12px;
+	border-bottom: 1px solid var(--color-border-dark);
+}
+
 .statistics-table tbody tr:last-child td {
 	border-bottom: none;
 }
@@ -727,32 +753,6 @@ export default defineComponent({
 	border-radius: var(--border-radius);
 }
 
-.modules-table {
-	width: 100%;
-	border-collapse: collapse;
-	font-size: 0.9em;
-}
-
-.modules-table thead {
-	position: sticky;
-	top: 0;
-	background-color: var(--color-background-hover);
-	z-index: 1;
-}
-
-.modules-table th {
-	padding: 10px 12px;
-	text-align: left;
-	font-weight: 600;
-	border-bottom: 2px solid var(--color-border);
-	white-space: nowrap;
-}
-
-.modules-table td {
-	padding: 8px 12px;
-	border-bottom: 1px solid var(--color-border-dark);
-}
-
 .modules-table tbody tr:last-child td {
 	border-bottom: none;
 }