Add responsive mobile design by HudsonGraeme · Pull Request #14 · HudsonGraeme/MoCI

HudsonGraeme · 2026-03-18T03:59:39Z

Summary

Three breakpoints: 480px (phone), 768px (tablet), 1024px (small desktop)
Hamburger menu with slide-down nav drawer on screens ≤768px
Scaled padding, typography, and spacing at each breakpoint
Single-column grid layout on mobile for stat cards and metrics
Horizontally scrollable tabs and data tables on narrow viewports
Responsive login card, modals, toasts, and diagnostic forms
Logo text hidden on phone (icon only) to save header space

Summary by CodeRabbit

New Features
- Added a hamburger menu toggle in the header for easier navigation on small screens; menu opens/closes and updates its state for improved accessibility.
Style
- Large responsive UI overhaul: new three-column metrics on wide screens and single-column reflow on tablets/phones.
- Refined typography, spacing, component sizing, and interactive element styling for better usability across breakpoints.

Three breakpoints (480px, 768px, 1024px) with scaled padding, typography, and single-column grids. Hamburger nav drawer on tablet/phone. Horizontally scrollable tabs and tables. Responsive login card, modals, toasts, and diagnostic forms.

coderabbitai · 2026-03-18T03:59:50Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1c9fa254-2ff5-4315-ae5e-c21b27ba2b04

📥 Commits

Reviewing files that changed from the base of the PR and between 29870d2 and d7c6cfb.

📒 Files selected for processing (2)

moci/index.html
moci/js/core.js

🚧 Files skipped from review as they are similar to previous changes (2)

moci/index.html
moci/js/core.js

📝 Walkthrough

Walkthrough

Adds responsive styling and a mobile hamburger menu: new CSS classes and media queries for 1024/768/480px, a menu-toggle button in the header, and JS listeners to toggle .nav.open, update aria-expanded, and reset menu state on resize and nav-link clicks.

Changes

Cohort / File(s)	Summary
Responsive Layout Framework `moci/app.css`	Adds `.metrics-3col`, `.menu-toggle`, `.menu-toggle span`, and extensive `@media` blocks (1024px, 768px, 480px) adjusting layout, grids, typography, visibility, and sizing for many components (hero, stats-grid, stat-card, modal, toast, forms, etc.).
Menu Toggle UI `moci/index.html`	Inserts a hamburger `.menu-toggle` button in the header (`aria-label="Toggle menu"`, `aria-expanded="false"`) and applies `.metrics-3col` to the stats grid instead of inline styles.
Menu Interaction Logic `moci/js/core.js`	Extends `attachEventListeners` to: toggle `.nav.open` and `aria-expanded` on `.menu-toggle` click, close nav on nav-link clicks, and auto-close nav when window is resized above 768px.

Sequence Diagram(s)

sequenceDiagram
  participant User as User
  participant Toggle as "menu-toggle\n(button)"
  participant Nav as "nav\n(menu)"
  participant Window as Window

  User->>Toggle: click
  Toggle->>Nav: toggle 'open' class
  Toggle->>Toggle: set aria-expanded (true/false)
  User->>Nav: click nav link
  Nav->>Nav: remove 'open' class
  Window->>Window: resize
  Note right of Window: if width > 768px
  Window->>Nav: ensure 'open' removed
  Window->>Toggle: set aria-expanded false

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Poem

🐰 Three bars I nudge with a hop and a twirl,
I tuck menus neat for each phone and small world,
Grids shrink and flow, cards settle in line,
A click, a close — responsive design!
Cheers from a rabbit, hopping through CSS time.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add responsive mobile design' accurately describes the main objective of the pull request, which is to implement responsive CSS breakpoints, mobile menu, and layout adjustments across multiple screen sizes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch ui/responsive-mobile

📝 Coding Plan

Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@moci/index.html`:
- Around line 68-70: Add an aria-expanded attribute to the hamburger button and
update the toggle logic to keep it in sync: set aria-expanded="false" on the
<button class="menu-toggle"> markup, then in moci/js/core.js locate the click
handler that toggles the menu (the handler bound to elements with class
"menu-toggle") and update it to set button.setAttribute('aria-expanded', 'true')
when opening the menu and 'false' when closing (mirror whatever open/close logic
or classes it currently uses), ensuring the attribute always reflects the
visible state.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1d163f1e-ef31-4f93-a87e-90376591ff95

📥 Commits

Reviewing files that changed from the base of the PR and between 276db00 and 29870d2.

📒 Files selected for processing (3)

moci/app.css
moci/index.html
moci/js/core.js

coderabbitai · 2026-03-18T04:02:52Z

moci/index.html

+					<button class="menu-toggle" aria-label="Toggle menu">
+						<span></span><span></span><span></span>
+					</button>


⚠️ Potential issue | 🟡 Minor

Add aria-expanded attribute for accessibility.

The hamburger menu button should communicate its expanded/collapsed state to assistive technologies. Currently, screen readers won't know whether the navigation is open or closed.

♿ Proposed fix

In the HTML, add aria-expanded="false":

- <button class="menu-toggle" aria-label="Toggle menu"> + <button class="menu-toggle" aria-label="Toggle menu" aria-expanded="false"> <span></span><span></span><span></span> </button>

Then in moci/js/core.js, update the click handler to toggle the attribute:

menuToggle.addEventListener('click', () => { nav.classList.toggle('open'); + menuToggle.setAttribute('aria-expanded', nav.classList.contains('open')); });

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In `@moci/index.html` around lines 68 - 70, Add an aria-expanded attribute to the hamburger button and update the toggle logic to keep it in sync: set aria-expanded="false" on the <button class="menu-toggle"> markup, then in moci/js/core.js locate the click handler that toggles the menu (the handler bound to elements with class "menu-toggle") and update it to set button.setAttribute('aria-expanded', 'true') when opening the menu and 'false' when closing (mirror whatever open/close logic or classes it currently uses), ensuring the attribute always reflects the visible state.

HudsonGraeme · 2026-03-18T23:57:31Z

@coderabbitai review

coderabbitai · 2026-03-18T23:57:38Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

coderabbitai bot reviewed Mar 18, 2026

View reviewed changes

Add aria-expanded to hamburger menu toggle

d7c6cfb

HudsonGraeme merged commit 9a41fba into dev Mar 19, 2026
4 checks passed

coderabbitai bot mentioned this pull request Mar 19, 2026

Fix mobile nav not opening #15

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add responsive mobile design#14

Add responsive mobile design#14
HudsonGraeme merged 2 commits intodevfrom
ui/responsive-mobile

HudsonGraeme commented Mar 18, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Mar 18, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Poem

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Mar 18, 2026

Uh oh!

HudsonGraeme commented Mar 18, 2026

Uh oh!

coderabbitai bot commented Mar 18, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

HudsonGraeme commented Mar 18, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Poem

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

HudsonGraeme commented Mar 18, 2026

Uh oh!

coderabbitai bot commented Mar 18, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

HudsonGraeme commented Mar 18, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 18, 2026 •

edited

Loading