From 151ff27351e9ac0422d47933286f82a4fa1b4533 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 29 May 2024 15:38:30 +0200
Subject: [PATCH] Styling

---
 .../grid/controls/ColumnsSettingButton.svelte | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
index 8fe3854d93..2608eea75f 100644
--- a/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
+++ b/packages/frontend-core/src/components/grid/controls/ColumnsSettingButton.svelte
@@ -78,7 +78,7 @@
           <Icon size="S" name={getColumnIcon(column)} />
           {column.label}
         </div>
-        <div>
+        <div class="permissionPicker">
           {#each options as option}
             <ActionButton
               on:click={() => toggleColumn(column, option.value)}
@@ -86,6 +86,7 @@
               icon={option.icon}
               quiet
               selected={option.value === columnToPermissionOptions(column)}
+              noPadding
             />
           {/each}
         </div>
@@ -101,11 +102,6 @@
     flex-direction: column;
     gap: 12px;
   }
-  .buttons {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-  }
   .columns {
     display: grid;
     align-items: center;
@@ -118,4 +114,16 @@
     display: flex;
     gap: 8px;
   }
+  .permissionPicker {
+    display: flex;
+    gap: var(--spacing-xs);
+    padding-left: calc(var(--spacing-xl) * 2);
+  }
+
+  .permissionPicker :global(.spectrum-Icon) {
+    width: 14px;
+  }
+  .permissionPicker :global(.spectrum-ActionButton) {
+    width: 22px;
+  }
 </style>