bar graph fix

app/components/DevConsole.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
 import { LuX, LuTerminal, LuSend } from "react-icons/lu";
+import HelpTooltip from "./HelpTooltip";
 
 export interface LogEntry {
 	id: number;
@@ -175,8 +176,8 @@ export default function DevConsole({
 
 				<div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: "4px" }}>
 					{(["logs", "request"] as const).map((tab) => (
+						<HelpTooltip key={tab} text={tab === "logs" ? "View captured API request logs." : "Build and send a custom API request."}>
 						<button
-							key={tab}
 							onClick={() => setActiveTab(tab)}
 							style={{
 								fontSize: "0.68rem",
@@ -192,22 +193,25 @@ export default function DevConsole({
 						>
 							{tab === "logs" ? `Logs${logs.length > 0 ? ` (${logs.length})` : ""}` : "Request"}
 						</button>
+						</HelpTooltip>
 					))}
-					<button
-						onClick={onClose}
-						style={{
-							marginLeft: "4px",
-							background: "transparent",
-							border: "none",
-							cursor: "pointer",
-							color: "var(--color-foreground-sec)",
-							display: "flex",
-							alignItems: "center",
-							padding: "2px",
-						}}
-					>
-						<LuX size={13} />
-					</button>
+					<HelpTooltip text="Close the dev console.">
+						<button
+							onClick={onClose}
+							style={{
+								marginLeft: "4px",
+								background: "transparent",
+								border: "none",
+								cursor: "pointer",
+								color: "var(--color-foreground-sec)",
+								display: "flex",
+								alignItems: "center",
+								padding: "2px",
+							}}
+						>
+							<LuX size={13} />
+						</button>
+					</HelpTooltip>
 				</div>
 			</div>
 
@@ -273,28 +277,30 @@ export default function DevConsole({
 									minWidth: 0,
 								}}
 							/>
-							<button
-								onClick={sendRequest}
-								disabled={reqLoading}
-								style={{
-									background: "#428ce2",
-									border: "none",
-									borderRadius: "8px",
-									color: "white",
-									padding: "5px 11px",
-									cursor: reqLoading ? "default" : "pointer",
-									display: "flex",
-									alignItems: "center",
-									gap: "4px",
-									fontSize: "0.68rem",
-									fontWeight: 500,
-									opacity: reqLoading ? 0.6 : 1,
-									flexShrink: 0,
-								}}
-							>
-								<LuSend size={11} />
-								Send
-							</button>
+							<HelpTooltip text="Send the HTTP request to the API and display the response below.">
+								<button
+									onClick={sendRequest}
+									disabled={reqLoading}
+									style={{
+										background: "#428ce2",
+										border: "none",
+										borderRadius: "8px",
+										color: "white",
+										padding: "5px 11px",
+										cursor: reqLoading ? "default" : "pointer",
+										display: "flex",
+										alignItems: "center",
+										gap: "4px",
+										fontSize: "0.68rem",
+										fontWeight: 500,
+										opacity: reqLoading ? 0.6 : 1,
+										flexShrink: 0,
+									}}
+								>
+									<LuSend size={11} />
+									Send
+								</button>
+							</HelpTooltip>
 						</div>
 
 						{["POST", "PUT", "PATCH"].includes(reqMethod) && (