From c1a294f0ee1ace2a6f7db1fd410862a4951f2d35 Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Thu, 25 Jan 2024 14:12:30 +0545
Subject: [PATCH] Adjust `Live Monitoring` view to fit screen view

- Related to #6219
---
 frontend/src/views/projectLiveMonitoring.css | 4 ++--
 frontend/src/views/projectLiveMonitoring.js  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/projectLiveMonitoring.css b/frontend/src/views/projectLiveMonitoring.css
index 1767519aab..96a48c9add 100644
--- a/frontend/src/views/projectLiveMonitoring.css
+++ b/frontend/src/views/projectLiveMonitoring.css
@@ -1,7 +1,7 @@
-@import "@hotosm/underpass-ui/dist/index.css";
+@import '@hotosm/underpass-ui/dist/index.css';
 
 .maplibregl-map {
-  height: 100vh;
+  height: calc(100vh - 6.05rem);
 }
 
 .top {
diff --git a/frontend/src/views/projectLiveMonitoring.js b/frontend/src/views/projectLiveMonitoring.js
index a111c299c5..d76a91d4fb 100644
--- a/frontend/src/views/projectLiveMonitoring.js
+++ b/frontend/src/views/projectLiveMonitoring.js
@@ -226,7 +226,7 @@ export function ProjectLiveMonitoring() {
       ready={!error && !loading}
       className="pr3"
     >
-      <div>
+      <div className="cf w-100" style={{ height: 'calc(100vh - 5.5rem)' }}>
         <div className="flex p-2">
           <div style={{ flex: 2 }}>
             <div className="top">
@@ -365,7 +365,7 @@ export function ProjectLiveMonitoring() {
               style={{
                 display: 'flex',
                 flexFlow: 'column',
-                height: '100px',
+                maxHeight: 'calc(100vh - 26rem)',
                 flex: '1 1 auto',
               }}
               tags={tags}