From de1ffbe4a3a0ac43c793b32a8c9cc39a93f0f3a3 Mon Sep 17 00:00:00 2001
From: David Wheatley <david@davwheat.dev>
Date: Sun, 31 Mar 2024 00:39:02 +0000
Subject: [PATCH] chore: use dvh where supported

---
 .../UkCoverageMapCustomSplitScreen.tsx        | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/Maps/UkCoverageMap/SplitScreen/UkCoverageMapCustomSplitScreen.tsx b/src/components/Maps/UkCoverageMap/SplitScreen/UkCoverageMapCustomSplitScreen.tsx
index 91afa0b..e799fb0 100644
--- a/src/components/Maps/UkCoverageMap/SplitScreen/UkCoverageMapCustomSplitScreen.tsx
+++ b/src/components/Maps/UkCoverageMap/SplitScreen/UkCoverageMapCustomSplitScreen.tsx
@@ -81,9 +81,11 @@ const useStyles = makeStyles({
 
     '& > *': {
       height: '45vh !important',
+      ' height': '45dvh !important',
 
       '.fullscreen-enabled &': {
         height: '50vh !important',
+        ' height': '50dvh !important',
       },
 
       '&:nth-child(1)': {
@@ -121,6 +123,7 @@ const useStyles = makeStyles({
 
       '.fullscreen-enabled & > *': {
         height: '100vh !important',
+        ' height': '100dvh !important',
       },
     },
     '&[data-map-count="2"]': {
@@ -129,6 +132,7 @@ const useStyles = makeStyles({
 
       '.fullscreen-enabled & > *': {
         height: '100vh !important',
+        ' height': '100dvh !important',
       },
     },
     '&[data-map-count="3"]': {
@@ -137,10 +141,12 @@ const useStyles = makeStyles({
 
       '.fullscreen-enabled & > *': {
         height: '33.33333vh !important',
+        ' height': 'calc(100dvh / 3) !important',
       },
 
       '& > *': {
         height: '28vh !important',
+        ' height': '28dvh !important',
 
         '& $mapProviderIcon': {
           top: '50% !important',
@@ -161,6 +167,7 @@ const useStyles = makeStyles({
 
         '.fullscreen-enabled & > *': {
           height: '100vh !important',
+          ' height': '100dvh !important',
         },
       },
     },
@@ -204,6 +211,18 @@ export default function CoverageMapCustomSplitScreen({ availableProviders }: ICo
 
   return (
     <>
+      <Section>
+        <p className="text-speak">
+          With the split-screen coverage view, you can easily compare how different networks might perform across the UK. You can combine up to
+          four different maps, and select a different network, technology or date for each one. This might be useful if you want to see how
+          coverage has changed over time, or the difference between coverage on different networks.
+        </p>
+        <p className="text-speak">
+          If you are using a mobile device and wish to use the fullscreen option, it's recommended that you turn your phone landscape, otherwise
+          each map may actually show slightly different areas.
+        </p>
+      </Section>
+
       <SplitScreenSettings availableProviders={availableProviders} />
 
       <PostcodeSearch map={mainMapRef.current} />