From f6466b161be3dd4445b06fb3ba1444144d3f38bf Mon Sep 17 00:00:00 2001
From: Kalista Payne <sabrecat@gmail.com>
Date: Thu, 21 Nov 2024 12:55:00 -0600
Subject: [PATCH] Squashed commit of the following:

commit ea8512bc2eeda30c4d983fb43bfcb33ea39093e9
Merge: 2bb7683cfd a36114e904
Author: Kalista Payne <sabrecat@gmail.com>
Date:   Thu Nov 21 12:47:11 2024 -0600

    Merge branch 'develop' into ui-drawer-fix

commit 2bb7683cfda99ad4caf0971291a7f963b4cda942
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Tue Nov 12 15:46:55 2024 -0500

    fix food centering and error centering at very small widths

commit fcabf03978b4c55c40f2c60fb1249e3ef799f02d
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Fri Nov 1 14:44:16 2024 -0400

    grid size update

commit 47a531c1aa44cd1eeeabd1073ac9d7a5ac0880f7
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Thu Oct 31 16:17:22 2024 -0400

    centered error messages on pet drawer

commit 14d2872392518fdd5b2577be4b0f2d8c6f2cf53d
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Thu Oct 24 15:47:46 2024 -0400

    center no food/no saddle messages in drawer

commit 49d1d10a4f72c33c3847ce9e98dc5b7dffc46822
Merge: 6a805bdc45 f1993db0fa
Author: CuriousMagpie <eilatan@gmail.com>
Date:   Thu Oct 24 14:04:16 2024 -0400

    Merge branch 'develop' into ui-drawer-fix

commit 6a805bdc4561b842e0f879085d25c496e621fd84
Author: Alex <alex.kliger@gmail.com>
Date:   Sat Nov 19 09:41:21 2022 -0500

    fix(ui): correct crowding in title of drawer component that causes drawer toggle icon to become obstructed
---
 website/client/src/components/ui/drawer.vue   | 20 +++++++++++++---
 .../src/components/ui/drawerHeaderTabs.vue    |  2 +-
 .../client/src/components/ui/drawerSlider.vue | 24 +++++--------------
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/website/client/src/components/ui/drawer.vue b/website/client/src/components/ui/drawer.vue
index 8c65d6e58a..7143e562a2 100644
--- a/website/client/src/components/ui/drawer.vue
+++ b/website/client/src/components/ui/drawer.vue
@@ -61,6 +61,18 @@
       left: calc((100% + 236px - 978px) / 2);
       right: 0%;
     }
+
+    @media screen and (max-width: 575px) {
+      max-width: none;
+      left: 3%;
+      right: 3%;
+    }
+
+    .message {
+      @media screen and (max-width: 450px) {
+        width: 100%;
+        }
+    }
   }
 
   .drawer-toggle-icon {
@@ -136,7 +148,7 @@
       color: $white !important;
       text-decoration: none !important;
       border-bottom: 2px solid transparent;
-      padding: 0.5rem;
+      padding: 8px;
 
       &-active, &:hover {
         color: $white !important;
@@ -157,17 +169,19 @@
   }
 
   .drawer-slider {
-    padding: 12px 0 0 8px;
+    padding: 0;
     white-space: nowrap;
     position: relative;
+    width: 100%;
 
     & .message {
       display: flex;
       align-items: center;
       justify-content: center;
+      margin: auto;
 
       top: calc(50% - 30px);
-      left: 24px;
+      left: 0;
       right: 0;
       position: absolute;
 
diff --git a/website/client/src/components/ui/drawerHeaderTabs.vue b/website/client/src/components/ui/drawerHeaderTabs.vue
index 12d7889045..e2fb4480d4 100644
--- a/website/client/src/components/ui/drawerHeaderTabs.vue
+++ b/website/client/src/components/ui/drawerHeaderTabs.vue
@@ -51,7 +51,7 @@
 
   .header-tabs {
     display: grid;
-    grid-template-columns: 1fr auto 1fr;
+    grid-template-columns: max-content;
   }
 
   // MS Edge
diff --git a/website/client/src/components/ui/drawerSlider.vue b/website/client/src/components/ui/drawerSlider.vue
index b31ac9f94c..f693aaf36b 100644
--- a/website/client/src/components/ui/drawerSlider.vue
+++ b/website/client/src/components/ui/drawerSlider.vue
@@ -34,12 +34,6 @@
         <template
           v-for="item in showItems"
         >
-          <div
-            v-if="shouldAddVerticalLine(item)"
-            :key="item.key"
-            class="vertical-divider"
-            :style="dividerMargins"
-          ></div>
           <slot
             name="item"
             :item="item"
@@ -56,6 +50,10 @@
 
   $buttonAreaWidth: 60;
 
+  .items > div {
+    margin: 0 12px
+  }
+
   .slider-root {
     position: relative;
   }
@@ -95,9 +93,11 @@
 
     &.left-button {
       left: 0;
+      padding-left: 0px;
     }
 
     &.right-button {
+      padding-left:20px;
       right: 0;
     }
   }
@@ -108,15 +108,6 @@
     justify-content: center;
     align-items: center;
     padding-top: 10px;
-    margin-left: $buttonAreaWidth+ px;
-    margin-right: $buttonAreaWidth+ px;
-  }
-
-  .vertical-divider {
-    height: 92px;
-    width: 1px;
-    background: #34313a;
-    margin-bottom: 8px;
   }
 
 </style>
@@ -199,9 +190,6 @@ export default {
     itemsPerPage () {
       return Math.floor(this.currentWidth / (this.itemWidth + this.itemMargin));
     },
-    shouldAddVerticalLine (item) {
-      return this.items[this.itemsPerPage() - 1] === item && this.pointer !== 5;
-    },
     scrollButtonsVisible () {
       return this.items.length > this.itemsPerPage();
     },