Fix styling for new body flex layout.

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index e4e0e3da8d9bdd37648f6ae8571671e060097f4b..ddd70363ea1dfe716f01d1ce22bd26effc86ef08 100644 (file)
--- 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;