From d721286ea3a28e1c0795208c00d5140c78624ce6 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Mon, 25 Jan 2021 02:27:35 +0000
Subject: [PATCH] Use px for media queries to work around iOS bugs

---
 src/components/ChatBox.vue              |  4 ++--
 src/components/Sidebar.vue              | 12 ++++++------
 src/components/chat/ChatMessage.vue     |  2 +-
 src/components/sidebar/FollowTarget.vue |  2 +-
 src/scss/leaflet/_controls.scss         | 12 ++++++------
 src/scss/style.scss                     |  2 +-
 6 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/ChatBox.vue b/src/components/ChatBox.vue
index afd2236..8f1ab0e 100644
--- a/src/components/ChatBox.vue
+++ b/src/components/ChatBox.vue
@@ -190,13 +190,13 @@
 			border-bottom-right-radius: $global-border-radius;
 		}
 
-		@media (max-width: 25rem), (max-height: 30rem) {
+		@media (max-width: 400px), (max-height: 480px) {
 			bottom: 6.5rem;
 			left: 6.5rem;
 			max-width: calc(100% - 7rem);
 		}
 
-		@media (max-width: 20rem) {
+		@media (max-width: 320px) {
 			.chat__messages .message + .message {
 				margin-bottom: 0.7rem;
 			}
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index dd6163b..64ae15b 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -124,7 +124,7 @@ export default defineComponent({
 			}
 		}
 
-		@media (max-width: 30rem) {
+		@media (max-width: 480px) {
 			flex-direction: column;
 			align-items: flex-end;
 			margin: 0;
@@ -138,7 +138,7 @@ export default defineComponent({
 			}
 		}
 
-		@media (max-width: 25rem) {
+		@media (max-width: 400px) {
 			right: 0.5rem;
 			top: 0.5rem;
 		}
@@ -176,21 +176,21 @@ export default defineComponent({
 		}
 	}
 
-	@media (max-width: 30rem) {
+	@media (max-width: 480px) {
 		padding-right: 7rem;
 	}
 
-	@media (max-width: 25rem), (max-height: 30rem) {
+	@media (max-width: 400px), (max-height: 480px) {
 		padding-top: 0.5rem;
 		padding-bottom: 0.5rem;
 		padding-left: 0.5rem;
 	}
 
-	@media (max-width: 25rem) {
+	@media (max-width: 400px) {
 		padding-right: 6.5rem;
 	}
 
-	@media (max-width: 20rem) {
+	@media (max-width: 320px) {
 		box-sizing: border-box;
 		width: 100%;
 	}
diff --git a/src/components/chat/ChatMessage.vue b/src/components/chat/ChatMessage.vue
index 66b7eeb..94cf01b 100644
--- a/src/components/chat/ChatMessage.vue
+++ b/src/components/chat/ChatMessage.vue
@@ -106,7 +106,7 @@
 			font-style: italic;
 		}
 
-		@media (max-width: 20rem) {
+		@media (max-width: 320px) {
 			&.message--chat {
 				.message__sender:after {
 					content: none;
diff --git a/src/components/sidebar/FollowTarget.vue b/src/components/sidebar/FollowTarget.vue
index 2dcec1d..f5be684 100644
--- a/src/components/sidebar/FollowTarget.vue
+++ b/src/components/sidebar/FollowTarget.vue
@@ -118,7 +118,7 @@ export default defineComponent({
 			}
 		}
 
-		@media (max-width: 30rem), (max-height: 30rem) {
+		@media (max-width: 480px), (max-height: 480px) {
 			margin-top: 0;
 		}
 	}
diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss
index 4545334..db3d423 100644
--- a/src/scss/leaflet/_controls.scss
+++ b/src/scss/leaflet/_controls.scss
@@ -125,13 +125,13 @@
 		}
 	}
 
-	@media (max-width: 37.5rem) {
+	@media (max-width: 600px) {
 		.region {
 			display: none;
 		}
 	}
 
-	@media (max-width: 24rem) {
+	@media (max-width: 384px) {
 		.chunk {
 			display: none;
 		}
@@ -186,7 +186,7 @@
 		margin: 0;
 	}
 
-	@media (max-width: 25rem), (max-height: 30rem) {
+	@media (max-width: 400px), (max-height: 480px) {
 		padding-left: 0.5rem;
 	}
 }
@@ -236,7 +236,7 @@
 	.leaflet-control-zoom {
 		flex-shrink: 0;
 
-		@media (max-width: 30rem) and (pointer: coarse), (max-height: 30rem) and (pointer: coarse), (max-height: 25rem) {
+		@media (max-width: 480px) and (pointer: coarse), (max-height: 480px) and (pointer: coarse), (max-height: 400px) {
 			display: none;
 
 			& + .leaflet-control {
@@ -245,7 +245,7 @@
 		}
 	}
 
-	@media (max-width: 25rem), (max-height: 30rem) {
+	@media (max-width: 400px), (max-height: 480px) {
 		padding-top: 0.5rem;
 		bottom: 6.5rem;
 	}
@@ -259,7 +259,7 @@
 		margin-left: 1rem;
 	}
 
-	@media (max-width: 25rem), (max-height: 30rem) {
+	@media (max-width: 400px), (max-height: 480px) {
 		padding-bottom: 0.5rem;
 	}
 }
diff --git a/src/scss/style.scss b/src/scss/style.scss
index f63e785..8b00104 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -268,7 +268,7 @@ input {
 		}
 	}
 
-	@media (max-width: 30rem), (max-height: 30rem) {
+	@media (max-width: 480px), (max-height: 480px) {
 		transform: scale(calc((1/6)*5));
     	transform-origin: top center
 	}