From fcaa77ffba806d033a532aa092fcb042f7a9b4ab Mon Sep 17 00:00:00 2001
From: Sourabh Patel <getmeapencil@gmail.com>
Date: Wed, 8 Jan 2025 22:11:41 +0530
Subject: [PATCH] lightbox: Update styles with flexbox to avoid height
 calculation.

Using flex-grow ensures that component fills up the available
space without the need of calculation of height.
---
 web/styles/lightbox.css | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/styles/lightbox.css b/web/styles/lightbox.css
index 446a43b3ca..cf15e6744a 100644
--- a/web/styles/lightbox.css
+++ b/web/styles/lightbox.css
@@ -1,13 +1,16 @@
 #lightbox_overlay {
     background-color: hsl(227deg 40% 16%);
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
 
     .image-preview {
+        flex: 1;
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
         width: 100%;
-        height: calc(100% - 65px - 95px);
         margin: 0;
         overflow: hidden;
 
@@ -32,9 +35,9 @@
     }
 
     .video-player {
+        flex: 1;
         display: flex;
         width: 100%;
-        height: calc(100% - 65px - 95px);
         align-items: center;
         justify-content: center;
         margin: 0;
@@ -151,7 +154,7 @@
     }
 
     .player-container {
-        height: calc(100% - 65px - 95px);
+        flex: 1;
         display: flex;
         text-align: center;
         justify-content: center;