fix: Actions in overlays on mobile hard to press (#759)

* fix: Actions in overlays on mobile hard to press Buttons on mobile devices could've been cut off, depending on the browsers chrome size which rendered them either completely off-screen or at least hard to reach. Using `dvh` (dynamic viewport height) should fix this issue for most newer browsers. * fix: provide fallback values for newer dynamic viewport units Since `dvh` and `dvw` are rather new and required an up-to-date browser providing percentage values is a bit safer --------- Co-authored-by: Felipe Martin <812088+fmartingr@users.noreply.github.com>
go-shiori · Oct 22, 2023 · 1ae82f4 · 1ae82f4
1 parent f82b97d
commit 1ae82f4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/internal/view/assets/css/style.css b/internal/view/assets/css/style.css
diff --git a/internal/view/assets/less/common.less b/internal/view/assets/less/common.less
@@ -55,7 +55,8 @@ a {
 }
 
 #login-scene {
-	height          : 100vh;
+	height          : 100%;
+	height          : 100dvh;
 	padding         : 16px;
 	overflow        : auto;
 	display         : flex;
@@ -186,7 +187,8 @@ a {
 }
 
 #main-scene {
-	min-height      : 100vh;
+	min-height      : 100%;
+	min-height      : 100dvh;
 	padding-top     : 60px;
 	padding-left    : 60px;
 	background-color: var(--bg);
@@ -195,7 +197,8 @@ a {
 		top             : 0;
 		left            : 0;
 		width           : 60px;
-		height          : 100vh;
+		height          : 100%;
+		height          : 100dvh;
 		position        : fixed;
 		display         : flex;
 		flex-flow       : column nowrap;
@@ -298,8 +301,10 @@ a {
 		position        : fixed;
 		top             : 0;
 		left            : 0;
-		width           : 100vw;
-		height          : 100vh;
+		width           : 100%;
+		width           : 100dvw;
+		height          : 100%;
+		height          : 100dvh;
 		z-index         : 10001;
 		background-color: rgba(0, 0, 0, 0.6);
 
@@ -322,7 +327,8 @@ a {
 			top       : auto;
 			right     : 0;
 			bottom    : 0;
-			width     : 100vw;
+			width     : 100%;
+			width     : 100dvw;
 			height    : 50px;
 			flex-flow : row nowrap;
 			border-top: 1px solid var(--border);
@@ -801,4 +807,4 @@ a {
 			}
 		}
 	}
-}
+}
diff --git a/internal/view/assets/less/custom-dialog.less b/internal/view/assets/less/custom-dialog.less
@@ -14,8 +14,10 @@
 	position        : fixed;
 	top             : 0;
 	left            : 0;
-	width           : 100vw;
-	height          : 100vh;
+	width           : 100%;
+	width           : 100dvw;
+	height          : 100%;
+	height          : 100dvh;
 	z-index         : 10001;
 	background-color: rgba(0, 0, 0, 0.6);
 	padding         : 32px;