Fix table formatting

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")),
+				ButtonUIOutline(Class("passtoggle"),
-				FormCheck(Class("checkbox"), ID("show")),
+					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") {

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(
+						Div(
-							P(Text(entry.Username)),
+							InlineStyle("$me { overflow-x: auto; }"),
-							Span(
+							Flex(
-								Title("Click to copy username"),
+								Span(
-								InlineStyle("$me { cursor: pointer; }"),
+									Title("Click to copy username"),
-								Icon(ICON_COPY, 16),
+									InlineStyle("$me { cursor: pointer; }"),
-							),
+									Icon(ICON_COPY, 16),
-							InlineScript(`
+								),
+								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("---"),
 					),
 				),

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),
 											},
 										),
 									),

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"),