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

Port ce22c835acd6a2909ff23b1732091d407559b20c to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/styles/mastodon/basics.scss        |  2 ++
 .../glitch/styles/mastodon/components.scss    | 19 +++++++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/app/javascript/flavours/glitch/styles/mastodon/basics.scss b/app/javascript/flavours/glitch/styles/mastodon/basics.scss
index d28150f12a..8cc06a50b3 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/basics.scss
+++ b/app/javascript/flavours/glitch/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/flavours/glitch/styles/mastodon/components.scss b/app/javascript/flavours/glitch/styles/mastodon/components.scss
index a5d558321f..b00dcf718d 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/components.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon/components.scss
@@ -7464,7 +7464,18 @@ img.modal-warning {
     // 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 {
@@ -7817,7 +7828,7 @@ img.modal-warning {
   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;
@@ -7833,6 +7844,10 @@ img.modal-warning {
 
   @include fullwidth-gallery;
 
+  @container (width > 500px) {
+    max-height: var(--max-media-height-large);
+  }
+
   video {
     display: block;
     max-width: 100vw; // TODO: might be able to delete this