From d45e49c83d3a9115cb92b370bd64920f66343f96 Mon Sep 17 00:00:00 2001
From: Brad Bazemore <bankersalgo@gmail.com>
Date: Mon, 12 Jan 2026 14:54:47 -0500
Subject: [PATCH 1/7] feat: add bug report and feedback forms to help menu

Users can now report bugs or submit feedback directly from the help menu.
Forms collect title and description, then open the community forum with
pre-filled content in a new tab.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/HelpButton.tsx | 231 +++++++++++++++++++++++++++++-----
 1 file changed, 203 insertions(+), 28 deletions(-)

diff --git a/src/components/HelpButton.tsx b/src/components/HelpButton.tsx
index acb54af..0c0456b 100644
--- a/src/components/HelpButton.tsx
+++ b/src/components/HelpButton.tsx
@@ -1,9 +1,12 @@
 import { useState } from 'react';
-import { HelpCircle, Keyboard, Lightbulb, ExternalLink, Activity } from 'lucide-react';
+import { HelpCircle, Keyboard, Lightbulb, ExternalLink, Activity, Bug, ArrowLeft } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
 interface ShortcutItem {
   keys: string[];
   description: string;
@@ -49,8 +52,57 @@ const shortcutGroups: ShortcutGroup[] = [{
     description: 'Show this help dialog'
   }]
 }];
+type FormType = 'bug' | 'feedback' | null;
+
+const buildForumUrl = (type: 'bug' | 'feature', title: string, description: string) => {
+  const tag = type === 'bug' ? 'bug' : 'feature';
+  const bodyTemplate = type === 'bug'
+    ? `**Issue Description:**\n${description}\n\n**Steps to Reproduce:**\n1. \n2. \n3. \n\n**Expected Behavior:**\n\n**Actual Behavior:**\n`
+    : `**Feedback:**\n${description}\n\n**Why this would help:**\n`;
+
+  const params = new URLSearchParams({
+    category: 'feedback',
+    title: title,
+    tags: tag,
+    body: bodyTemplate
+  });
+
+  return `https://forum.openhamprep.com/new-topic?${params.toString()}`;
+};
+
 export function HelpButton() {
   const [open, setOpen] = useState(false);
+  const [activeForm, setActiveForm] = useState<FormType>(null);
+  const [bugTitle, setBugTitle] = useState('');
+  const [bugDescription, setBugDescription] = useState('');
+  const [feedbackTitle, setFeedbackTitle] = useState('');
+  const [feedbackDescription, setFeedbackDescription] = useState('');
+
+  const resetForms = () => {
+    setActiveForm(null);
+    setBugTitle('');
+    setBugDescription('');
+    setFeedbackTitle('');
+    setFeedbackDescription('');
+  };
+
+  const handleDialogChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    if (!isOpen) {
+      resetForms();
+    }
+  };
+
+  const handleSubmitBug = () => {
+    const url = buildForumUrl('bug', bugTitle, bugDescription);
+    window.open(url, '_blank', 'noopener,noreferrer');
+  };
+
+  const handleSubmitFeedback = () => {
+    const url = buildForumUrl('feature', feedbackTitle, feedbackDescription);
+    window.open(url, '_blank', 'noopener,noreferrer');
+  };
+
   return <>
       <Tooltip>
         <TooltipTrigger asChild>
