Add close button (X) to help dialog header for better mobile usability

- Added X icon import from lucide-react
- Restructured help dialog with separate header, content, and footer sections
- Added close button in header with X icon for easier access on mobile
- Updated CSS to properly style the new header/footer structure with borders
- Content section now scrolls independently while header/footer remain fixed

Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>

Author: Copilot

packages/learningmap/src/LearningMapEditor.tsx

@@ -30,7 +30,7 @@ import FloatingEdge from "./FloatingEdge";
 import { EditorToolbar } from "./EditorToolbar";
 import { parseRoadmapData } from "./helper";
 import { LearningMap } from "./LearningMap";
-import { Info, Redo, Undo, RotateCw, ShieldAlert } from "lucide-react";
+import { Info, Redo, Undo, RotateCw, ShieldAlert, X } from "lucide-react";
 import useUndoable from "./useUndoable";
 import { MultiNodePanel } from "./MultiNodePanel";
 import { getTranslations } from "./translations";
@@ -936,24 +936,33 @@ export function LearningMapEditor({
           open={helpOpen}
           onClose={() => setHelpOpen(false)}
         >
-          <h2>{t.keyboardShortcuts}</h2>
-          <table>
-            <thead>
-              <tr>
-                <th>{t.action}</th>
-                <th>{t.shortcut}</th>
-              </tr>
-            </thead>
-            <tbody>
-              {keyboardShortcuts.map((item) => (
-                <tr key={item.action}>
-                  <td>{item.action}</td>
-                  <td>{item.shortcut}</td>
+          <header className="help-header">
+            <h2>{t.keyboardShortcuts}</h2>
+            <button className="close-button" onClick={() => setHelpOpen(false)} aria-label={t.close}>
+              <X size={20} />
+            </button>
+          </header>
+          <div className="help-content">
+            <table>
+              <thead>
+                <tr>
+                  <th>{t.action}</th>
+                  <th>{t.shortcut}</th>
                 </tr>
-              ))}
-            </tbody>
-          </table>
-          <button className="primary-button" onClick={() => setHelpOpen(false)}>{t.close}</button>
+              </thead>
+              <tbody>
+                {keyboardShortcuts.map((item) => (
+                  <tr key={item.action}>
+                    <td>{item.action}</td>
+                    <td>{item.shortcut}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <div className="help-footer">
+            <button className="primary-button" onClick={() => setHelpOpen(false)}>{t.close}</button>
+          </div>
         </dialog>
         <ShareDialog
           open={shareDialogOpen}

packages/learningmap/src/index.css

@@ -628,16 +628,40 @@ dialog.help[open] {
   border: none;
   border-radius: 12px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-  padding: 24px;
+  padding: 0;
   background: white;
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
-  gap: 16px;
   display: flex;
   flex-direction: column;
   z-index: 1000;
-  overflow-y: auto;
+  overflow: hidden;
+
+  .help-header {
+    padding: 24px 24px 16px 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #e5e7eb;
+
+    h2 {
+      margin: 0;
+      font-size: 24px;
+      font-weight: 700;
+    }
+  }
+
+  .help-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px 24px;
+  }
+
+  .help-footer {
+    padding: 16px 24px 24px 24px;
+    border-top: 1px solid #e5e7eb;
+  }
 
   table {
     width: 100%;