From ad33b26729b1bf3d21f8d480e04c197f4fbb6119 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 8 Dec 2023 15:26:13 +0100
Subject: [PATCH] fix(CommandPalette): missing right padding on input with
 close button

---
 src/runtime/components/navigation/CommandPalette.vue | 4 ++--
 src/runtime/ui.config/navigation/commandPalette.ts   | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/navigation/CommandPalette.vue b/src/runtime/components/navigation/CommandPalette.vue
index 97b3938197..2d74224957 100644
--- a/src/runtime/components/navigation/CommandPalette.vue
+++ b/src/runtime/components/navigation/CommandPalette.vue
@@ -14,14 +14,14 @@
       <HComboboxInput
         ref="comboboxInput"
         :value="query"
-        :class="[ui.input.base, ui.input.size, ui.input.height, ui.input.padding, icon && ui.input.icon.padding]"
+        :class="[ui.input.base, ui.input.size, ui.input.height, ui.input.padding, icon && ui.input.icon.padding, closeButton && ui.input.closeButton.padding]"
         :placeholder="placeholder"
         :aria-label="placeholder"
         autocomplete="off"
         @change="query = $event.target.value"
       />
 
-      <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" :class="ui.input.closeButton" @click="onClear" />
+      <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...(ui.default.closeButton || {}), ...closeButton }" :class="ui.input.closeButton.base" @click="onClear" />
     </div>
 
     <HComboboxOptions
diff --git a/src/runtime/ui.config/navigation/commandPalette.ts b/src/runtime/ui.config/navigation/commandPalette.ts
index 9fc068ecbb..c1abfe5385 100644
--- a/src/runtime/ui.config/navigation/commandPalette.ts
+++ b/src/runtime/ui.config/navigation/commandPalette.ts
@@ -13,7 +13,10 @@ export default {
       size: 'h-4 w-4',
       padding: 'ps-10'
     },
-    closeButton: 'absolute end-4'
+    closeButton: {
+      base: 'absolute end-4',
+      padding: 'pe-10'
+    }
   },
   emptyState: {
     wrapper: 'flex flex-col items-center justify-center flex-1 px-6 py-14 sm:px-14',