🐛 Fix unreadable green line — make dev mode indicator legible#4095
🐛 Fix unreadable green line — make dev mode indicator legible#4095clubanderson merged 2 commits intomainfrom
Conversation
Signed-off-by: Andrew Anderson <andy@clubanderson.com>
The dev mode bar was 5px tall with 6px text, making it look like a CSS bug rather than a purposeful indicator. Now 20px tall with 10px legible "Development Mode" text on a green background. Fixes #4080 Signed-off-by: Andrew Anderson <andy@clubanderson.com>
kubestellar-prow
bot
added
the
dco-signoff: yes
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
|
👋 Hey @clubanderson — thanks for opening this PR!
This is an automated message. |
✅ Deploy Preview for kubestellarconsole ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
kubestellar-prow
bot
added
the
size/XS
|
Thank you for your contribution! Your PR has been merged. Check out what's new:
Stay connected: Slack #kubestellar-dev | Multi-Cluster Survey |
There was a problem hiding this comment.
Pull request overview
Updates the development-only UI indicator at the top of the layout to avoid looking like an unintended CSS artifact, addressing issue #4080. Also includes a README badge change.
Changes:
- Replaced the tiny dev-mode “accent line” with a taller bar and readable “Development Mode” label in
Layout. - Removed the OpenSSF Scorecard badge from
README.md.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| web/src/components/layout/Layout.tsx | Adjusts the dev-mode indicator styling/content intended to clarify the green line is intentional. |
| README.md | Removes an OpenSSF Scorecard badge link. |
| {Array.from({ length: 6 }, (_, i) => ( | ||
| <span key={i} className="text-[6px] font-extrabold uppercase tracking-widest text-green-300 leading-none bg-green-950/60 px-1 py-px rounded-sm">dev mode</span> | ||
| ))} | ||
| <div className="h-5 bg-green-600 flex-shrink-0 z-[60] flex items-center justify-center gap-4"> |
There was a problem hiding this comment.
The dev-mode indicator bar is rendered as a normal-flow element, but the Navbar is fixed top-0 ... z-50 (web/src/components/layout/navbar/Navbar.tsx:50). This means the indicator will sit underneath the navbar (and z-[60] won’t apply because the element isn’t positioned), so the text may still be obscured and the green bar may continue to look like a translucent artifact through the navbar. Consider making the indicator positioned (fixed/sticky/relative) and adjusting the navbar top offset + NAVBAR_HEIGHT/banner offsets accordingly so the bar is truly visible and doesn’t steal layout height behind the fixed navbar.
| <div className="h-5 bg-green-600 flex-shrink-0 z-[60] flex items-center justify-center gap-4"> | |
| <div className="fixed top-0 inset-x-0 h-5 bg-green-600 z-[60] flex items-center justify-center gap-4"> |
| # KubeStellar Console | ||
|
|
||
|  | ||
| [](https://scorecard.dev/viewer/?uri=github.com/kubestellar/console) | ||
| [](https://www.bestpractices.dev/projects/12343) | ||
|
|
There was a problem hiding this comment.
This PR is described as a dev-mode UI legibility fix, but this change removes the OpenSSF Scorecard badge from the README without explanation in the PR description. If this is intentional (e.g., badge endpoint deprecated), please mention it in the PR summary; otherwise, consider reverting to keep the PR scoped to #4080.
🔄 Auto-Applying Copilot Code ReviewCopilot code review found 1 code suggestion(s) and 1 general comment(s). @copilot Please apply all of the following code review suggestions:
Also address these general comments:
Push all fixes in a single commit. Run Auto-generated by copilot-review-apply workflow. |
Summary
The dev mode indicator bar at the top of the viewport was 5px tall with 6px unreadable text, causing users to report it as a CSS bug (#4080).
Now 20px tall with legible 10px "Development Mode" text on a green background — clearly intentional, like VS Code's debug mode bar.
Only visible in development mode (
npm run dev/startup-oauth.sh). Production builds are unaffected.Fixes #4080