From 6abeddb914c8e3312523dc9de039757670072241 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 18 Dec 2024 16:01:01 +0100
Subject: [PATCH] Fix PhysicalSample vertical scrolling

---
 src/assets/css/src/2.blocks.dialog.css      |  6 +++---
 src/assets/css/src/3.utilities.overflow.css |  4 +++-
 src/components/project/PhysicalSample.vue   | 10 ++++++----
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/assets/css/src/2.blocks.dialog.css b/src/assets/css/src/2.blocks.dialog.css
index 5408374..a9d6834 100644
--- a/src/assets/css/src/2.blocks.dialog.css
+++ b/src/assets/css/src/2.blocks.dialog.css
@@ -108,7 +108,7 @@
 .dialog#physical-sample {
   --dialog-header-h: 15rem;
   --dialog-background: var(--color-grey-50);
-  padding: var(--space-32);
+  padding: var(--space-32) var(--space-32) 0;
   overflow-y: auto;
 }
 .dialog#physical-sample [data-pc-section="header"] {
@@ -129,8 +129,8 @@
   top: var(--space-40);
   right: var(--space-40);
 }
-.dialog#physical-sample [data-pc-name="content"] {
-  height: auto;
+.dialog#physical-sample .overflow-y {
+  border-radius: var(--rounded-xl) var(--rounded-xl) 0 0;
 }
 @media (min-width: 90rem) {
   .dialog#physical-sample .masonry {
diff --git a/src/assets/css/src/3.utilities.overflow.css b/src/assets/css/src/3.utilities.overflow.css
index 4d2480f..b336881 100644
--- a/src/assets/css/src/3.utilities.overflow.css
+++ b/src/assets/css/src/3.utilities.overflow.css
@@ -3,7 +3,9 @@
 .overflow-hidden {
   overflow: hidden;
 }
-
+.overflow-y {
+  overflow-y: auto;
+}
 .overflow-y-hidden {
   overflow-y: hidden !important;
 }
diff --git a/src/components/project/PhysicalSample.vue b/src/components/project/PhysicalSample.vue
index 8c5a79d..70349c0 100644
--- a/src/components/project/PhysicalSample.vue
+++ b/src/components/project/PhysicalSample.vue
@@ -14,10 +14,12 @@
  	 		<time class="font-medium text-sm py-8" :datetime="physicalSample.date">{{ physicalSample.date }}</time>
       <p>{{ physicalSample.description }}</p>
  	 	</template>
-    <div class="masonry flow mt-32">
-      <template v-for="(item, index) in physicalSample.files" :key="item.id">
-        <img class="rounded-xl" :src="item.url" :alt="item.alt" :data-id="item.id" />
-      </template>
+    <div class="overflow-y h-full pb-32">
+      <div class="masonry flow pt-32">
+        <template v-for="(item, index) in physicalSample.files" :key="item.id">
+          <img class="rounded-xl" :src="item.url" :alt="item.alt" :data-id="item.id" />
+        </template>
+      </div>
     </div>
   </Dialog>
 </template>