UX: fix long image titles in experimental lightbox (#22883)

app/assets/stylesheets/common/components/d-lightbox.scss

@@ -231,7 +231,7 @@ html.has-lightbox {
     position: fixed;
     top: 0;
     left: 0;
-    height: 100%;
+    height: 100dvh;
     width: 100%;
     z-index: z("max");
   }
@@ -315,6 +315,7 @@ html.has-lightbox {
   &__footer {
     z-index: 1;
     padding: 0.25em 1px;
+    min-width: 0;
     box-sizing: border-box;
     color: var(--d-lightbox-primary);
     background: linear-gradient(
@@ -322,32 +323,37 @@ html.has-lightbox {
       var(--d-lightbox-secondary),
       transparent
     );
-
     position: relative;
+  }
 
   &__main-title {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0 0.25em;
     word-break: break-word;
     max-width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
     // right/left padding to align with buttons
     padding: 0 0.65em;
     border: 1px solid transparent;
-
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
     &:focus-visible {
       outline: none;
       border: 1px solid var(--tertiary);
       border-radius: 1px;
     }
   }
+
+  &__item-title {
+    display: block;
+    @include ellipsis;
   }
 
   &__item-file-details {
     font-size: var(--font-down-2);
-    opacity: 0.5;
-    padding: 0.25em 0;
+    color: var(--primary-600);
     white-space: nowrap;
   }
 }