payloadcms / payloadcms/payload
Overflow issues in nav bar in 'edit dashboard' mode
Open
Nobody has claimed this yet.
area: ui
created-by: Contributor
status: needs-triage
- Dominant language
- TypeScript
- Stars
- 44.8k
- Forks
- 4.2k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 53
Description
Describe the Bug.
There are several issues in the dashboard nav bar when widgets are being used.
1. No gap between language switcher and profile icon
2. Horizontal overflow of 'edit dashboard' buttons
The 'save changes' and 'cancel' buttons overflow with the language switcher buttons, making it difficult to save the dashboard widgets or leave the edit mode.
Reproduction Steps
- open the dashboard on mobile
- see first issue
- press the 'edit dashboard' button
- see second issue
Environment Info
Payload: 3.82.0
Node: 22
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the dashboard on mobile with Payload 3.82.0, then enter edit dashboard mode and inspect the dashboard navigation entry point and its responsive styling. Done means adding visible spacing between the language switcher and profile icon and preventing the save changes and cancel buttons from overflowing.
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
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100