Long image title overflow issue in new lightbox

I’m not sure if this has been asked before - the new lightbox can’t handle very long image titles. This prevents the user from clicking the top right button

4 Likes

Hello :wave:

The new lightbox is still experimental but I made some UX align adjustment on it.

It contains a fix for carousel image dimensions and title.

.d-lightbox {
   &__carousel-item { 
     object-fit: cover;
   } 
   .d-lightbox__main-title { 
     margin-left: 0.5rem; 
     max-width: 100%; 
   } 
   &.has-expanded-title { 
     .d-lightbox { 
       &__content { 
         gap: 2em 0; 
       } 
       &__main-title { 
         max-height: 100px; 
         overflow-y: auto; 
         overflow-wrap: break-word; 
         word-wrap: break-word; 
         word-break: break-all; 
         word-break: break-word; 
         -webkit-hyphens: auto; 
         hyphens: auto;
       } 
     } 
   } 
   &:not(.has-expanded-title) { 
     .d-lightbox { 
       &__main-title { 
         @include line-clamp(1); 
       } 
     } 
   } 
 }
4 Likes