fix: image caption being wider than image

Use `position: absolute` for `<figcaption>`, not affecting the container's width. Also rewrite `<figure>` `<figcaption>` style.

3 files changed, 48 insertions, 22 deletions

diff --git a/assets/css/components/_markdown.scss b/assets/css/components/_markdown.scss
index a95c8e34..7502d8d2 100644
--- a/assets/css/components/_markdown.scss
+++ b/assets/css/components/_markdown.scss
@@ -118,12 +118,17 @@ $em-text-color: #889E73;
   }
 
   figure {
+    display: block;
     margin: 0;
-    figcaption h4 {
-      font-size: 0.9rem;
-      color: var(--secondary-text-color);
-      font-weight: 400;
-      text-align: center;
+    figcaption {
+        max-width: 100%;
+        h4 {
+            font-size: 0.9rem;
+            color: var(--secondary-text-color);
+            font-weight: 400;
+            text-align: center;
+            white-space: normal;
+        }
     }
   }
 
diff --git a/assets/css/components/_shortcodes.scss b/assets/css/components/_shortcodes.scss
index 934417d3..5c4e893a 100644
--- a/assets/css/components/_shortcodes.scss
+++ b/assets/css/components/_shortcodes.scss
@@ -76,18 +76,39 @@
   display: flex;
   overflow-x: auto;
   scroll-behavior: smooth;
-  gap: 1rem;
+  gap: 0.5rem;
   white-space: nowrap;
 
-  & > figure {
-    display: inline-block;
+  & > figure, & > a:has(> figure) {
     margin: 0;
     flex-shrink: 0;
+    display: inline-block;
+    max-width: 100%;
+    position: relative;
+    box-shadow: inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.1);
     img {
       height: 20rem;
-      object-fit: cover;
       display: block;
       border-radius: 4px;
+      margin: 0;
+    }
+    figcaption {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        padding: 0.35rem;
+        h4 {
+            font-size: 0.8rem;
+            margin: 0;
+            text-align: left;
+            width: fit-content;
+            color: var(--text-color);
+            background-color: rgba(var(--block-background-color-rgb), 0.75);
+            backdrop-filter: blur(0.5rem);
+            padding: 0.2rem 0.35rem;
+            border-radius: 3px;
+            line-height: 1.2;
+        }
     }
   }
   & > p { display: none }
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 697c33c2..c1f2aa89 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,16 +1,16 @@
 {{- $src := .Destination -}}
 {{- $alt := .Text | default "" -}}
 {{- $caption := .Title | default "" -}}
-<figure>
-  <a href="{{ $src }}" data-fancybox data-caption="{{ $alt }}">
-    <img
-      class="lazy" loading="lazy"
-      src="{{ $src }}" alt="{{ $alt }}"
-    />
-  </a>
-  {{- if $caption }}
-  <figcaption>
-    <h4>{{ $caption | markdownify }}</h4>
-  </figcaption>
-  {{- end }}
-</figure>
+<a href="{{ $src }}" data-fancybox data-caption="{{ $caption }}">
+    <figure>
+        <img
+            class="lazy" loading="lazy"
+            src="{{ $src }}" alt="{{ $alt }}"
+        />
+        {{- if $caption }}
+        <figcaption>
+            <h4>{{ $caption | markdownify }}</h4>
+        </figcaption>
+        {{- end }}
+    </figure>
+</a>