[ui] fix overflow on Home

webui/src/components/widgets/Table.svelte

@@ -19,7 +19,7 @@
   export let header = true;
 
   export let orderByValue = false;
-  export let unfixed = false;
+  export let columnWidths: string[] = [];
 
   export let entries: UpEntry[];
   export let editable = false;
@@ -179,13 +179,20 @@
   }
 </script>
 
-<table class:unfixed>
+<table>
   <colgroup>
     {#if editable}
       <col class="action-col" />
     {/if}
-    {#each displayColumns as column}
-      <col class="{column}-col" />
+    {#each displayColumns as column, idx}
+      {#if columnWidths.length}
+        <col
+          class="{column}-col"
+          style="width: {columnWidths[idx] || 'unset'}"
+        />
+      {:else}
+        <col class="{column}-col" />
+      {/if}
     {/each}
   </colgroup>
 
@@ -296,10 +303,6 @@
     width: 100%;
     table-layout: fixed;
 
-    &.unfixed {
-      table-layout: auto;
-    }
-
     border-spacing: 0.5em 0;
 
     th {

webui/src/lib/types.ts

@@ -100,8 +100,8 @@ const TYPE_WIDGETS: { [key: string]: Widget[] } = {
           component: Table,
           props: {
             columns: "value, entity",
+            columnWidths: ["13em"],
             orderByValue: true,
-            unfixed: true,
             header: false,
           },
         },