From: Chris Duncan <chris@zoso.dev>
Date: Sun, 27 Oct 2024 06:36:13 +0000 (-0700)
Subject: Fix styling for new body flex layout.
X-Git-Url: https://zoso.dev/?a=commitdiff_plain;h=4b089c94b032afdc8fe4fd56eaec125b7708c3fa;p=nemo-wallet.git

Fix styling for new body flex layout.
---

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index e4e0e3d..ddd7036 100644
--- a/app/pages/nemo-wallet.html
+++ b/app/pages/nemo-wallet.html
@@ -457,30 +457,42 @@
 			--text-body: 'serif';
 			--text-heading: 'sans-serif';
 		}
+		* {
+			border: 0;
+			box-sizing: border-box;
+			margin: 0;
+		}
 		body {
+			align-items: flex-start;
 			background-color: var(--color-dark);
 			color: var(--color-light);
 			display: flex;
 			fill: var(--color-blue);
+			flex-direction: column;
 			font-family: var(--text-body);
-			font-size: 16px !important;  /* prevents input focus zoom on mobile */
+			font-size: calc(16px + (16px * 1vh)) !important;  /* prevents input focus zoom on mobile */
 			height: 100vh !important;
-			margin: 0 !important;
+			justify-content: stretch;
 			min-height: 100vh !important;
+			min-width: 100vw !important;
 			max-height: 100vh !important;
+			max-width: 100vw !important;
+			width: 100vw !important
 		}
 		header {
+			flex: 0 1 auto;
 			padding: 0.5rem;
+			width: 100%;
 		}
 		main {
-			height: 100%;
+			flex: 1 0 auto;
+			width: 100%;
 		}
 		nav {
 			align-items: flex-end;
-			bottom: 0;
 			display: flex;
+			flex: 0 1 auto;
 			justify-content: space-evenly;
-			position: absolute;
 			width: 100%;
 		}
 		h1, h2, h3, h4, h5, h6 {
@@ -675,7 +687,7 @@
 		input[type='text'],
 		select,
 		select:focus {
-			font-size: 16px;  /* required to prevent zoom on input focus on mobile */
+			font-size: calc(16px + (16px * 1vh)) !important;  /* prevents input focus zoom on mobile */
 		}
 		label:has(+ :required)::after {
 			color: red;