Leatherface/mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2025-12-15 16:59:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Glitch] Increase maximum height of media items on desktop

Browse Source 
Port ce22c835ac to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2025-12-05 14:39:48 +01:00
committed by Claire
parent 71cda79e3b
commit 7f1862b67e
2 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/flavours/glitch/styles/mastodon/basics.scss
View File

@@ -10,6 +10,8 @@ html {
--outline-focus-default: 2px solid var(--color-text-brand); --outline-focus-default: 2px solid var(--color-text-brand);
--avatar-border-radius: 8px; --avatar-border-radius: 8px;
--max-media-height-small: 460px;
--max-media-height-large: 566px;
// Variable for easily inverting directional UI elements, // Variable for easily inverting directional UI elements,
--text-x-direction: 1; --text-x-direction: 1;

19
app/javascript/flavours/glitch/styles/mastodon/components.scss
View File

@@ -7464,7 +7464,18 @@ img.modal-warning {
// The size of single images is determined by their // The size of single images is determined by their
// aspect-ratio, applied via inline style attribute // aspect-ratio, applied via inline style attribute
width: initial; width: initial;
max-height: 460px;
// Prevent extremely tall images from essentially becoming invisible
min-width: 120px;
max-height: var(--max-media-height-small);
@container (width > 500px) {
max-height: var(--max-media-height-large);
}
.detailed-status & {
max-height: calc(2 * var(--max-media-height-large));
}
} }
&--layout-2 { &--layout-2 {
@@ -7817,7 +7828,7 @@ img.modal-warning {
position: relative; position: relative;
color: var(--color-text-on-media); color: var(--color-text-on-media);
background: var(--color-bg-media); background: var(--color-bg-media);
max-height: 460px; max-height: var(--max-media-height-small);
border-radius: 8px; border-radius: 8px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@@ -7833,6 +7844,10 @@ img.modal-warning {
@include fullwidth-gallery; @include fullwidth-gallery;
@container (width > 500px) {
max-height: var(--max-media-height-large);
}
video { video {
display: block; display: block;
max-width: 100vw; // TODO: might be able to delete this max-width: 100vw; // TODO: might be able to delete this