bar graph fix

app/users/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useRef, useCallback } from "react";
 import SideNav from "../components/SideNav";
+import HelpTooltip from "../components/HelpTooltip";
 import {
 	IconSearch,
 	IconX,
@@ -246,12 +247,14 @@ export default function UsersPage() {
 								className="flex-1 bg-transparent text-[12px] text-foreground placeholder:text-foreground-sec outline-none"
 							/>
 							{search && (
-								<button
-									onClick={() => setSearch("")}
-									className="text-foreground-sec hover:text-foreground cursor-pointer"
-								>
-									<IconX size={12} />
-								</button>
+								<HelpTooltip text="Clear the search filter.">
+									<button
+										onClick={() => setSearch("")}
+										className="text-foreground-sec hover:text-foreground cursor-pointer"
+									>
+										<IconX size={12} />
+									</button>
+								</HelpTooltip>
 							)}
 						</div>
 					</div>
@@ -390,6 +393,7 @@ export default function UsersPage() {
 														</span>
 													)}
 												</div>
+												<HelpTooltip text="Remove this YubiKey credential. The user will no longer be able to log in with it.">
 												<button
 													onClick={() => deleteCredential(cred.id)}
 													disabled={deletingId === cred.id}
@@ -402,6 +406,7 @@ export default function UsersPage() {
 														<IconTrash size={13} />
 													)}
 												</button>
+												</HelpTooltip>
 											</div>
 										))}
 									</div>
@@ -420,12 +425,14 @@ export default function UsersPage() {
 								{enrollStatus === "done" ? (
 									<div className="flex items-center gap-[8px] px-[12px] py-[10px] rounded-xl bg-green/10 text-green text-[12px] font-semibold">
 										{enrollMessage}
-										<button
-											onClick={() => setEnrollStatus("idle")}
-											className="ml-auto text-green/60 hover:text-green cursor-pointer"
-										>
-											<IconX size={13} />
-										</button>
+										<HelpTooltip text="Dismiss this success message.">
+											<button
+												onClick={() => setEnrollStatus("idle")}
+												className="ml-auto text-green/60 hover:text-green cursor-pointer"
+											>
+												<IconX size={13} />
+											</button>
+										</HelpTooltip>
 									</div>
 								) : (
 									<form onSubmit={enrollKey} className="flex flex-col gap-[10px]">
@@ -454,6 +461,7 @@ export default function UsersPage() {
 											<p className="text-[12px] text-red-400">{enrollMessage}</p>
 										)}
 
+										<HelpTooltip text="Start the YubiKey enrollment flow — you'll be prompted to touch the key to register it.">
 										<button
 											type="submit"
 											disabled={enrollBusy}
@@ -473,6 +481,7 @@ export default function UsersPage() {
 												? "Touch YubiKey…"
 												: "Saving…"}
 										</button>
+										</HelpTooltip>
 									</form>
 								)}
 							</div>