Improve dashboard responsive layouts (#805)

* Improve dashboard responsive layouts

* Improve proxy pools mobile layout

* Improve CLI tool card input responsiveness

---------

Co-authored-by: Delynn Assistant <zhen@dkzhen.org>

src/app/(dashboard)/dashboard/cli-tools/CLIToolsPageClient.js

@@ -191,11 +191,19 @@ export default function CLIToolsPageClient({ machineId }) {
   const mitmTools = Object.entries(MITM_TOOLS);
 
   return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-col gap-4">
+    <div className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-1 sm:px-0">
+      <div className="flex flex-col gap-1">
+        <h1 className="text-xl font-semibold text-text-main sm:text-2xl">CLI Tools</h1>
+        <p className="text-sm text-text-muted">Configure local coding tools to use your 9Router providers.</p>
+      </div>
+      <div className="grid gap-3 sm:gap-4">
         {regularTools.map(([toolId, tool]) => renderToolCard(toolId, tool))}
       </div>
-      <div className="flex flex-col gap-4">
+      <div className="grid gap-3 sm:gap-4">
+        <div className="flex items-center gap-2 px-1">
+          <span className="material-symbols-outlined text-[18px] text-primary">security</span>
+          <h2 className="text-sm font-semibold text-text-main">MITM Tools</h2>
+        </div>
         {mitmTools.map(([toolId, tool]) => (
           <MitmLinkCard key={toolId} tool={tool} />
         ))}