Fix too long texts overflowing source information

The overflowing content will be visible on hover

sass/_utils.scss

@@ -5,6 +5,23 @@
 
 .caption {
   position: absolute;
+  width: 100%;
   opacity: 75%;
+  padding: 4px 4px 4px 4px;
   bottom: 0;
 }
+
+.caption:hover>figcaption {
+  height: 100%;
+  text-wrap: wrap;
+}
+
+.caption>figcaption {
+  display: block;
+  margin: 0 0 0 0!important;
+  padding-top: 3px;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  text-wrap: wrap;
+}

templates/blog/post.html

@@ -15,7 +15,9 @@
             {% set image = resize_image(path="@/" ~ post.colocated_path ~ "/" ~ post.extra.depiction.image, width=800, height=600) -%}
               <img src="{{ image.url }}" alt="{{ post.extra.depiction.alt }}" />
             {% if post.extra.depiction.credits %}
-              <figcaption class="tag has-text-white has-background-black  is-size-7 is-italic m-1 caption">{{ post.extra.depiction.credits }}</figcaption>
+            <div class="caption">
+              <figcaption class="tag has-text-white has-background-black  is-size-7 is-italic m-1">{{ post.extra.depiction.credits }} aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbb</figcaption>
+            </div>
             {% endif %}
           </figure>
         </div>