mantinedev / mantinedev/ui.mantine.dev

Remove "responsive" Header examples unless they are usable on all viewport sizes

Open
#49 0 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
3.9k
Forks
364
PR merge metrics
No merged PRs in 30d

Description

Only one two of the Header examples actually work on small viewports, and yet there are "twelve" "responsive" components. This feels very misleading and confusing. What's more is that it's entirely unclear which of these components has a menu toggle that works at smaller viewport widths.

At first I thought every menu in the Header components was broken and came here to look for bug reports, but after finding #37 I see that this is apparently expected behavior. As a prospective user of the library, it makes me question the integrity of the other components in Mantine: i.e. am I going to be unpleasantly surprised to find that something else doesn't work as it would appear on the surface?

Regardless of whether the headers are labelled "responsive" or not: what is the point of collapsing a menu behind a toggle button on mobile if the toggle button does nothing at all? I would suggest removing the non-functional components entirely until they can be re-introduced with the functionality implied by the menu toggle button. Otherwise, the examples aren't really showing anything interesting at all – it's easy to toggle the state of an icon, but mobile navigation is hard.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No file or test paths are named. Locate the Header examples described in the issue and compare their behavior across small viewport sizes, especially the menu toggles. Done means the examples labeled responsive are usable at all viewport sizes or are no longer presented as responsive.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.