UI: Navigation tab bar width inconsistent with main container on Quality Dashboard
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 22
- Forks
- 17
- Avg merge
- 4d 8h
- Merged PRs (30d)
- 1
Description
### Current Behavior
On the qa.meshery.io dashboard, the navigation tab bar (containing Results, Quality Gates, etc.) does not consistently follow the width of the main content container. When switching between different tabs, the navigation elements appear to shift or overflow, leading to a visual misalignment where the tab bar layout does not respect the boundaries established by the rest of the dashboard components.
### Expected Behavior
The navigation bar should be strictly constrained to the same container width as the dashboard content below it. Switching between tabs should maintain a consistent horizontal alignment and width across the entire user interface, ensuring a uniform layout.
### Screenshots/Logs
https://github.com/user-attachments/assets/a4994277-4966-4cd5-9b42-fb06d01caeed
### Environment
- **Host OS:** Mac (Arc)
---
### Contributor [Guides](https://docs.meshery.io/project/contributing) and [Handbook](https://layer5.io/community/handbook)
- 🛠 [Meshery Build & Release Strategy](https://docs.meshery.io/project/contributing/build-and-release)
- 📚 [Instructions for contributing to documentation](https://github.com/meshery/meshery/blob/master/CONTRIBUTING.md#documentation-contribution-flow)
- Meshery documentation [site](https://docs.meshery.io/) and [source](https://github.com/meshery/meshery/tree/master/docs)
- 🎨 Wireframes and [designs for Meshery UI](https://www.figma.com/file/SMP3zxOjZztdOLtgN4dS2W/Meshery-UI) in Figma [(open invite)](https://www.figma.com/team_invite/redeem/GvB8SudhEOoq3JOvoLaoMs)
- 🙋🏾🙋🏼 Questions: [Discussion Forum](https://meshery.io/community#community-forums) and [Community Slack](https://slack.meshery.io)
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
Start at the Quality Dashboard on qa.meshery.io and switch between the Results and Quality Gates tabs while comparing the navigation bar with the main content container. Inspect the frontend entry point responsible for the dashboard navigation and layout. Done means the tab bar stays aligned to the same container width and does not shift or overflow across tabs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100