Fixing the extra padding issue with content tiles.

tokenshift · Dec 21, 2023 · 61fee20 · 61fee20
1 parent e838bb9
commit 61fee20
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git 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
@@ -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 * {