From ccb973ecafa6c334bd604439d7d5285758c225b4 Mon Sep 17 00:00:00 2001
From: Matt Rubens <mrubens@users.noreply.github.com>
Date: Sun, 1 Dec 2024 22:24:53 -0500
Subject: [PATCH] Nicer UI for allowed command pills (#37)

---
 .../src/components/settings/SettingsView.tsx  | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/webview-ui/src/components/settings/SettingsView.tsx b/webview-ui/src/components/settings/SettingsView.tsx
index 556a68c..0a8acb2 100644
--- a/webview-ui/src/components/settings/SettingsView.tsx
+++ b/webview-ui/src/components/settings/SettingsView.tsx
@@ -237,17 +237,36 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
 								</VSCodeButton>
 							</div>
 
-							<div style={{ marginTop: '10px' }}>
+							<div style={{ 
+								marginTop: '10px',
+								display: 'flex',
+								flexWrap: 'wrap',
+								gap: '5px'
+							}}>
 								{(allowedCommands ?? []).map((cmd, index) => (
 									<div key={index} style={{
 										display: 'flex',
 										alignItems: 'center',
 										gap: '5px',
-										marginBottom: '5px'
+										backgroundColor: 'var(--vscode-button-secondaryBackground)',
+										padding: '2px 6px',
+										borderRadius: '4px',
+										border: '1px solid var(--vscode-button-secondaryBorder)',
+										height: '24px'
 									}}>
 										<span>{cmd}</span>
 										<VSCodeButton
 											appearance="icon"
+											style={{
+												padding: 0,
+												margin: 0,
+												height: '20px',
+												width: '20px',
+												minWidth: '20px',
+												display: 'flex',
+												alignItems: 'center',
+												justifyContent: 'center'
+											}}
 											onClick={() => {
 												const newCommands = (allowedCommands ?? []).filter((_, i) => i !== index)
 												setAllowedCommands(newCommands)