@@ -63,7 +115,7 @@ export function HelpButton() {
         </TooltipContent>
       </Tooltip>
 
-      <Dialog open={open} onOpenChange={setOpen}>
+      <Dialog open={open} onOpenChange={handleDialogChange}>
         <DialogContent className="sm:max-w-lg min-h-[420px]" aria-describedby="help-description">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
@@ -108,39 +160,162 @@ export function HelpButton() {
               </TabsContent>
 
               <TabsContent value="feedback" className="mt-4 space-y-4 min-h-[280px]">
-                <p className="text-sm text-muted-foreground">
-                  Found a bug or have an idea to improve the app? Let us know on our community forum!
-                </p>
-
-                <div className="space-y-3">
-                  <a href="https://forum.openhamprep.com/c/feedback/2" target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 p-3 rounded-lg border border-border bg-card hover:bg-muted transition-colors">
-                    <div className="flex items-center justify-center h-10 w-10 rounded-full bg-primary/10 text-primary">
-                      <Lightbulb className="h-5 w-5" aria-hidden="true" />
+                {activeForm === null ? (
+                  <>
+                    <p className="text-sm text-muted-foreground">
+                      Found a bug or have an idea to improve the app? Let us know on our community forum!
+                    </p>
+
+                    <div className="space-y-3">
+                      <button
+                        type="button"
+                        onClick={() => setActiveForm('bug')}
+                        className="w-full flex items-center gap-3 p-3 rounded-lg border border-border bg-card hover:bg-muted transition-colors text-left"
+                      >
+                        <div className="flex items-center justify-center h-10 w-10 rounded-full bg-destructive/10 text-destructive">
+                          <Bug className="h-5 w-5" aria-hidden="true" />
+                        </div>
+                        <div className="flex-1">
+                          <div className="font-medium text-foreground">Report a Bug</div>
+                          <div className="text-sm text-muted-foreground">
+                            Something not working? Let us know
+                          </div>
+                        </div>
+                      </button>
+
+                      <button
+                        type="button"
+                        onClick={() => setActiveForm('feedback')}
+                        className="w-full flex items-center gap-3 p-3 rounded-lg border border-border bg-card hover:bg-muted transition-colors text-left"
+                      >
+                        <div className="flex items-center justify-center h-10 w-10 rounded-full bg-primary/10 text-primary">
+                          <Lightbulb className="h-5 w-5" aria-hidden="true" />
+                        </div>
+                        <div className="flex-1">
+                          <div className="font-medium text-foreground">Give Feedback</div>
+                          <div className="text-sm text-muted-foreground">
+                            Share ideas or suggest features
+                          </div>
+                        </div>
+                      </button>
+
+                      <a href="https://openhamprep.statuspage.io/" target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 p-3 rounded-lg border border-border bg-card hover:bg-muted transition-colors">
+                        <div className="flex items-center justify-center h-10 w-10 rounded-full bg-success/10 text-success">
+                          <Activity className="h-5 w-5" aria-hidden="true" />
+                        </div>
+                        <div className="flex-1">
+                          <div className="font-medium text-foreground">System Status</div>
+                          <div className="text-sm text-muted-foreground">
+                            Check if services are running smoothly
+                          </div>
+                        </div>
+                        <ExternalLink className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
+                        <span className="sr-only">(opens in new window)</span>
+                      </a>
                     </div>
-                    <div className="flex-1">
-                      <div className="font-medium text-foreground">Give Feedback</div>
-                      <div className="text-sm text-muted-foreground">
-                        Share ideas, report bugs, or suggest features
+                  </>
+                ) : activeForm === 'bug' ? (
+                  <div className="space-y-4">
+                    <button
+                      type="button"
+                      onClick={() => setActiveForm(null)}
+                      className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+                      Back to options
+                    </button>
+
+                    <div className="flex items-center gap-2">
+                      <div className="flex items-center justify-center h-8 w-8 rounded-full bg-destructive/10 text-destructive">
+                        <Bug className="h-4 w-4" aria-hidden="true" />
                       </div>
+                      <h3 className="font-medium text-foreground">Report a Bug</h3>
                     </div>
-                    <ExternalLink className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
-                    <span className="sr-only">(opens in new window)</span>
-                  </a>
 
-                  <a href="https://openhamprep.statuspage.io/" target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 p-3 rounded-lg border border-border bg-card hover:bg-muted transition-colors">
-                    <div className="flex items-center justify-center h-10 w-10 rounded-full bg-success/10 text-success">
-                      <Activity className="h-5 w-5" aria-hidden="true" />
+                    <div className="space-y-3">
+                      <div className="space-y-1.5">
+                        <Label htmlFor="bug-title">Title</Label>
+                        <Input
+                          id="bug-title"
+                          placeholder="Brief summary of the issue"
+                          value={bugTitle}
+                          onChange={(e) => setBugTitle(e.target.value)}
+                        />
+                      </div>
+
+                      <div className="space-y-1.5">
+                        <Label htmlFor="bug-description">Description</Label>
+                        <Textarea
+                          id="bug-description"
+                          placeholder="What happened? What were you trying to do?"
+                          rows={4}
+                          value={bugDescription}
+                          onChange={(e) => setBugDescription(e.target.value)}
+                        />
+                      </div>
+
+                      <Button
+                        onClick={handleSubmitBug}
+                        disabled={!bugTitle.trim()}
+                        variant="destructive"
+                        className="w-full"
+                      >
+                        Submit to Forum
+                        <ExternalLink className="h-4 w-4 ml-2" aria-hidden="true" />
+                      </Button>
                     </div>
-                    <div className="flex-1">
-                      <div className="font-medium text-foreground">System Status</div>
-                      <div className="text-sm text-muted-foreground">
-                        Check if services are running smoothly
+                  </div>
+                ) : (
+                  <div className="space-y-4">
+                    <button
+                      type="button"
+                      onClick={() => setActiveForm(null)}
+                      className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+                      Back to options
+                    </button>
+
+                    <div className="flex items-center gap-2">
+                      <div className="flex items-center justify-center h-8 w-8 rounded-full bg-primary/10 text-primary">
+                        <Lightbulb className="h-4 w-4" aria-hidden="true" />
                       </div>
+                      <h3 className="font-medium text-foreground">Give Feedback</h3>
+                    </div>
+
+                    <div className="space-y-3">
+                      <div className="space-y-1.5">
+                        <Label htmlFor="feedback-title">Title</Label>
+                        <Input
+                          id="feedback-title"
+                          placeholder="Brief summary of your idea"
+                          value={feedbackTitle}
+                          onChange={(e) => setFeedbackTitle(e.target.value)}
+                        />
+                      </div>
+
+                      <div className="space-y-1.5">
+                        <Label htmlFor="feedback-description">Description</Label>
+                        <Textarea
+                          id="feedback-description"
+                          placeholder="Tell us more about your idea or suggestion"
+                          rows={4}
+                          value={feedbackDescription}
+                          onChange={(e) => setFeedbackDescription(e.target.value)}
+                        />
+                      </div>
+
+                      <Button
+                        onClick={handleSubmitFeedback}
+                        disabled={!feedbackTitle.trim()}
+                        className="w-full"
+                      >
+                        Submit to Forum
+                        <ExternalLink className="h-4 w-4 ml-2" aria-hidden="true" />
+                      </Button>
                     </div>
-                    <ExternalLink className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
-                    <span className="sr-only">(opens in new window)</span>
-                  </a>
-                </div>
+                  </div>
+                )}
               </TabsContent>
           </Tabs>
         </DialogContent>

From dbc5e82c9958bb6352b6241c5afe11fb9e71de3e Mon Sep 17 00:00:00 2001
From: Brad Bazemore <bankersalgo@gmail.com>
Date: Mon, 12 Jan 2026 15:01:00 -0500
Subject: [PATCH 2/7] fix: add validation, length limits, tests, and larger
 touch target

- Require both title and description before enabling submit
- Add maxLength limits (200 for title, 5000 for description)
- Truncate input in URL builder to prevent overflow
- Increase help button size from 36px to 48px for better mobile tap target
- Update tests: replace old feedback link test with button tests
- Add tests for bug report form, feedback form, validation, and reset

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/HelpButton.test.tsx | 254 ++++++++++++++++++++++++++++-
 src/components/HelpButton.tsx      |  21 ++-
 2 files changed, 260 insertions(+), 15 deletions(-)

diff --git a/src/components/HelpButton.test.tsx b/src/components/HelpButton.test.tsx
index 5fbfc1b..5824ada 100644
--- a/src/components/HelpButton.test.tsx
+++ b/src/components/HelpButton.test.tsx
@@ -133,21 +133,26 @@ describe('HelpButton', () => {
     });
   });
 
