move table styling to table, enlarge value column

ui/src/components/widgets/Table.vue

@@ -3,7 +3,7 @@
     <table>
       <colgroup>
         <col class="attr-action-col" />
-        <col />
+        <col class="attr-col" />
         <col />
       </colgroup>
       <tr>
@@ -157,7 +157,41 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.more-button {
+table {
   width: 100%;
+  table-layout: fixed;
+
+  th {
+    text-align: left;
+  }
+
+  td {
+    font-family: var(--monospace-font);
+    padding-right: 1em;
+    line-height: 1em;
+    line-break: anywhere;
+
+    &.attr-action {
+      max-width: 1em;
+    }
+  }
+
+  .attr-action-col {
+    width: 1.5em;
+  }
+
+  .attr-col {
+    width: 25%;
+  }
+
+  sl-icon-button {
+    &::part(base) {
+      padding: 2px;
+    }
+  }
+
+  .more-button {
+    width: 100%;
+  }
 }
 </style>

ui/src/views/Inspect.vue

@@ -184,36 +184,6 @@ export default defineComponent({
 
 <style lang="scss">
 .inspect {
-  table {
-    width: 100%;
-    table-layout: fixed;
-
-    th {
-      text-align: left;
-    }
-
-    td {
-      font-family: var(--monospace-font);
-      padding-right: 1em;
-      line-height: 1em;
-      line-break: anywhere;
-
-      &.attr-action {
-        max-width: 1em;
-      }
-    }
-
-    .attr-action-col {
-      width: 1.5em;
-    }
-
-    sl-icon-button {
-      &::part(base) {
-        padding: 2px;
-      }
-    }
-  }
-
   section {
     position: relative;
     overflow: visible;