From d016db95ddf48f19b25d76f64239abc538b9ddbe Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 21 Feb 2022 14:47:01 +0000
Subject: [PATCH] Improve table column width handling when custom widths are
 applied

---
 packages/bbui/src/Table/BoldRenderer.svelte   |  2 +-
 packages/bbui/src/Table/CellRenderer.svelte   | 26 ++++++++++++-------
 packages/bbui/src/Table/StringRenderer.svelte |  2 +-
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/bbui/src/Table/BoldRenderer.svelte b/packages/bbui/src/Table/BoldRenderer.svelte
index 242270104f..ae9ca24c42 100644
--- a/packages/bbui/src/Table/BoldRenderer.svelte
+++ b/packages/bbui/src/Table/BoldRenderer.svelte
@@ -10,6 +10,6 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 200px;
+    max-width: var(--max-cell-width);
   }
 </style>
diff --git a/packages/bbui/src/Table/CellRenderer.svelte b/packages/bbui/src/Table/CellRenderer.svelte
index fad88d860c..4dda31240a 100644
--- a/packages/bbui/src/Table/CellRenderer.svelte
+++ b/packages/bbui/src/Table/CellRenderer.svelte
@@ -41,13 +41,21 @@
 </script>
 
 {#if renderer && (customRenderer || (cellValue != null && cellValue !== ""))}
-  <svelte:component
-    this={renderer}
-    {row}
-    {schema}
-    value={cellValue}
-    on:clickrelationship
-  >
-    <slot />
-  </svelte:component>
+  <div style="--max-cell-width: {schema.width ? 'none' : '200px'};">
+    <svelte:component
+      this={renderer}
+      {row}
+      {schema}
+      value={cellValue}
+      on:clickrelationship
+    >
+      <slot />
+    </svelte:component>
+  </div>
 {/if}
+
+<style>
+  div {
+    display: contents;
+  }
+</style>
diff --git a/packages/bbui/src/Table/StringRenderer.svelte b/packages/bbui/src/Table/StringRenderer.svelte
index dc5c85acf3..e881551bc8 100644
--- a/packages/bbui/src/Table/StringRenderer.svelte
+++ b/packages/bbui/src/Table/StringRenderer.svelte
@@ -9,6 +9,6 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 200px;
+    max-width: var(--max-cell-width);
   }
 </style>