From 61fee20da55279327cdb8f92aab9c9dc75110d13 Mon Sep 17 00:00:00 2001
From: Nathan Clark <tokenshift@gmail.com>
Date: Wed, 20 Dec 2023 19:35:01 -0500
Subject: [PATCH] Fixing the extra padding issue with content tiles.

---
 src/views/PageGalleryTileImage.svelte |  6 ++++--
 styles.css                            | 23 +++++++++++++++--------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/views/PageGalleryTileImage.svelte b/src/views/PageGalleryTileImage.svelte
index 4b1e65d..cab1b0c 100644
--- a/src/views/PageGalleryTileImage.svelte
+++ b/src/views/PageGalleryTileImage.svelte
@@ -20,7 +20,8 @@
       data-href={page.file.path}
       href={page.file.path}
       rel="noopener">
-      {@html content?.innerHTML}
+      <div class="page-gallery__tile-image--content-sizer"></div>
+      <div class="page-gallery__tile-image--content-wrapper">{@html content?.innerHTML}</div>
     </a>
   {:else}
     {#await pageContentService.getFirstImageSrc(page)}
@@ -48,7 +49,8 @@
           data-href={page.file.path}
           href={page.file.path}
           rel="noopener">
-          {@html content?.innerHTML}
+          <div class="page-gallery__tile-image--content-sizer"></div>
+          <div class="page-gallery__tile-image--content-wrapper">{@html content?.innerHTML}</div>
         </a>
       {/if}
     {/await}
diff --git a/styles.css b/styles.css
index e1be0be..a58522e 100644
--- a/styles.css
+++ b/styles.css
@@ -139,16 +139,23 @@
   border-radius: var(--border-radius, 10px);
   box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
   display: block;
-  height: 0;
+  position: relative;
+  text-decoration: none !important;
+}
+
+.page-gallery__tile-image--content-sizer {
+  display: block;
+  padding-bottom: calc(100% * var(--aspect-ratio));
+}
+
+.page-gallery__tile-image--content-wrapper {
+  bottom: 0;
+  left: 0;
   overflow: auto;
   padding: 0.5em;
-  /*
-  TODO: This leaves a bunch of extra padding at the bottom of the scrollable
-  content tile. Can I remove that somehow? Maybe have the actual content-holding
-  div be *inside* the one with the calculated height (which won't be scrollable)?
-  */
-  padding-bottom: calc(100% * var(--aspect-ratio));
-  text-decoration: none !important;
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 
 .page-gallery__tile-image--content * {