Fix PhysicalSample vertical scrolling

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"] {
+.dialog#physical-sample .overflow-y {
-  height: auto;
+  border-radius: var(--rounded-xl) var(--rounded-xl) 0 0;
 }
 @media (min-width: 90rem) {
   .dialog#physical-sample .masonry {

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;
 }

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">
+    <div class="overflow-y h-full pb-32">
-      <template v-for="(item, index) in physicalSample.files" :key="item.id">
+      <div class="masonry flow pt-32">
-        <img class="rounded-xl" :src="item.url" :alt="item.alt" :data-id="item.id" />
+        <template v-for="(item, index) in physicalSample.files" :key="item.id">
-      </template>
+          <img class="rounded-xl" :src="item.url" :alt="item.alt" :data-id="item.id" />
+        </template>
+      </div>
     </div>
   </Dialog>
 </template>