feat: overhaul UI components for mobile responsiveness by jeastham1993 · Pull Request #166 · DataDog/stickerlandia

jeastham1993 · 2026-01-22T08:46:51Z

Fixes #164

Summary

This PR implements comprehensive mobile UI improvements for the /web-frontend application, addressing all mobile responsiveness issues identified in issue #164.

Changes

✅ Added mobile navigation with hamburger menu and drawer
✅ Made all grid layouts responsive (Dashboard, UserProfile, StickerList, MyCollection)
✅ Updated Landing page cards for mobile
✅ Made tables mobile-friendly with horizontal scroll
✅ Implemented responsive typography and spacing
✅ Increased touch target sizes for better mobile UX

Testing

Please test on mobile devices (375px, 428px), tablets (768px), and desktop (1024px+) to verify all layouts adapt properly.

UI screenshots

Generated with Claude Code

- Add mobile navigation with hamburger menu and drawer (MobileMenu component) - Update HeaderBar to include mobile menu toggle for authenticated users - Hide desktop Sidebar on mobile (< 1024px), show via mobile drawer instead - Make all grid layouts responsive across Dashboard, UserProfile, StickerList, MyCollection - Stats cards now stack vertically on mobile and adapt to tablet/desktop - Grid breakpoints: mobile (1 col), tablet (2 cols), desktop (3-4 cols) - Update Landing page cards to use responsive Tailwind grid instead of fixed CSS grid - Add horizontal scroll wrapper for UserProfile sticker table on mobile - Implement responsive typography (text-2xl sm:text-3xl) for all page titles - Add responsive padding (p-4 sm:p-6 lg:p-8) to main content areas - Increase touch target sizes for all navigation links (py-2 padding) - Remove fixed grid styles from App.css, replaced with Tailwind responsive classes All components now provide an optimized mobile experience while maintaining desktop functionality. Co-authored-by: James Eastham <jeastham1993@users.noreply.github.com>

scottgerring · 2026-01-22T08:48:25Z

Some screenshots / animations of the changes would be great !

claude · 2026-01-22T08:49:39Z

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.

Copilot

Pull request overview

This PR implements comprehensive mobile responsiveness improvements for the Stickerlandia web application, ensuring the UI adapts properly across mobile, tablet, and desktop screen sizes.

Changes:

Added mobile navigation with hamburger menu and Material-UI drawer component
Converted all grid layouts to use responsive Tailwind breakpoints (sm:, lg:, xl:)
Implemented responsive typography and spacing adjustments across all pages
Enhanced touch target sizes by adding vertical padding to navigation links
Wrapped tables in overflow containers for horizontal scrolling on mobile
Removed deprecated CSS grid styles in favor of Tailwind utility classes

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
web-frontend/src/components/UserProfile.jsx	Made grid responsive with 1/2/4 columns, added responsive typography and padding, wrapped table in overflow container
web-frontend/src/components/StickerList.jsx	Implemented responsive grid (1/2/3/4 columns) and responsive heading sizes
web-frontend/src/components/Sidebar.jsx	Hidden on mobile (lg:hidden), increased touch targets with py-2 padding
web-frontend/src/components/MyCollection.jsx	Made grid responsive with breakpoint-based columns, added responsive typography
web-frontend/src/components/MobileMenu.jsx	New mobile navigation drawer with hamburger menu, replicating Sidebar navigation
web-frontend/src/components/Landing.jsx	Converted flexbox layout to responsive grid (1/2/3 columns)
web-frontend/src/components/HeaderBar.jsx	Integrated MobileMenu component for authenticated users on mobile
web-frontend/src/components/Dashboard.jsx	Implemented responsive grid layout and typography
web-frontend/src/App.css	Removed deprecated landing-wrapper styles in favor of Tailwind utilities

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-22T08:52:07Z

+          <div className="my-4 px-5 flex gap-4 items-center">
+            <div className="flex-shrink-0">
+              <p className="bg-gray-200 rounded-full inline-block p-4 font-bold">
+                {user?.name
+                  ? user.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")
+                      .substring(0, 2)
+                      .toUpperCase()
+                  : "UN"}
+              </p>
+            </div>
+            <div className="flex-1 min-w-0">
+              <span className="block font-bold">
+                {user?.name || user?.email || "User Name"}
+              </span>
+              <span className="block text-sm text-gray-600">
+                {isLoading ? "..." : "Sticker Collector"}
+              </span>
+            </div>
+          </div>
+
+          <nav className="flex-1">
+            <ul>
+              <li className="my-3 px-5">
+                <Link
+                  className="block py-2"
+                  to="/dashboard"
+                  onClick={handleLinkClick}
+                >
+                  <HomeOutlinedIcon />
+                  User Dashboard
+                </Link>
+              </li>
+              <li className="my-3 px-5">
+                <Link
+                  className="block py-2"
+                  to="/collection"
+                  onClick={handleLinkClick}
+                >
+                  <MenuBookOutlinedIcon />
+                  My Collection
+                </Link>
+              </li>
+              <li className="my-3 px-5">
+                <Link
+                  className="block py-2"
+                  to="/catalogue"
+                  onClick={handleLinkClick}
+                >
+                  <AssessmentOutlinedIcon />
+                  Catalogue
+                </Link>
+              </li>
+              <li className="my-3 px-5">
+                <Link
+                  className="block py-2"
+                  to="/public-dashboard"
+                  onClick={handleLinkClick}
+                >
+                  <AssessmentOutlinedIcon />
+                  Public Dashboard
+                </Link>
+              </li>
+              <li className="my-3 px-5">
+                <a className="block py-2" href="">
+                  <LocalPrintshopOutlinedIcon />
+                  Print Station
+                </a>
+              </li>
+            </ul>
+          </nav>
+
+          <nav className="border-t border-gray-300 mt-auto">
+            <ul>
+              <li className="my-3 px-5">
+                <a className="block py-2" href="">
+                  <PersonOutlineOutlinedIcon />
+                  Profile
+                </a>
+              </li>
+              <li className="my-3 px-5">
+                <a className="block py-2" href="">
+                  <SettingsOutlinedIcon />
+                  Settings
+                </a>
+              </li>
+              <li className="my-3 px-5">
+                <button className="block w-full text-left py-2" onClick={logout}>
+                  <LogoutOutlinedIcon />
+                  Sign Out
+                </button>
+              </li>
+            </ul>
+          </nav>


