From afed0dd0a1b3f4e9cbfb4e56e42bff86edd5bca2 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sat, 3 Dec 2022 16:37:26 -0900
Subject: [PATCH] fix styles on photo card

---
 frontend/pages/item/[id]/index.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/pages/item/[id]/index.vue b/frontend/pages/item/[id]/index.vue
index 256ff0c..2651444 100644
--- a/frontend/pages/item/[id]/index.vue
+++ b/frontend/pages/item/[id]/index.vue
@@ -396,9 +396,9 @@
           <DetailsSection :details="itemDetails" />
         </BaseCard>
 
-        <BaseCard>
+        <BaseCard v-if="photos && photos.length >0">
           <template #title> Photos </template>
-          <div class="container p-4 flex flex-wrap gap-2 mx-auto max-h-[500px] overflow-scroll">
+          <div class="container border-t border-gray-300 p-4 flex flex-wrap gap-2 mx-auto max-h-[500px] overflow-y-scroll scroll-bg">
             <button v-for="(img, i) in photos" :key="i" @click="openDialog(img)">
               <img class="rounded max-h-[200px]" :src="img.src" />
             </button>
@@ -465,9 +465,20 @@
   </BaseContainer>
 </template>
 
-<style>
+<style lang="css" scoped>
   /* Style dialog background */
   dialog::backdrop {
     background: rgba(0, 0, 0, 0.5);
   }
+
+.scroll-bg::-webkit-scrollbar {
+  width: 0.5rem;
+}
+
+
+.scroll-bg::-webkit-scrollbar-thumb {
+  border-radius: 0.25rem;
+  @apply bg-base-300
+}
+
 </style>