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

Increase maximum height of media items on desktop (#37136)

Browse Source
This commit is contained in:
diondiondion
2025-12-05 14:39:48 +01:00
committed by GitHub
parent 9b851616fe
commit ce22c835ac
2 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -7165,7 +7165,18 @@ a.status-card {
// The size of single images is determined by their
// aspect-ratio, applied via inline style attribute
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 {
@@ -7500,7 +7511,7 @@ a.status-card {
position: relative;
color: var(--color-text-on-media);
background: var(--color-bg-media);
max-height: 460px;
max-height: var(--max-media-height-small);
border-radius: 8px;
box-sizing: border-box;
display: flex;
@@ -7508,6 +7519,10 @@ a.status-card {
outline-offset: -1px;
z-index: 2;
@container (width > 500px) {
max-height: var(--max-media-height-large);
}
video {
display: block;
z-index: -2;