IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kris
2023-07-31 18:36:33 -04:00
committed by GitHub
parent 03bc9b2569
commit 6bf0c0a52e
1 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
app/assets/stylesheets/common/components/d-lightbox.scss
View File

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