🐛 Replace dev mode bar with small DEV badge in navbar by clubanderson · Pull Request #4167 · kubestellar/console

clubanderson · 2026-04-01T14:19:57Z

Summary

Replaces the full-width green "Development Mode" bar with a small green "DEV" badge pill in the navbar, next to the app title. Much less intrusive.

Removed the 20px bar from Layout.tsx
Removed devBarOffset layout shift calculations
Removed topOffset prop from Navbar
Added __DEV_MODE__ badge in Navbar between title and docs link

Fixes #4149

Test plan

Dev mode: small green "DEV" badge visible in navbar
Production mode: no badge shown
No layout shift — navbar stays at top:0

The full-width green bar was too intrusive. Replaced with a small green "DEV" badge pill next to the app title in the navbar. Removed the devBarOffset layout shift logic since the bar no longer exists. Fixes #4149 Signed-off-by: Andrew Anderson <andy@clubanderson.com>

kubestellar-prow · 2026-04-01T14:20:02Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign clubanderson for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

netlify · 2026-04-01T14:20:03Z

✅ Deploy Preview for kubestellarconsole ready!

Name	Link
🔨 Latest commit	`a9e6ab9`
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellarconsole/deploys/69cd29905a1abf00078e762b
😎 Deploy Preview	https://deploy-preview-4167.console-deploy-preview.kubestellar.io
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Pull request overview

Replaces the full-width development-mode bar with a small “DEV” badge in the navbar, removing related layout offset calculations.

Changes:

Removed the dev-mode top bar from Layout and simplified banner stacking offsets.
Simplified Navbar API by removing topOffset and pinning it to the top.
Added a conditional “DEV” badge in Navbar when __DEV_MODE__ is enabled.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
web/src/components/layout/navbar/Navbar.tsx	Removes `topOffset` positioning and adds a conditional DEV badge in the left navbar cluster.
web/src/components/layout/Layout.tsx	Removes dev bar rendering and offset math; updates padding/banner top calculations accordingly.

Copilot · 2026-04-01T14:26:28Z

