From e9375ee384ee23362f10919b211d5ca9ce0845c7 Mon Sep 17 00:00:00 2001
From: Max Amundsen <max@cdrateline.com>
Date: Fri, 7 Mar 2025 14:13:25 -0500
Subject: [PATCH] Fix table formatting

---
 handlers/app/editor.go   | 13 ++++++++-----
 handlers/app/vault_hx.go | 35 +++++++++++++++++++++++------------
 ui/app_layout.go         |  2 +-
 ui/modals.go             | 11 ++++++++++-
 4 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/handlers/app/editor.go b/handlers/app/editor.go
index 4d14e56..2473ca4 100644
--- a/handlers/app/editor.go
+++ b/handlers/app/editor.go
@@ -75,7 +75,7 @@ func EditorHandler(w http.ResponseWriter, r *http.Request) {
 	AppLayout(title, *identity, session,
 		Modal(
 			"password_generator",
-			Text("Passkey Generator"),
+			nil,
 			HxLoad("/app/generator-hx"),
 			[]Node {
 				ButtonUIOutline(ModalCloser(), Text("Close")),
@@ -121,13 +121,16 @@ func EditorHandler(w http.ResponseWriter, r *http.Request) {
 				FormInput(Class("password"), Type("password"), Name("pas"), Value(secret.Password)),
 				Br(),
 
-				FormLabel(Text("Show password?"), For("show")),
-				FormCheck(Class("checkbox"), ID("show")),
+				ButtonUIOutline(Class("passtoggle"),
+					Type("button"),
+					Flex(Icon(ICON_EYE, 24), Text(" Toggle password visibility")),
+				),
+
 				InlineScript(`
-					let check = me(".checkbox", me());
+					let toggle = me(".passtoggle", me());
 					let passInput = me(".password", me());
 
-					check.on("click", () => {
+					toggle.on("click", () => {
 						if (passInput.type === "password") {
 							passInput.type = "text";
 						} else if (passInput.type === "text") {
diff --git a/handlers/app/vault_hx.go b/handlers/app/vault_hx.go
index 230013c..d3312b9 100644
--- a/handlers/app/vault_hx.go
+++ b/handlers/app/vault_hx.go
@@ -71,17 +71,24 @@ func VaultHxHandler(w http.ResponseWriter, r *http.Request) {
 		),
 		func(entry entries.Secret) Node {
 			return Tr(
-				TdLeft(Text(entry.Description)),
+				TdLeft(
+					Div(
+						InlineStyle("$me { overflow-x: auto; }"),
+						Text(entry.Description),
+					),
+				),
 				TdLeft(
 					IfElse(entry.Username != "",
-						Flex(
-							P(Text(entry.Username)),
-							Span(
-								Title("Click to copy username"),
-								InlineStyle("$me { cursor: pointer; }"),
-								Icon(ICON_COPY, 16),
-							),
-							InlineScript(`
+						Div(
+							InlineStyle("$me { overflow-x: auto; }"),
+							Flex(
+								Span(
+									Title("Click to copy username"),
+									InlineStyle("$me { cursor: pointer; }"),
+									Icon(ICON_COPY, 16),
+								),
+								P(Text(entry.Username)),
+								InlineScript(`
 								let btn = me("span", me());
 								let text = me("p", me());
 
@@ -89,6 +96,7 @@ func VaultHxHandler(w http.ResponseWriter, r *http.Request) {
 									navigator.clipboard.writeText(text.innerHTML);
 								});
 							`),
+							),
 						),
 						Text("---"),
 					),
@@ -96,14 +104,14 @@ func VaultHxHandler(w http.ResponseWriter, r *http.Request) {
 				TdLeft(
 					IfElse(entry.Password != "",
 						Flex(
-							P(Text("•••••••")),
-							Input(Type("hidden"), Value(entry.Password)),
 							Span(
 								Class("copy"),
 								Title("Click to copy password"),
 								InlineStyle("$me { cursor: pointer; }"),
 								Icon(ICON_COPY, 16),
 							),
+							P(Text("•••••••")),
+							Input(Type("hidden"), Value(entry.Password)),
 							InlineScript(`
 								let copyBtn = me(".copy", me());
 								let password = me("input", me()).value;
@@ -119,7 +127,10 @@ func VaultHxHandler(w http.ResponseWriter, r *http.Request) {
 				),
 				TdLeft(
 					IfElse(entry.URL != "",
-						PageLink(security.SanitizationPolicy.Sanitize(entry.URL), Text(entry.URL), true),
+						Div(
+							InlineStyle("$me { overflow-x: auto; }"),
+							PageLink(security.SanitizationPolicy.Sanitize(entry.URL), Text(entry.URL), true),
+						),
 						Text("---"),
 					),
 				),
diff --git a/ui/app_layout.go b/ui/app_layout.go
index 6d42067..2277b35 100644
--- a/ui/app_layout.go
+++ b/ui/app_layout.go
@@ -122,7 +122,7 @@ func AppLayout(title string, identity auth.Identity, session map[string]interfac
 											Icon(ICON_USERS, 24),
 											Group{
 												navbarDropdownItem("My Profile", "/app/account", false),
-												navbarDropdownItem("Logout", "/auth/logout", false),
+												navbarDropdownItem("Lock Vault", "/auth/logout", false),
 											},
 										),
 									),
diff --git a/ui/modals.go b/ui/modals.go
index b050c4a..56982a6 100644
--- a/ui/modals.go
+++ b/ui/modals.go
@@ -52,7 +52,16 @@ func Modal(id string, header Node, body Node, closeElements []Node) Node {
 					font-weight: var(--font-weight-bold);
 				}
 			`),
-			header,
+
+			IfElse(header == nil,
+				InlineStyle(`
+					$me {
+						flex-direction: row-reverse;
+					}
+				`),
+				header,
+			),
+
 
 			Div(
 				Class("modal-close-el"),