fix(CommandPalette): missing right padding on input with close button

nuxt · Dec 8, 2023 · ad33b26 · ad33b26
1 parent f07968a
commit ad33b26
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git 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
@@ -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',