Device Card: improve truncation (#30533)

Co-authored-by: sourcery-ai[bot] <58596630+sourcery-ai[bot]@users.noreply.github.com>

assets/js/components/Config/DeviceTags.vue

@@ -10,7 +10,7 @@
 				<div class="label overflow-hidden text-truncate flex-shrink-1 flex-grow-1">
 					{{ $t(`config.deviceValue.${entry.name}`) }}
 				</div>
-				<div class="value overflow-hidden text-truncate" :class="valueClasses(entry)">
+				<div class="value" :class="[valueClasses(entry), truncateClasses(entry)]">
 					{{ fmtDeviceValue(entry) }}
 				</div>
 			</span>
@@ -175,6 +175,12 @@ export default {
 		},
 	},
 	methods: {
+		truncateClasses(entry) {
+			// don't truncate numeric values
+			return typeof entry.value === "string"
+				? "overflow-hidden text-truncate"
+				: "text-nowrap flex-shrink-0";
+		},
 		valueClasses(entry) {
 			if (entry.error) {
 				return "value--error";

prettier.config.js

@@ -3,4 +3,9 @@ export default {
   printWidth: 100,
   trailingComma: "es5",
   plugins: ["prettier-plugin-sh"],
+  // mirror .editorconfig for editors that resolve prettier config without it (e.g. Zed)
+  overrides: [
+    { files: ["*.vue", "*.sh"], options: { useTabs: true, tabWidth: 4 } },
+    { files: "*.css", options: { useTabs: true, tabWidth: 2 } },
+  ],
 };