From 1c1543f012a67d789679c5d2c9256fa125e8229c Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabe@habitica.com>
Date: Tue, 11 Jun 2024 12:04:21 -0500
Subject: [PATCH] fix(layout): tighten up various margins

---
 website/client/src/assets/scss/shops.scss                   | 2 +-
 website/client/src/components/inventory/stable/index.vue    | 5 +++++
 .../client/src/components/shops/customizations/index.vue    | 1 +
 website/client/src/components/shops/featuredItemsHeader.vue | 2 +-
 website/client/src/components/shops/market/index.vue        | 2 +-
 website/client/src/components/shops/seasonal/index.vue      | 4 ++++
 website/client/src/components/shops/timeTravelers/index.vue | 6 +++---
 7 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/website/client/src/assets/scss/shops.scss b/website/client/src/assets/scss/shops.scss
index 58dd2100da..afcb8353a4 100644
--- a/website/client/src/assets/scss/shops.scss
+++ b/website/client/src/assets/scss/shops.scss
@@ -42,7 +42,7 @@
   }
 
   .featuredItems {
-    height: 216px;
+    height: 192px;
 
     .background {
       background-repeat: repeat-x;
diff --git a/website/client/src/components/inventory/stable/index.vue b/website/client/src/components/inventory/stable/index.vue
index 2ae8a026c9..c789de5127 100644
--- a/website/client/src/components/inventory/stable/index.vue
+++ b/website/client/src/components/inventory/stable/index.vue
@@ -134,6 +134,7 @@
         v-for="(petGroup) in petGroups"
         v-if="!anyFilterSelected || viewOptions[petGroup.key].selected"
         :key="petGroup.key"
+        :class="{ hide: viewOptions[petGroup.key].animalCount === 0 }"
       >
         <!-- eslint-enable vue/no-use-v-if-with-v-for -->
         <h4 v-if="viewOptions[petGroup.key].animalCount !== 0">
@@ -311,6 +312,10 @@
     height: 130px;
     overflow: hidden;
   }
+
+  .hide {
+    height: 0px;
+  }
 </style>
 
 <style lang="scss">
diff --git a/website/client/src/components/shops/customizations/index.vue b/website/client/src/components/shops/customizations/index.vue
index 59703aaae7..ad8b4d2ef0 100644
--- a/website/client/src/components/shops/customizations/index.vue
+++ b/website/client/src/components/shops/customizations/index.vue
@@ -90,6 +90,7 @@
   @import '~@/assets/scss/shops.scss';
 
   h1 {
+    line-height: 32px;
     color: $purple-200;
   }
 
diff --git a/website/client/src/components/shops/featuredItemsHeader.vue b/website/client/src/components/shops/featuredItemsHeader.vue
index 416814bec0..d0a89b16e4 100644
--- a/website/client/src/components/shops/featuredItemsHeader.vue
+++ b/website/client/src/components/shops/featuredItemsHeader.vue
@@ -89,7 +89,7 @@ export default {
 
 <style lang="scss" scoped>
 .featuredItems {
-  height: 216px;
+  height: 192px;
 
   .background {
     width: 100%;
diff --git a/website/client/src/components/shops/market/index.vue b/website/client/src/components/shops/market/index.vue
index fa397a6afd..8fbd1d2283 100644
--- a/website/client/src/components/shops/market/index.vue
+++ b/website/client/src/components/shops/market/index.vue
@@ -26,7 +26,7 @@
       />
       <h1
         v-once
-        class="mb-4 page-header"
+        class="page-header mt-4 mb-4"
       >
         {{ $t('market') }}
       </h1>
diff --git a/website/client/src/components/shops/seasonal/index.vue b/website/client/src/components/shops/seasonal/index.vue
index e42f776b2b..38a88af922 100644
--- a/website/client/src/components/shops/seasonal/index.vue
+++ b/website/client/src/components/shops/seasonal/index.vue
@@ -202,6 +202,10 @@
       background-color: #edecee;
       display: inline-block;
       padding: 8px;
+
+      > div {
+        margin-right: auto;
+      }
     }
 
     .item-wrapper {
diff --git a/website/client/src/components/shops/timeTravelers/index.vue b/website/client/src/components/shops/timeTravelers/index.vue
index b36612f45c..1ba97f442e 100644
--- a/website/client/src/components/shops/timeTravelers/index.vue
+++ b/website/client/src/components/shops/timeTravelers/index.vue
@@ -69,15 +69,15 @@
           </div>
         </div>
       </div>
-      <div class="d-flex justify-content-between w-items mt-1">
+      <div class="d-flex justify-content-between w-items">
         <h1
           v-once
-          class="mb-4 page-header"
+          class="page-header mt-4 mb-4"
         >
           {{ $t('timeTravelers') }}
         </h1>
         <div
-          class="clearfix"
+          class="clearfix mt-4"
         >
           <div class="float-right">
             <span class="dropdown-label">{{ $t('sortBy') }}</span>