From f496aff47832b0f67a7c574b0c18eab8d99cad4c Mon Sep 17 00:00:00 2001
From: Johannes Marbach <n0-0ne+github@mailbox.org>
Date: Mon, 22 Mar 2021 14:08:30 +0100
Subject: [PATCH] Set explicit height on lightbox container

Without an explicit height defined on the container, Safari
fails to expand the `.picture` content. On desktop this results
in the image showing too small and at the top of the screen.
On mobile the picture ends up with zero height and is completely
hidden.

This commit fixes the issue by defining a height of 100% on the
`.lightbox` border box.

Fixes: #278

Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>
---
 src/platform/web/ui/css/layout.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/platform/web/ui/css/layout.css b/src/platform/web/ui/css/layout.css
index 60c3eafa..9917ca74 100644
--- a/src/platform/web/ui/css/layout.css
+++ b/src/platform/web/ui/css/layout.css
@@ -117,6 +117,9 @@ main {
     left: 0;
     right: 0;
     z-index: 1;
+    /* Safari requires an explicit height on the container to prevent picture content from collapsing */
+    box-sizing: border-box;
+    height: 100%;
 }
 
 .TimelinePanel {