fix: image filename overflow (closes #92)

Justintime50 · Jul 16, 2024 · ae67d89 · ae67d89
1 parent 86cf46f
commit ae67d89
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## Next Release
+
+- Fixes a bug where image filenames could overflow their containers if long
+
 ## v3.0.0 (2024-06-10)
 
 - Upgrades Laravel from v10 to v11

diff --git a/src/resources/sass/_custom.scss b/src/resources/sass/_custom.scss
@@ -92,6 +92,12 @@
   flex-direction: column;
 }
 
+.image-filename {
+  width: 100%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
 .auto-margin-top {
   margin-top: auto;
 }

diff --git a/src/resources/views/partials/image-gallery.blade.php b/src/resources/views/partials/image-gallery.blade.php
@@ -7,7 +7,7 @@
                         class="img-thumbnail image-preview">
                 </div>
                 <div class="auto-margin-top">
-                    <p>{{ $image->filename }}</p>
+                    <p class="image-filename">{{ $image->filename }}</p>
                     @if (str_contains(Request::url(), 'images'))
                         <form action="/images/{{ $image->id }}" method="POST">
                             @csrf