From acc024f18e2eebe9768209043ba0b30052316815 Mon Sep 17 00:00:00 2001
From: Loi Nguyen <vanloi999@gmail.com>
Date: Fri, 31 Jul 2026 22:35:24 +0700
Subject: [PATCH] Fix CardStack search box alignment

---
 .../src/__tests__/CardStack.spec.js             | 17 +++++++++++++++--
 .../__snapshots__/CardStack.spec.js.snap        |  6 +++---
 .../vue-components/src/cardstack/CardStack.vue  |  4 ++--
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/vue-components/src/__tests__/CardStack.spec.js b/packages/vue-components/src/__tests__/CardStack.spec.js
index 3f9b5abe07..2989f6cded 100644
--- a/packages/vue-components/src/__tests__/CardStack.spec.js
+++ b/packages/vue-components/src/__tests__/CardStack.spec.js
@@ -49,6 +49,19 @@ const CARDS_WITH_CUSTOM_TAGS = `
 `;
 
 describe('CardStack', () => {
+  test('search input should not reuse the wrapper spacing class', () => {
+    const wrapper = mount(CardStack, {
+      propsData: {
+        searchable: true,
+      },
+      global: DEFAULT_GLOBAL_MOUNT_OPTIONS,
+    });
+
+    const searchBar = wrapper.find('.search-bar');
+    expect(searchBar.element.tagName).toBe('SPAN');
+    expect(searchBar.find('input').classes()).not.toContain('search-bar');
+  });
+
   test('should not hide cards when no filter is provided', async () => {
     const wrapper = mount(CardStack, {
       propsData: {
@@ -527,7 +540,7 @@ describe('CardStack', () => {
     expect(wrapper.vm.tagCounts.get('Tag2')).toBe(2);
 
     // Simulate a search for "alpha" which only matches the first card (Tag1)
-    const searchInput = wrapper.find('input.search-bar');
+    const searchInput = wrapper.find('.search-bar input');
     await searchInput.setValue('alpha');
     await searchInput.trigger('input');
     await wrapper.vm.$nextTick();
@@ -710,7 +723,7 @@ describe('CardStack', () => {
     expect(wrapper.vm.matchingCardsCount).toBe(3);
 
     // Search for "alpha beta" - should match only first card
-    const searchInput = wrapper.find('input.search-bar');
+    const searchInput = wrapper.find('.search-bar input');
     await searchInput.setValue('alpha beta');
     await searchInput.trigger('input');
     await wrapper.vm.$nextTick();
diff --git a/packages/vue-components/src/__tests__/__snapshots__/CardStack.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/CardStack.spec.js.snap
index cc25da812a..a57d902b42 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/CardStack.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/CardStack.spec.js.snap
@@ -11,7 +11,7 @@ exports[`CardStack markdown in header, content 1`] = `
       class="search-bar"
     >
       <input
-        class="form-control search-bar"
+        class="form-control"
         placeholder="Search"
         type="text"
       />
@@ -97,7 +97,7 @@ exports[`CardStack should not hide cards when no filter is provided 1`] = `
       class="search-bar"
     >
       <input
-        class="form-control search-bar"
+        class="form-control"
         placeholder="Search"
         type="text"
       />
@@ -231,7 +231,7 @@ exports[`CardStack should not hide cards when no filter is provided 2`] = `
       class="search-bar"
     >
       <input
-        class="form-control search-bar"
+        class="form-control"
         placeholder="Search"
         type="text"
       />
diff --git a/packages/vue-components/src/cardstack/CardStack.vue b/packages/vue-components/src/cardstack/CardStack.vue
index 1b64b18848..7e83028691 100644
--- a/packages/vue-components/src/cardstack/CardStack.vue
+++ b/packages/vue-components/src/cardstack/CardStack.vue
@@ -6,7 +6,7 @@
           <input
             v-model="value"
             type="text"
-            class="form-control search-bar"
+            class="form-control"
             :placeholder="placeholder"
             @input="update"
           />
@@ -283,7 +283,7 @@ export default {
         justify-content: center;
         align-items: center;
         margin: 0;
-        padding: 5px;
+        padding: 0;
     }
 
     .row {