Fix misalignment due to padding in the mobile view

WordPress · Feb 16, 2024 · 5e0fd66 · 5e0fd66
1 parent e60982f
commit 5e0fd66
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue b/frontend/src/components/VHeader/VHeaderMobile/VHeaderMobile.vue
@@ -10,7 +10,7 @@
       aria-label="inputmodal"
       @close="deactivate"
     >
-      <div class="flex w-full" :class="{ 'px-2': isRecentSearchesModalOpen }">
+      <div class="flex w-full" :class="{ 'px-3': isRecentSearchesModalOpen }">
         <!-- Form action is a fallback for when JavaScript is disabled. -->
         <form
           action="/search"

diff --git a/frontend/src/components/VModal/VInputModal.vue b/frontend/src/components/VModal/VInputModal.vue
@@ -10,7 +10,7 @@
         <div
           ref="dialogRef"
           v-bind="$attrs"
-          class="flex w-full flex-col px-4 py-4"
+          class="flex w-full flex-col px-3 py-4"
           role="dialog"
           aria-modal="true"
           @keydown="onKeyDown"

diff --git a/frontend/src/components/VRecentSearches/VRecentSearches.vue b/frontend/src/components/VRecentSearches/VRecentSearches.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="flex flex-col rounded-sm bg-white"
-    :class="bordered ? 'border border-dark-charcoal-20 p-2 shadow-el-2' : 'p-3'"
+    :class="{ 'border border-dark-charcoal-20 shadow-el-2': bordered }"
     data-testid="recent-searches"
   >
     <div