MetaMask / MetaMask/metamask-extension

Update Tabs style to not use position:fixed;

Open
#22,224 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
13.2k
Forks
5.6k
Avg merge
2d 5h
Merged PRs (30d)
451

Description

### What is this about?

Currently, the `Tabs` component is using position:fixed for the tabs menu. This is causing issues. It would be much better to use overflow:scroll on the tabs content

### Scenario

_No response_

### Design

_No response_

### Technical Details

- Update the tabs component to not use position sticky
- Update the tabs content to use overflow scroll instead

### Threat Modeling Framework

_No response_

### Acceptance Criteria

- Tabs do not have a sticky header

### Stakeholder review needed before the work gets merged

- [X] Engineering (needed in most cases)
- [ ] Design
- [ ] Product
- [ ] QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
- [ ] Security
- [ ] Legal
- [ ] Marketing
- [ ] Management (please specify)
- [ ] Other (please specify)

### References

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by locating the Tabs component and inspect its current menu positioning and tabs-content overflow behavior. Update the component so the tabs menu is not fixed or sticky and the content can scroll, then verify that the tabs no longer have a sticky header with the component's existing checks.

Written by the indexing model from the issue text.

Assessment

Tech stack
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.