From 9cb4c2a3081812e5e5eae019c41fd59501ff62c8 Mon Sep 17 00:00:00 2001
From: Chris Duncan <chris@zoso.dev>
Date: Wed, 23 Oct 2024 14:56:04 -0700
Subject: [PATCH] CSS fixes.

---
 app/pages/nemo-wallet.html | 84 ++++++++++++++++++++++++--------------
 1 file changed, 54 insertions(+), 30 deletions(-)

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index 0e702c2..179aef5 100644
--- a/app/pages/nemo-wallet.html
+++ b/app/pages/nemo-wallet.html
@@ -384,58 +384,82 @@
 		.flex {
 			display: flex;
 		}
-		.flex.h-top {
-			align-items: flex-start;
+		.flex.x-top,
+		.flex.x-mid,
+		.flex.x-bottom,
+		.flex.x-stretch,
+		.flex.x-left,
+		.flex.x-center,
+		.flex.x-right,
+		.flex.x-full {
 			flex-direction: row;
 			justify-content: center;
 		}
-		.flex.h-mid {
+		.flex.x-top {
+			align-items: flex-start;
+		}
+		.flex.x-mid {
 			align-items: center;
-			flex-direction: row;
-			justify-content: center;
 		}
-		.flex.h-bottom {
+		.flex.x-bottom {
 			align-items: flex-end;
-			flex-direction: row;
-			justify-content: center;
 		}
-		.flex.h-stretch {
+		.flex.x-stretch {
 			align-items: stretch;
-			flex-direction: row;
-			justify-content: center;
 		}
-		.flex.h-left {
+		.flex.x-stretch > * {
+			height: 100%;
+		}
+		.flex.x-left {
 			justify-content: flex-start;
 		}
-		.flex.h-center {
+		.flex.x-center {
 			justify-content: center;
 		}
-		.flex.h-right {
+		.flex.x-right {
 			justify-content: flex-end;
 		}
-		.flex.h-full {
+		.flex.x-full {
 			width: 100%;
 		}
-		.flex.v-left {
-			align-items: flex-start;
+		.flex.y-left,
+		.flex.y-center,
+		.flex.y-right,
+		.flex.y-stretch,
+		.flex.y-top,
+		.flex.y-mid,
+		.flex.y-bottom,
+		.flex.full {
 			flex-direction: column;
 			justify-content: center;
 		}
-		.flex.v-center {
+		.flex.y-left {
+			align-items: flex-start;
+		}
+		.flex.y-center {
 			align-items: center;
-			flex-direction: column;
-			justify-content: center;
 		}
-		.flex.v-right {
+		.flex.y-right {
 			align-items: flex-end;
-			flex-direction: column;
-			justify-content: center;
 		}
-		.flex.v-stretch {
+		.flex.y-stretch {
 			align-items: stretch;
-			flex-direction: column;
+		}
+		.flex.y-stretch * {
+			width: 100%;
+		}
+		.flex.y-top {
+			justify-content: flex-start;
+		}
+		.flex.y-mid {
 			justify-content: center;
 		}
+		.flex.y-bottom {
+			justify-content: flex-end;
+		}
+		.flex.y-full {
+			height: 100%;
+		}
 		.grid-x {
 			display: grid;
 			grid-template-columns: repeat(12, 1fr);
@@ -598,12 +622,12 @@
 		<!-- New Wallet Form -->
 
 		<dialog id="wallet-new">
-			<div class="flex v-stretch">
-				<div id="wallet-new-name" class="flex h-left h-mid">
+			<div class="flex y-stretch">
+				<div id="wallet-new-name" class="flex x-left x-mid">
 					<label for="wallet-new-name-input">Name</label>
 					<input id="wallet-new-name-input" name="wallet-new-name" autocomplete="off" minlength="1" maxlength="80" pattern="[^_].*" placeholder="My Wallet" required />
 				</div>
-				<div id="wallet-new-algorithm" class="flex h-left h-mid h-full">
+				<div id="wallet-new-algorithm" class="flex x-left x-mid">
 					<label for="wallet-new-algorithm-select">Algorithm</label>
 					<select id="wallet-new-algorithm-select" name="wallet-new-algorithm" autocomplete="off" onchange="updateWalletForm('#wallet-new')" required>
 						<option disabled selected value>Choose...</option>
@@ -611,11 +635,11 @@
 						<option value="blake2b">BLAKE2b</option>
 					</select>
 				</div>
-				<div id="wallet-new-salt" class="flex h-left h-mid h-full hide">
+				<div id="wallet-new-salt" class="flex x-left x-mid hide">
 					<label for="wallet-new-salt-input">Salt</label>
 					<input id="wallet-new-salt-input" name="wallet-new-salt" type="password" autocomplete="off" placeholder="Optional" />
 				</div>
-				<div id="wallet-new-password" class="flex h-mid h-full">
+				<div id="wallet-new-password" class="flex x-left x-mid">
 					<label for="wallet-new-password-input">Lock</label>
 					<input id="wallet-new-password-input" name="wallet-new-password" type="password" autocomplete="off" placeholder="Password" required />
 				</div>
-- 
2.34.1