There is significant code duplication between MobileMenu.jsx and Sidebar.jsx for the navigation structure, user display logic, and menu items. Consider extracting the shared navigation items and user info display into reusable components to reduce duplication and ensure consistency.

Copilot · 2026-01-22T08:52:08Z

+      <IconButton
+        edge="start"
+        color="inherit"
+        aria-label="menu"
+        onClick={toggleDrawer(true)}
+        className="lg:hidden"
+        sx={{ color: "black" }}
+      >
+        <MenuIcon />
+      </IconButton>


The hamburger menu button lacks an accessible label that announces its current state. Consider adding aria-expanded attribute to indicate whether the drawer is open or closed to improve screen reader experience.

Copilot · 2026-01-22T08:52:08Z

+        <MenuIcon />
+      </IconButton>
+
+      <Drawer anchor="left" open={isOpen} onClose={toggleDrawer(false)}>


The Drawer component should have aria-label or aria-labelledby to describe its purpose for screen reader users. Consider adding aria-label="Navigation menu" to improve accessibility.

Suggested change

<Drawer anchor="left" open={isOpen} onClose={toggleDrawer(false)}>

<Drawer

anchor="left"

open={isOpen}

onClose={toggleDrawer(false)}

aria-label="Navigation menu"

>

Copilot · 2026-01-22T08:52:08Z

+        color="inherit"
+        aria-label="menu"
+        onClick={toggleDrawer(true)}
+        className="lg:hidden"


The lg:hidden class is redundant here since the parent div in HeaderBar.jsx already has lg:hidden. This creates unnecessary specificity duplication.

Suggested change

className="lg:hidden"

Copilot · 2026-01-22T08:52:09Z

+                <a className="block py-2" href="">
+                  <LocalPrintshopOutlinedIcon />
+                  Print Station
+                </a>


This link has inconsistent accessibility compared to other navigation items. Consider using a Link component from react-router instead of an anchor tag if this is an internal route, or provide a proper href if it's external. Empty href attributes create poor user experience and accessibility issues.

Copilot · 2026-01-22T08:52:09Z

+                <a className="block py-2" href="">
+                  <PersonOutlineOutlinedIcon />
+                  Profile
+                </a>
+              </li>
+              <li className="my-3 px-5">
+                <a className="block py-2" href="">
+                  <SettingsOutlinedIcon />
+                  Settings
+                </a>


These links have inconsistent accessibility compared to other navigation items. Consider using Link components from react-router instead of anchor tags if these are internal routes, or provide proper href values if they're external. Empty href attributes create poor user experience and accessibility issues.

Copilot · 2026-01-22T08:52:10Z

          </li>
          <li className="my-3 px-5">
-            <a className="block" href="">
+            <a className="block py-2" href="">


Empty href attribute will cause navigation to the current page. Consider either removing the href attribute and styling as a button, or providing a valid URL destination for the Print Station link.

Copilot · 2026-01-22T08:52:10Z

+            <a className="block py-2" href="">
              <PersonOutlineOutlinedIcon />
              Profile
            </a>
          </li>
          <li className="my-3 px-5">
-            <a className="block" href="">
+            <a className="block py-2" href="">
              <SettingsOutlinedIcon />
              Settings


Empty href attributes will cause navigation to the current page. Consider either removing the href attribute and styling as buttons, or providing valid URL destinations for Profile and Settings links.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…tickerlandia into claude/issue-164-20260122-0828

jeastham1993 requested review from Copilot and scottgerring January 22, 2026 08:46

Copilot started reviewing on behalf of jeastham1993 January 22, 2026 08:47 View session

Copilot AI reviewed Jan 22, 2026

View reviewed changes

jeastham1993 and others added 5 commits January 22, 2026 13:53

Update web-frontend/src/components/MobileMenu.jsx

97b2ef5

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update web-frontend/src/components/MobileMenu.jsx

e25002b

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

chore: PR feedback fixes

ccbdd28

Merge branch 'claude/issue-164-20260122-0828' of github.com:DataDog/s…

1a15030

…tickerlandia into claude/issue-164-20260122-0828

chore: fix e2e test issues

7bfe4a6

scottgerring approved these changes Jan 22, 2026

View reviewed changes

scottgerring merged commit 8b19434 into main Jan 22, 2026
11 checks passed

scottgerring deleted the claude/issue-164-20260122-0828 branch January 22, 2026 15:37

Uh oh!

Conversation

jeastham1993 commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Testing

UI screenshots

Uh oh!

scottgerring commented Jan 22, 2026

Uh oh!

claude Bot commented Jan 22, 2026

Code review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jeastham1993 commented Jan 22, 2026 •

edited

Loading