meshery / meshery/qa

UI: Navigation tab bar width inconsistent with main container on Quality Dashboard

Open
#58 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

issue/duplicate
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

Open the contributing guide

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.