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 {
-      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;
-
-      &:focus-visible {
-        outline: none;
-        border: 1px solid var(--tertiary);
-        border-radius: 1px;
-      }
+  &__main-title {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0 0.25em;
+    word-break: break-word;
+    max-width: 100%;
+    // 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;
   }
 }