web/src/components/layout/navbar/Navbar.tsx


  return (
-    <nav data-tour="navbar" style={{ top: topOffset }} className="fixed left-0 right-0 h-16 glass z-50 px-3 md:px-6 flex items-center justify-between">
+    <nav data-tour="navbar" style={{ top: 0 }} className="fixed left-0 right-0 h-16 glass z-50 px-3 md:px-6 flex items-center justify-between">


Inline style={{ top: 0 }} is redundant here and recreates a new object every render. Prefer using Tailwind (top-0) and removing the inline style prop to keep positioning in CSS and reduce avoidable render churn.

Suggested change

<nav data-tour="navbar" style={{ top: 0 }} className="fixed left-0 right-0 h-16 glass z-50 px-3 md:px-6 flex items-center justify-between">

<nav data-tour="navbar" className="fixed top-0 left-0 right-0 h-16 glass z-50 px-3 md:px-6 flex items-center justify-between">

Copilot · 2026-04-01T14:26:29Z

web/src/components/layout/navbar/Navbar.tsx

          <span className="text-base md:text-lg font-semibold text-foreground">{branding.appName}</span>
          <span className="text-[10px] text-muted-foreground tracking-wide">{branding.tagline}</span>
        </button>
+        {__DEV_MODE__ && (
+          <span
+            className="hidden sm:inline-flex items-center justify-center px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider bg-green-500/20 text-green-400 border border-green-500/30 rounded-full"
+            title="Development mode"
+          >
+            DEV
+          </span>
+        )}
        <a


The PR description says the DEV badge appears “next to the app title” and “between title and docs link,” but the responsive visibility doesn’t line up: the title is hidden lg:flex while the badge is hidden sm:inline-flex and the docs link is hidden lg:flex. On sm/md, the badge can appear without the title and without the docs link. Consider aligning breakpoints (e.g., show the badge at lg+ only, or make the title visible at the same breakpoint as the badge) so behavior matches the stated intent.

Copilot · 2026-04-01T14:26:29Z

web/src/components/layout/navbar/Navbar.tsx

+        {__DEV_MODE__ && (
+          <span
+            className="hidden sm:inline-flex items-center justify-center px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider bg-green-500/20 text-green-400 border border-green-500/30 rounded-full"
+            title="Development mode"
+          >
+            DEV
+          </span>
+        )}


The badge relies on title for meaning, which isn’t consistently announced by screen readers. Add an accessible name (e.g., aria-label=\"Development mode\") and/or include screen-reader-only text so the dev indicator is conveyed non-visually.

- Navbar: Remove redundant inline style={{ top: 0 }}, use Tailwind top-0 class instead (#4167) - DEV badge: Add aria-label + role="status", match lg: breakpoint with title visibility (#4167) - FeedbackModal: Use refs for dirty check in handleClose to prevent keydown listener churn on every keystroke (#4161) Signed-off-by: Andrew Anderson <andy@clubanderson.com>

…#4171) - Navbar: Remove redundant inline style={{ top: 0 }}, use Tailwind top-0 class instead (#4167) - DEV badge: Add aria-label + role="status", match lg: breakpoint with title visibility (#4167) - FeedbackModal: Use refs for dirty check in handleClose to prevent keydown listener churn on every keystroke (#4161) Signed-off-by: Andrew Anderson <andy@clubanderson.com>

github-actions · 2026-04-01T14:56:42Z

Thank you for your contribution! Your PR has been merged.

Check out what's new:

KubeStellar Console — Live multi-cluster dashboard
Marketplace — Community extensions
Knowledge Base — Troubleshooting and how-tos

Stay connected: Slack #kubestellar-dev | Multi-Cluster Survey

github-actions · 2026-04-01T14:56:48Z

👋 Hey @clubanderson — thanks for opening this PR!

🤖 This project is developed exclusively using AI coding assistants.

Please do not attempt to code anything for this project manually.
All contributions should be authored using an AI coding tool such as:

Claude Code (Opus 4.5 / 4.6) — recommended

GitHub Copilot

Cursor

Other AI coding assistants

This ensures consistency in code style, architecture patterns, test coverage,
and commit quality across the entire codebase.

This is an automated message.

clubanderson · 2026-04-01T14:58:37Z

🔄 Auto-Applying Copilot Code Review

Copilot code review found 1 code suggestion(s) and 2 general comment(s).

@copilot Please apply all of the following code review suggestions:

web/src/components/layout/navbar/Navbar.tsx (line 51): <nav data-tour="navbar" className="fixed top-0 left-0 right-0 h-16 glass z-50 px...

Also address these general comments:

web/src/components/layout/navbar/Navbar.tsx (line 93): The PR description says the DEV badge appears “next to the app title” and “between title and docs link,” but the respons
web/src/components/layout/navbar/Navbar.tsx (line 92): The badge relies on title for meaning, which isn’t consistently announced by screen readers. Add an accessible name (e

Push all fixes in a single commit. Run cd web && npm run build && npm run lint before committing.

Auto-generated by copilot-review-apply workflow.

Copilot AI review requested due to automatic review settings April 1, 2026 14:19

clubanderson merged commit 9311e67 into main Apr 1, 2026

kubestellar-prow bot added the dco-signoff: yes Indicates the PR's author has signed the DCO. label Apr 1, 2026

kubestellar-prow bot deleted the fix/dev-badge-navbar branch April 1, 2026 14:20

kubestellar-prow bot added the size/M Denotes a PR that changes 30-99 lines, ignoring generated files. label Apr 1, 2026

Copilot AI reviewed Apr 1, 2026

View reviewed changes

clubanderson mentioned this pull request Apr 1, 2026

🐛 Address Copilot comments: DEV badge a11y, navbar style, ESC handler churn #4171

Merged

clubanderson assigned Copilot Apr 1, 2026

Copilot started reviewing on behalf of clubanderson April 1, 2026 14:59 View session

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🐛 Replace dev mode bar with small DEV badge in navbar#4167

🐛 Replace dev mode bar with small DEV badge in navbar#4167
clubanderson merged 1 commit intomainfrom
fix/dev-badge-navbar

clubanderson commented Apr 1, 2026

Uh oh!

kubestellar-prow bot commented Apr 1, 2026

Uh oh!

netlify bot commented Apr 1, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

github-actions bot commented Apr 1, 2026

Uh oh!

github-actions bot commented Apr 1, 2026

Uh oh!

clubanderson commented Apr 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	<nav data-tour="navbar" style={{ top: 0 }} className="fixed left-0 right-0 h-16 glass z-50 px-3 md:px-6 flex items-center justify-between">
	<nav data-tour="navbar" className="fixed top-0 left-0 right-0 h-16 glass z-50 px-3 md:px-6 flex items-center justify-between">

Conversation

clubanderson commented Apr 1, 2026

Summary

Test plan

Uh oh!

kubestellar-prow bot commented Apr 1, 2026

Uh oh!

netlify bot commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for kubestellarconsole ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Apr 1, 2026

Uh oh!

github-actions bot commented Apr 1, 2026

Uh oh!

clubanderson commented Apr 1, 2026

🔄 Auto-Applying Copilot Code Review

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify bot commented Apr 1, 2026 •

edited

Loading