paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-02 04:53:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

lightbox: Add query to hide media-description below 100px width.

Browse Source 
Using container query ensures that the media-description element gets
hidden only when the container size is less tha 100px not screen size.
The change is visible for image preview in small screen as action
button takes much of space. Meanwhile in video-preview the description
is still visible as we have much space even in small screen.
This commit is contained in:
Sourabh Patel
2025-01-08 23:29:54 +05:30
committed by Tim Abbott
parent 194a9f762c
commit aa5f2d3346
1 changed files with 13 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/styles/lightbox.css
View File

@@ -116,6 +116,8 @@
}
.media-description {
container: media-description / inline-size;
flex: 1;
/* setting min-width to an absolute value will make
sure the text gets truncated in case of overflow */
@@ -231,4 +233,15 @@
}
}
/* hide media-description if it has width less than 100px */
@container media-description (max-width: 100px) {
.media-description {
.title {
display: none;
}
.user {
display: none;
}
}
}