From ce22c835acd6a2909ff23b1732091d407559b20c Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Fri, 5 Dec 2025 14:39:48 +0100
Subject: [PATCH] Increase maximum height of media items on desktop (#37136)

---
 app/javascript/styles/mastodon/basics.scss    |  2 ++
 .../styles/mastodon/components.scss           | 19 +++++++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index d28150f12a..8cc06a50b3 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -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;
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index ed2403b045..5344b1826a 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -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;