diff --git a/templates/partials/active_modal.tmpl b/templates/partials/active_modal.tmpl
index fe34a46..512decc 100644
--- a/templates/partials/active_modal.tmpl
+++ b/templates/partials/active_modal.tmpl
@@ -3,7 +3,9 @@
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title">{{ .Filename }}</h5>
+        <div class="modal-title" id="modal-title" title="{{ .Filename }}">
+          {{ .Filename }}
+        </div>
       </div>
       <div class="modal-body">
       {{if eq .FileType "image"}}
@@ -15,7 +17,7 @@
       <div class="modal-footer">
         <a href="/files/{{ .Filename }}" download>
           <button class="btn btn-success">
-            Download {{ .Filename }}
+            Download
           </button>
         </a>
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
diff --git a/templates/partials/js.tmpl b/templates/partials/js.tmpl
index 227966f..9c134e2 100644
--- a/templates/partials/js.tmpl
+++ b/templates/partials/js.tmpl
@@ -29,12 +29,17 @@
     }
   </script>
   <script>
-    htmx.on('htmx:load', function(evt) { updateName(); });
-    htmx.on(window, 'resize', function(evt) { updateName(); });
+    htmx.on('htmx:load', function(evt) { updateName('filename'); });
+    htmx.on(window, 'resize', function(evt) { updateName('filename'); });
+
+    const modal = document.getElementById('modals-here')
+    modal.addEventListener('shown.bs.modal', () => {
+      updateName('modal-title') 
+    })
 
     // Shorten the filename if it's too long to fit in the space available
-    function updateName() {
-      let filenameObj = document.getElementById('filename');
+    function updateName(id) {
+      let filenameObj = document.getElementById(id);
       if (!filenameObj) return; // Not on the download page
 
       let filename = filenameObj.title;