-  describe('Feedback Links', () => {
-    it('has correct feedback forum link', async () => {
+  describe('Feedback Options', () => {
+    it('shows Report a Bug button', async () => {
       const user = userEvent.setup();
       renderHelpButton();
 
       await user.click(screen.getByRole('button', { name: /open help dialog/i }));
 
       await waitFor(() => {
-        const feedbackLink = screen.getByRole('link', { name: /give feedback/i });
-        expect(feedbackLink).toHaveAttribute(
-          'href',
-          'https://forum.openhamprep.com/c/feedback/2'
-        );
-        expect(feedbackLink).toHaveAttribute('target', '_blank');
-        expect(feedbackLink).toHaveAttribute('rel', 'noopener noreferrer');
+        expect(screen.getByRole('button', { name: /report a bug/i })).toBeInTheDocument();
+      });
+    });
+
+    it('shows Give Feedback button', async () => {
+      const user = userEvent.setup();
+      renderHelpButton();
+
+      await user.click(screen.getByRole('button', { name: /open help dialog/i }));
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /give feedback/i })).toBeInTheDocument();
       });
     });
 
@@ -169,6 +174,237 @@ describe('HelpButton', () => {
     });
   });
 
+  describe('Bug Report Form', () => {
+    it('shows bug report form when Report a Bug is clicked', async () => {
+      const user = userEvent.setup();
+      renderHelpButton();
+
+      await user.click(screen.getByRole('button', { name: /open help dialog/i }));
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /report a bug/i })).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByRole('button', { name: /report a bug/i }));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/title/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/description/i)).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /submit to forum/i })).toBeInTheDocument();
+      });
+    });
+
+    it('shows back button in bug report form', async () => {
+      const user = userEvent.setup();
+      renderHelpButton();
+
+      await user.click(screen.getByRole('button', { name: /open help dialog/i }));
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /report a bug/i })).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByRole('button', { name: /report a bug/i }));
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /back to options/i })).toBeInTheDocument();
+      });
+    });
+
+    it('returns to options when back button is clicked', async () => {
+      const user = userEvent.setup();
+      renderHelpButton();
+
+      await user.click(screen.getByRole('button', { name: /open help dialog/i }));
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /report a bug/i })).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByRole('button', { name: /report a bug/i }));
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /back to options/i })).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByRole('button', { name: /back to options/i }));
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /report a bug/i })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /give feedback/i })).toBeInTheDocument();
+      });
+    });
+
+    it('disables submit when title is empty', async () => {
+      const user = userEvent.setup();
+      renderHelpButton();
+
+      await user.click(screen.getByRole('button', { name: /open help dialog/i }));
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /report a bug/i })).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByRole('button', { name: /report a bug/i }));
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /submit to forum/i })).toBeDisabled();
+      });
+    });
+
+    it('disables submit when description is empty', async () => {
+      const user = userEvent.setup();
+      renderHelpButton();
+
+      await user.click(screen.getByRole('button', { name: /open help dialog/i }));
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /report a bug/i })).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByRole('button', { name: /report a bug/i }));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/title/i)).toBeInTheDocument();
+      });
+
+      await user.type(screen.getByLabelText(/title/i), 'Test bug title');
+
+      expect(screen.getByRole('button', { name: /submit to forum/i })).toBeDisabled();
+    });
+
+    it('enables submit when both title and description have content', async () => {
+      const user = userEvent.setup();
+      renderHelpButton();
+
+      await user.click(screen.getByRole('button', { name: /open help dialog/i }));
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /report a bug/i })).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByRole('button', { name: /report a bug/i }));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/title/i)).toBeInTheDocument();
+      });
+
+      await user.type(screen.getByLabelText(/title/i), 'Test bug title');
+      await user.type(screen.getByLabelText(/description/i), 'Test bug description');
+
+      expect(screen.getByRole('button', { name: /submit to forum/i })).not.toBeDisabled();
+    });
+
+    it('opens forum URL when submit is clicked', async () => {
+      const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+      const user = userEvent.setup();
+      renderHelpButton();
+
+      await user.click(screen.getByRole('button', { name: /open help dialog/i }));
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /report a bug/i })).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByRole('button', { name: /report a bug/i }));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/title/i)).toBeInTheDocument();
+      });
+
+      await user.type(screen.getByLabelText(/title/i), 'Test bug');
+      await user.type(screen.getByLabelText(/description/i), 'Bug description');
+      await user.click(screen.getByRole('button', { name: /submit to forum/i }));
+
+      expect(windowOpenSpy).toHaveBeenCalledWith(
+        expect.stringContaining('https://forum.openhamprep.com/new-topic'),
+        '_blank',
+        'noopener,noreferrer'
+      );
+      expect(windowOpenSpy).toHaveBeenCalledWith(
+        expect.stringContaining('tags=bug'),
+        '_blank',
+        'noopener,noreferrer'
+      );
+
+      windowOpenSpy.mockRestore();
+    });
+  });
+
+  describe('Feedback Form', () => {
+    it('shows feedback form when Give Feedback is clicked', async () => {
+      const user = userEvent.setup();
+      renderHelpButton();
+
+      await user.click(screen.getByRole('button', { name: /open help dialog/i }));
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /give feedback/i })).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByRole('button', { name: /give feedback/i }));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/title/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/description/i)).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /submit to forum/i })).toBeInTheDocument();
+      });
+    });
+
+    it('opens forum URL with feature tag when feedback is submitted', async () => {
+      const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+      const user = userEvent.setup();
+      renderHelpButton();
+
+      await user.click(screen.getByRole('button', { name: /open help dialog/i }));
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /give feedback/i })).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByRole('button', { name: /give feedback/i }));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/title/i)).toBeInTheDocument();
+      });
+
+      await user.type(screen.getByLabelText(/title/i), 'Feature idea');
+      await user.type(screen.getByLabelText(/description/i), 'Feature description');
+      await user.click(screen.getByRole('button', { name: /submit to forum/i }));
+
+      expect(windowOpenSpy).toHaveBeenCalledWith(
+        expect.stringContaining('tags=feature'),
+        '_blank',
+        'noopener,noreferrer'
+      );
+
+      windowOpenSpy.mockRestore();
+    });
+  });
+
+  describe('Form Reset', () => {
+    it('resets form when dialog is closed', async () => {
+      const user = userEvent.setup();
+      renderHelpButton();
+
+      // Open dialog and fill bug form
+      await user.click(screen.getByRole('button', { name: /open help dialog/i }));
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /report a bug/i })).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByRole('button', { name: /report a bug/i }));
+      await waitFor(() => {
+        expect(screen.getByLabelText(/title/i)).toBeInTheDocument();
+      });
+
+      await user.type(screen.getByLabelText(/title/i), 'Test title');
+      await user.type(screen.getByLabelText(/description/i), 'Test description');
+
+      // Close dialog by clicking outside or pressing escape
+      await user.keyboard('{Escape}');
+
+      // Re-open dialog
+      await user.click(screen.getByRole('button', { name: /open help dialog/i }));
+
+      // Should show options view, not the form
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /report a bug/i })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /give feedback/i })).toBeInTheDocument();
+      });
+    });
+  });
+
   describe('Keyboard Shortcut Display', () => {
     it('displays keys in kbd elements when Shortcuts tab is selected', async () => {
       const user = userEvent.setup();
diff --git a/src/components/HelpButton.tsx b/src/components/HelpButton.tsx
index 0c0456b..4f59f29 100644
--- a/src/components/HelpButton.tsx
+++ b/src/components/HelpButton.tsx
@@ -54,15 +54,20 @@ const shortcutGroups: ShortcutGroup[] = [{
 }];
 type FormType = 'bug' | 'feedback' | null;
 
+const MAX_TITLE_LENGTH = 200;
+const MAX_DESCRIPTION_LENGTH = 5000;
+
 const buildForumUrl = (type: 'bug' | 'feature', title: string, description: string) => {
   const tag = type === 'bug' ? 'bug' : 'feature';
+  const truncatedTitle = title.slice(0, MAX_TITLE_LENGTH);
+  const truncatedDescription = description.slice(0, MAX_DESCRIPTION_LENGTH);
   const bodyTemplate = type === 'bug'
-    ? `**Issue Description:**\n${description}\n\n**Steps to Reproduce:**\n1. \n2. \n3. \n\n**Expected Behavior:**\n\n**Actual Behavior:**\n`
-    : `**Feedback:**\n${description}\n\n**Why this would help:**\n`;
+    ? `**Issue Description:**\n${truncatedDescription}\n\n**Steps to Reproduce:**\n1. \n2. \n3. \n\n**Expected Behavior:**\n\n**Actual Behavior:**\n`
+    : `**Feedback:**\n${truncatedDescription}\n\n**Why this would help:**\n`;
 
   const params = new URLSearchParams({
     category: 'feedback',
-    title: title,
+    title: truncatedTitle,
     tags: tag,
     body: bodyTemplate
   });
@@ -106,7 +111,7 @@ export function HelpButton() {
   return <>
       <Tooltip>
         <TooltipTrigger asChild>
-          <Button variant="default" size="icon" className="fixed bottom-4 right-4 h-9 w-9 rounded-full shadow-lg z-50 [&_svg]:size-7" onClick={() => setOpen(true)} aria-label="Open help dialog">
+          <Button variant="default" size="icon" className="fixed bottom-4 right-4 h-12 w-12 rounded-full shadow-lg z-50 [&_svg]:size-7" onClick={() => setOpen(true)} aria-label="Open help dialog">
             <HelpCircle aria-hidden="true" />
           </Button>
         </TooltipTrigger>
@@ -240,6 +245,7 @@ export function HelpButton() {
                           placeholder="Brief summary of the issue"
                           value={bugTitle}
                           onChange={(e) => setBugTitle(e.target.value)}
+                          maxLength={MAX_TITLE_LENGTH}
                         />
                       </div>
 
@@ -251,12 +257,13 @@ export function HelpButton() {
                           rows={4}
                           value={bugDescription}
                           onChange={(e) => setBugDescription(e.target.value)}
+                          maxLength={MAX_DESCRIPTION_LENGTH}
                         />
                       </div>
 
                       <Button
                         onClick={handleSubmitBug}
-                        disabled={!bugTitle.trim()}
+                        disabled={!bugTitle.trim() || !bugDescription.trim()}
                         variant="destructive"
                         className="w-full"
                       >
@@ -291,6 +298,7 @@ export function HelpButton() {
                           placeholder="Brief summary of your idea"
                           value={feedbackTitle}
                           onChange={(e) => setFeedbackTitle(e.target.value)}
+                          maxLength={MAX_TITLE_LENGTH}
                         />
                       </div>
 
@@ -302,12 +310,13 @@ export function HelpButton() {
                           rows={4}
                           value={feedbackDescription}
                           onChange={(e) => setFeedbackDescription(e.target.value)}
+                          maxLength={MAX_DESCRIPTION_LENGTH}
                         />
                       </div>
 
                       <Button
                         onClick={handleSubmitFeedback}
-                        disabled={!feedbackTitle.trim()}
+                        disabled={!feedbackTitle.trim() || !feedbackDescription.trim()}
                         className="w-full"
                       >
                         Submit to Forum

From 502726c98cc1be5cb8b1f3f3224cab841510f18f Mon Sep 17 00:00:00 2001
From: Brad Bazemore <bankersalgo@gmail.com>
Date: Mon, 12 Jan 2026 15:04:50 -0500
Subject: [PATCH 3/7] fix: improve dark mode muted text contrast for
 readability

Increase muted-foreground lightness from 55% to 65% in dark mode.
This improves the contrast ratio from ~4.7:1 to ~7.5:1, making
secondary text more readable while maintaining visual hierarchy.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index 85151b9..46a87b3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -80,7 +80,7 @@
     --secondary-foreground: 45 30% 85%;
 
     --muted: 222 25% 16%;
-    --muted-foreground: 220 15% 55%;
+    --muted-foreground: 220 15% 65%;
 
     --accent: 150 60% 45%;
     --accent-foreground: 222 47% 8%;

From bbde57c515a99d030603d4c3034aef859436a607 Mon Sep 17 00:00:00 2001
From: Brad Bazemore <bankersalgo@gmail.com>
Date: Mon, 12 Jan 2026 15:08:32 -0500
Subject: [PATCH 4/7] fix: reorder help menu tabs with Feedback first

Swap tab order so Feedback tab appears first (left) and Shortcuts
tab appears second (right). Feedback is already the default tab.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/HelpButton.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/HelpButton.tsx b/src/components/HelpButton.tsx
index 4f59f29..5f9db07 100644
--- a/src/components/HelpButton.tsx
+++ b/src/components/HelpButton.tsx
@@ -134,14 +134,14 @@ export function HelpButton() {
 
           <Tabs defaultValue="feedback" className="mt-2">
             <TabsList className="grid w-full grid-cols-2">
-              <TabsTrigger value="shortcuts" className="flex items-center gap-2">
-                <Keyboard className="h-4 w-4" aria-hidden="true" />
-                Shortcuts
-              </TabsTrigger>
               <TabsTrigger value="feedback" className="flex items-center gap-2">
                 <Lightbulb className="h-4 w-4" aria-hidden="true" />
                 Feedback
               </TabsTrigger>
+              <TabsTrigger value="shortcuts" className="flex items-center gap-2">
+                <Keyboard className="h-4 w-4" aria-hidden="true" />
+                Shortcuts
+              </TabsTrigger>
             </TabsList>
 
               <TabsContent value="shortcuts" className="mt-4 space-y-4">

From e121e7fbc0e6993a97636ef76e44d5e24b577555 Mon Sep 17 00:00:00 2001
From: Brad Bazemore <bankersalgo@gmail.com>
Date: Mon, 12 Jan 2026 15:14:43 -0500
Subject: [PATCH 5/7] fix: improve help dialog UX with toast feedback and popup
 handling

- Add toast notifications for successful forum submission
- Handle popup blockers with error toast when window.open returns null
- Reset form and return to options view after successful submit
- Stabilize dialog height (340px) to prevent jumping between tabs
- Increase help button icon size (size-8) for better proportions
- Improve test assertions with single comprehensive regex match
- Add tests for popup blocked scenario and form reset after submit

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/HelpButton.test.tsx | 73 ++++++++++++++++++++++++++----
 src/components/HelpButton.tsx      | 39 ++++++++++++++--
 2 files changed, 98 insertions(+), 14 deletions(-)

diff --git a/src/components/HelpButton.test.tsx b/src/components/HelpButton.test.tsx
index 5824ada..cad4a00 100644
--- a/src/components/HelpButton.test.tsx
+++ b/src/components/HelpButton.test.tsx
@@ -289,7 +289,8 @@ describe('HelpButton', () => {
     });
 
     it('opens forum URL when submit is clicked', async () => {
-      const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+      const mockWindow = {} as Window;
+      const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => mockWindow);
       const user = userEvent.setup();
       renderHelpButton();
 
@@ -308,19 +309,71 @@ describe('HelpButton', () => {
       await user.type(screen.getByLabelText(/description/i), 'Bug description');
       await user.click(screen.getByRole('button', { name: /submit to forum/i }));
 
+      expect(windowOpenSpy).toHaveBeenCalledOnce();
       expect(windowOpenSpy).toHaveBeenCalledWith(
-        expect.stringContaining('https://forum.openhamprep.com/new-topic'),
-        '_blank',
-        'noopener,noreferrer'
-      );
-      expect(windowOpenSpy).toHaveBeenCalledWith(
-        expect.stringContaining('tags=bug'),
+        expect.stringMatching(/https:\/\/forum\.openhamprep\.com\/new-topic.*tags=bug/),
         '_blank',
         'noopener,noreferrer'
       );
 
       windowOpenSpy.mockRestore();
     });
+
+    it('shows error toast when popup is blocked', async () => {
+      const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+      const user = userEvent.setup();
+      renderHelpButton();
+
+      await user.click(screen.getByRole('button', { name: /open help dialog/i }));
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /report a bug/i })).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByRole('button', { name: /report a bug/i }));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/title/i)).toBeInTheDocument();
+      });
+
+      await user.type(screen.getByLabelText(/title/i), 'Test bug');
+      await user.type(screen.getByLabelText(/description/i), 'Bug description');
+      await user.click(screen.getByRole('button', { name: /submit to forum/i }));
+
+      // Form should still be visible (not reset) when popup is blocked
+      expect(screen.getByLabelText(/title/i)).toHaveValue('Test bug');
+
+      windowOpenSpy.mockRestore();
+    });
+
+    it('resets form after successful submit', async () => {
+      const mockWindow = {} as Window;
+      const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => mockWindow);
+      const user = userEvent.setup();
+      renderHelpButton();
+
+      await user.click(screen.getByRole('button', { name: /open help dialog/i }));
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /report a bug/i })).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByRole('button', { name: /report a bug/i }));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText(/title/i)).toBeInTheDocument();
+      });
+
+      await user.type(screen.getByLabelText(/title/i), 'Test bug');
+      await user.type(screen.getByLabelText(/description/i), 'Bug description');
+      await user.click(screen.getByRole('button', { name: /submit to forum/i }));
+
+      // Form should reset and return to options view after successful submit
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /report a bug/i })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /give feedback/i })).toBeInTheDocument();
+      });
+
+      windowOpenSpy.mockRestore();
+    });
   });
 
   describe('Feedback Form', () => {
@@ -343,7 +396,8 @@ describe('HelpButton', () => {
     });
 
     it('opens forum URL with feature tag when feedback is submitted', async () => {
-      const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+      const mockWindow = {} as Window;
+      const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => mockWindow);
       const user = userEvent.setup();
       renderHelpButton();
 
@@ -362,8 +416,9 @@ describe('HelpButton', () => {
       await user.type(screen.getByLabelText(/description/i), 'Feature description');
       await user.click(screen.getByRole('button', { name: /submit to forum/i }));
 
+      expect(windowOpenSpy).toHaveBeenCalledOnce();
       expect(windowOpenSpy).toHaveBeenCalledWith(
-        expect.stringContaining('tags=feature'),
+        expect.stringMatching(/https:\/\/forum\.openhamprep\.com\/new-topic.*tags=feature/),
         '_blank',
         'noopener,noreferrer'
       );
diff --git a/src/components/HelpButton.tsx b/src/components/HelpButton.tsx
index 5f9db07..1eb2e58 100644
--- a/src/components/HelpButton.tsx
+++ b/src/components/HelpButton.tsx
@@ -7,6 +7,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
+import { toast } from '@/hooks/use-toast';
 interface ShortcutItem {
   keys: string[];
   description: string;
@@ -100,18 +101,46 @@ export function HelpButton() {
 
   const handleSubmitBug = () => {
     const url = buildForumUrl('bug', bugTitle, bugDescription);
-    window.open(url, '_blank', 'noopener,noreferrer');
+    const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
+
+    if (newWindow) {
+      toast({
+        title: 'Opening forum',
+        description: 'Complete your bug report in the new tab.',
+      });
+      resetForms();
+    } else {
+      toast({
+        title: 'Popup blocked',
+        description: 'Please allow popups to submit your report.',
+        variant: 'destructive',
+      });
+    }
   };
 
   const handleSubmitFeedback = () => {
     const url = buildForumUrl('feature', feedbackTitle, feedbackDescription);
-    window.open(url, '_blank', 'noopener,noreferrer');
+    const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
+
+    if (newWindow) {
+      toast({
+        title: 'Opening forum',
+        description: 'Complete your feedback in the new tab.',
+      });
+      resetForms();
+    } else {
+      toast({
+        title: 'Popup blocked',
+        description: 'Please allow popups to submit your feedback.',
+        variant: 'destructive',
+      });
+    }
   };
 
   return <>
       <Tooltip>
         <TooltipTrigger asChild>
-          <Button variant="default" size="icon" className="fixed bottom-4 right-4 h-12 w-12 rounded-full shadow-lg z-50 [&_svg]:size-7" onClick={() => setOpen(true)} aria-label="Open help dialog">
+          <Button variant="default" size="icon" className="fixed bottom-4 right-4 h-12 w-12 rounded-full shadow-lg z-50 [&_svg]:size-8" onClick={() => setOpen(true)} aria-label="Open help dialog">
             <HelpCircle aria-hidden="true" />
           </Button>
         </TooltipTrigger>
@@ -144,7 +173,7 @@ export function HelpButton() {
               </TabsTrigger>
             </TabsList>
 
-              <TabsContent value="shortcuts" className="mt-4 space-y-4">
+              <TabsContent value="shortcuts" className="mt-4 space-y-4 min-h-[340px]">
                 {shortcutGroups.map(group => <div key={group.title}>
                     <h3 className="text-sm font-medium text-muted-foreground mb-2">
                       {group.title}
@@ -164,7 +193,7 @@ export function HelpButton() {
                   </div>)}
               </TabsContent>
 
-              <TabsContent value="feedback" className="mt-4 space-y-4 min-h-[280px]">
+              <TabsContent value="feedback" className="mt-4 space-y-4 min-h-[340px]">
                 {activeForm === null ? (
                   <>
                     <p className="text-sm text-muted-foreground">

From 2dc0b096e4df340c361cf834e8585cca241a8b77 Mon Sep 17 00:00:00 2001
From: Brad Bazemore <bankersalgo@gmail.com>
Date: Mon, 12 Jan 2026 15:20:35 -0500
Subject: [PATCH 6/7] fix: stabilize help dialog height and simplify popup
 handling

- Use fixed height (h-[340px]) instead of min-height for tab content
  to prevent dialog from shifting when switching tabs or views
- Remove popup blocker detection since browsers handle this natively
- Always show success toast and reset form after submit
- Consolidate duplicate reset form tests

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/HelpButton.test.tsx | 31 ++----------------
 src/components/HelpButton.tsx      | 52 ++++++++++--------------------
 2 files changed, 19 insertions(+), 64 deletions(-)

diff --git a/src/components/HelpButton.test.tsx b/src/components/HelpButton.test.tsx
index cad4a00..e339a8a 100644
--- a/src/components/HelpButton.test.tsx
+++ b/src/components/HelpButton.test.tsx
@@ -319,7 +319,7 @@ describe('HelpButton', () => {
       windowOpenSpy.mockRestore();
     });
 
-    it('shows error toast when popup is blocked', async () => {
+    it('resets form after submit', async () => {
       const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
       const user = userEvent.setup();
       renderHelpButton();
@@ -339,34 +339,7 @@ describe('HelpButton', () => {
       await user.type(screen.getByLabelText(/description/i), 'Bug description');
       await user.click(screen.getByRole('button', { name: /submit to forum/i }));
 
-      // Form should still be visible (not reset) when popup is blocked
-      expect(screen.getByLabelText(/title/i)).toHaveValue('Test bug');
-
-      windowOpenSpy.mockRestore();
-    });
-
-    it('resets form after successful submit', async () => {
-      const mockWindow = {} as Window;
-      const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => mockWindow);
-      const user = userEvent.setup();
-      renderHelpButton();
-
-      await user.click(screen.getByRole('button', { name: /open help dialog/i }));
-      await waitFor(() => {
-        expect(screen.getByRole('button', { name: /report a bug/i })).toBeInTheDocument();
-      });
-
-      await user.click(screen.getByRole('button', { name: /report a bug/i }));
-
-      await waitFor(() => {
-        expect(screen.getByLabelText(/title/i)).toBeInTheDocument();
-      });
-
-      await user.type(screen.getByLabelText(/title/i), 'Test bug');
-      await user.type(screen.getByLabelText(/description/i), 'Bug description');
-      await user.click(screen.getByRole('button', { name: /submit to forum/i }));
-
-      // Form should reset and return to options view after successful submit
+      // Form should reset and return to options view after submit
       await waitFor(() => {
         expect(screen.getByRole('button', { name: /report a bug/i })).toBeInTheDocument();
         expect(screen.getByRole('button', { name: /give feedback/i })).toBeInTheDocument();
diff --git a/src/components/HelpButton.tsx b/src/components/HelpButton.tsx
index 1eb2e58..9ebac2e 100644
--- a/src/components/HelpButton.tsx
+++ b/src/components/HelpButton.tsx
@@ -101,40 +101,22 @@ export function HelpButton() {
 
   const handleSubmitBug = () => {
     const url = buildForumUrl('bug', bugTitle, bugDescription);
-    const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
-
-    if (newWindow) {
-      toast({
-        title: 'Opening forum',
-        description: 'Complete your bug report in the new tab.',
-      });
-      resetForms();
-    } else {
-      toast({
-        title: 'Popup blocked',
-        description: 'Please allow popups to submit your report.',
-        variant: 'destructive',
-      });
-    }
+    window.open(url, '_blank', 'noopener,noreferrer');
+    toast({
+      title: 'Opening forum',
+      description: 'Complete your bug report in the new tab.',
+    });
+    resetForms();
   };
 
   const handleSubmitFeedback = () => {
     const url = buildForumUrl('feature', feedbackTitle, feedbackDescription);
-    const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
-
-    if (newWindow) {
-      toast({
-        title: 'Opening forum',
-        description: 'Complete your feedback in the new tab.',
-      });
-      resetForms();
-    } else {
-      toast({
-        title: 'Popup blocked',
-        description: 'Please allow popups to submit your feedback.',
-        variant: 'destructive',
-      });
-    }
+    window.open(url, '_blank', 'noopener,noreferrer');
+    toast({
+      title: 'Opening forum',
+      description: 'Complete your feedback in the new tab.',
+    });
+    resetForms();
   };
 
   return <>
@@ -150,7 +132,7 @@ export function HelpButton() {
       </Tooltip>
 
       <Dialog open={open} onOpenChange={handleDialogChange}>
-        <DialogContent className="sm:max-w-lg min-h-[420px]" aria-describedby="help-description">
+        <DialogContent className="sm:max-w-lg" aria-describedby="help-description">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
               <HelpCircle className="h-5 w-5" aria-hidden="true" />
@@ -173,7 +155,7 @@ export function HelpButton() {
               </TabsTrigger>
             </TabsList>
 
-              <TabsContent value="shortcuts" className="mt-4 space-y-4 min-h-[340px]">
+              <TabsContent value="shortcuts" className="mt-4 space-y-4 h-[340px] overflow-y-auto">
                 {shortcutGroups.map(group => <div key={group.title}>
                     <h3 className="text-sm font-medium text-muted-foreground mb-2">
                       {group.title}
@@ -193,9 +175,9 @@ export function HelpButton() {
                   </div>)}
               </TabsContent>
 
-              <TabsContent value="feedback" className="mt-4 space-y-4 min-h-[340px]">
+              <TabsContent value="feedback" className="mt-4 h-[340px] overflow-y-auto">
                 {activeForm === null ? (
-                  <>
+                  <div className="space-y-4">
                     <p className="text-sm text-muted-foreground">
                       Found a bug or have an idea to improve the app? Let us know on our community forum!
                     </p>
@@ -247,7 +229,7 @@ export function HelpButton() {
                         <span className="sr-only">(opens in new window)</span>
                       </a>
                     </div>
-                  </>
+                  </div>
                 ) : activeForm === 'bug' ? (
                   <div className="space-y-4">
                     <button

From e8e54e92877db53364b144fbb44e7c5d87ebdd31 Mon Sep 17 00:00:00 2001
From: Brad Bazemore <bankersalgo@gmail.com>
Date: Mon, 12 Jan 2026 15:28:33 -0500
Subject: [PATCH 7/7] fix: compact keyboard shortcuts layout to prevent
 scrollbars

- Consolidate shortcuts into 2 sections: Answer Selection + Navigation
- Display answer keys (A, B, C, D) in horizontal compact grid
- Remove "Tools" section (merged with Navigation)
- Update tests for new section names

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/HelpButton.test.tsx |  9 ++--
 src/components/HelpButton.tsx      | 69 +++++++++++++++++-------------
 2 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/src/components/HelpButton.test.tsx b/src/components/HelpButton.test.tsx
index e339a8a..62920e1 100644
--- a/src/components/HelpButton.test.tsx
+++ b/src/components/HelpButton.test.tsx
@@ -89,9 +89,8 @@ describe('HelpButton', () => {
       await user.click(screen.getByRole('tab', { name: /shortcuts/i }));
 
       await waitFor(() => {
-        expect(screen.getByText('Answering Questions')).toBeInTheDocument();
+        expect(screen.getByText('Answer Selection')).toBeInTheDocument();
         expect(screen.getByText('Navigation')).toBeInTheDocument();
-        expect(screen.getByText('Tools')).toBeInTheDocument();
       });
     });
 
@@ -108,8 +107,8 @@ describe('HelpButton', () => {
       await user.click(screen.getByRole('tab', { name: /shortcuts/i }));
 
       await waitFor(() => {
-        expect(screen.getByText('Select answer A')).toBeInTheDocument();
-        expect(screen.getByText('Select answer B')).toBeInTheDocument();
+        expect(screen.getByText('Answer A')).toBeInTheDocument();
+        expect(screen.getByText('Answer B')).toBeInTheDocument();
         expect(screen.getByText('Next question')).toBeInTheDocument();
       });
     });
@@ -127,7 +126,7 @@ describe('HelpButton', () => {
       await user.click(screen.getByRole('tab', { name: /shortcuts/i }));
 
       await waitFor(() => {
-        expect(screen.getByText('Answering Questions')).toBeInTheDocument();
+        expect(screen.getByText('Answer Selection')).toBeInTheDocument();
         expect(screen.getByText('Navigation')).toBeInTheDocument();
       });
     });
diff --git a/src/components/HelpButton.tsx b/src/components/HelpButton.tsx
index 9ebac2e..2afac90 100644
--- a/src/components/HelpButton.tsx
+++ b/src/components/HelpButton.tsx
@@ -17,21 +17,6 @@ interface ShortcutGroup {
   shortcuts: ShortcutItem[];
 }
 const shortcutGroups: ShortcutGroup[] = [{
-  title: 'Answering Questions',
-  shortcuts: [{
-    keys: ['A'],
-    description: 'Select answer A'
-  }, {
-    keys: ['B'],
-    description: 'Select answer B'
-  }, {
-    keys: ['C'],
-    description: 'Select answer C'
-  }, {
-    keys: ['D'],
-    description: 'Select answer D'
-  }]
-}, {
   title: 'Navigation',
   shortcuts: [{
     keys: ['→'],
@@ -41,18 +26,18 @@ const shortcutGroups: ShortcutGroup[] = [{
     description: 'Previous question'
   }, {
     keys: ['S'],
-    description: 'Skip question (Random Practice)'
+    description: 'Skip question'
   }, {
     keys: ['Esc'],
     description: 'Go back / Close'
-  }]
-}, {
-  title: 'Tools',
-  shortcuts: [{
+  }, {
     keys: ['?'],
-    description: 'Show this help dialog'
+    description: 'Show help'
   }]
 }];
+
+// Answer keys shown separately in a compact grid
+const answerKeys = ['A', 'B', 'C', 'D'];
 type FormType = 'bug' | 'feedback' | null;
 
 const MAX_TITLE_LENGTH = 200;
@@ -155,27 +140,51 @@ export function HelpButton() {
               </TabsTrigger>
             </TabsList>
 
-              <TabsContent value="shortcuts" className="mt-4 space-y-4 h-[340px] overflow-y-auto">
-                {shortcutGroups.map(group => <div key={group.title}>
+              <TabsContent value="shortcuts" className="mt-4 space-y-4 h-[340px]">
+                {/* Answer keys in compact grid */}
+                <div>
+                  <h3 className="text-sm font-medium text-muted-foreground mb-2">
+                    Answer Selection
+                  </h3>
+                  <div className="flex gap-2">
+                    {answerKeys.map(key => (
+                      <div key={key} className="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-muted/50">
+                        <kbd className="inline-flex items-center justify-center w-6 h-6 text-xs font-mono font-medium bg-background border border-border rounded">
+                          {key}
+                        </kbd>
+                        <span className="text-sm text-muted-foreground">Answer {key}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Navigation shortcuts */}
+                {shortcutGroups.map(group => (
+                  <div key={group.title}>
                     <h3 className="text-sm font-medium text-muted-foreground mb-2">
                       {group.title}
                     </h3>
-                    <div className="space-y-1.5">
-                      {group.shortcuts.map((shortcut, index) => <div key={index} className="flex items-center justify-between py-1">
+                    <div className="space-y-1">
+                      {group.shortcuts.map((shortcut, index) => (
+                        <div key={index} className="flex items-center justify-between py-0.5">
                           <span className="text-sm text-foreground">
                             {shortcut.description}
                           </span>
                           <div className="flex items-center gap-1">
-                            {shortcut.keys.map((key, keyIndex) => <kbd key={keyIndex} className="inline-flex items-center justify-center min-w-[24px] h-6 px-2 text-xs font-mono font-medium bg-muted border border-border rounded">
+                            {shortcut.keys.map((key, keyIndex) => (
+                              <kbd key={keyIndex} className="inline-flex items-center justify-center min-w-[24px] h-6 px-2 text-xs font-mono font-medium bg-muted border border-border rounded">
                                 {key}
-                              </kbd>)}
+                              </kbd>
+                            ))}
                           </div>
-                        </div>)}
+                        </div>
+                      ))}
                     </div>
-                  </div>)}
+                  </div>
+                ))}
               </TabsContent>
 
-              <TabsContent value="feedback" className="mt-4 h-[340px] overflow-y-auto">
+              <TabsContent value="feedback" className="mt-4 h-[340px]">
                 {activeForm === null ? (
                   <div className="space-y-4">
                     <p className="text-sm text-muted-foreground">