From 9047c54b03084dd97accd1132f83b71a04ca0e3b Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 10 Jun 2024 09:52:49 +0100
Subject: [PATCH] Truncate long column names in column settings buttons

---
 .../grid/controls/ColumnsSettingButton.svelte      | 14 ++++++++++++--
 .../grid/controls/ToggleActionButtonGroup.svelte   |  1 -
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
index ed94a01e56..f16a1183a4 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -116,7 +116,9 @@
       {#each displayColumns as column}
         <div class="column">
           <Icon size="S" name={getColumnIcon(column)} />
-          {column.label}
+          <div class="column-label" title={column.label}>
+            {column.label}
+          </div>
         </div>
         <ToggleActionButtonGroup
           on:click={e => toggleColumn(column, e.detail)}
@@ -139,7 +141,8 @@
     display: grid;
     align-items: center;
     grid-template-columns: 1fr auto;
-    gap: 8px;
+    grid-row-gap: 8px;
+    grid-column-gap: 24px;
   }
   .columns :global(.spectrum-Switch) {
     margin-right: 0;
@@ -148,4 +151,11 @@
     display: flex;
     gap: 8px;
   }
+  .column-label {
+    min-width: 80px;
+    max-width: 200px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 </style>
diff --git a/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte b/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
index 2e62c593d1..497e77c2c9 100644
--- a/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ToggleActionButtonGroup.svelte
@@ -29,7 +29,6 @@
   .permissionPicker {
     display: flex;
     gap: var(--spacing-xs);
-    padding-left: calc(var(--spacing-xl) * 2);
   }
 
   .permissionPicker :global(.spectrum-Icon) {