From 1081cec66ea80764779d98d2a6dc049b122e1451 Mon Sep 17 00:00:00 2001
From: Roo Code <roomote@roocode.com>
Date: Mon, 1 Dec 2025 21:27:53 +0000
Subject: [PATCH] fix: prevent navigation buttons from wrapping on smaller
 screens

---
 apps/web-roo-code/src/components/chromes/nav-bar.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web-roo-code/src/components/chromes/nav-bar.tsx b/apps/web-roo-code/src/components/chromes/nav-bar.tsx
index 3e34dc7f904..a01e1e85381 100644
--- a/apps/web-roo-code/src/components/chromes/nav-bar.tsx
+++ b/apps/web-roo-code/src/components/chromes/nav-bar.tsx
@@ -93,13 +93,13 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 					</div>
 				</nav>
 
-				<div className="hidden md:flex md:items-center md:space-x-4">
-					<div className="flex flex-row space-x-2">
+				<div className="hidden md:flex md:items-center md:space-x-4 flex-shrink-0">
+					<div className="flex flex-row space-x-2 flex-shrink-0">
 						<ThemeToggle />
 						<Link
 							href={EXTERNAL_LINKS.GITHUB}
 							target="_blank"
-							className="hidden items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground md:flex">
+							className="hidden items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground md:flex whitespace-nowrap">
 							<RxGithubLogo className="h-4 w-4" />
 							{stars !== null && <span>{stars}</span>}
 						</Link>
@@ -107,7 +107,7 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 					<Link
 						href={EXTERNAL_LINKS.MARKETPLACE}
 						target="_blank"
-						className="hidden items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-all duration-200 hover:shadow-lg hover:scale-105 md:flex">
+						className="hidden items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-all duration-200 hover:shadow-lg hover:scale-105 md:flex whitespace-nowrap">
 						<VscVscode className="-mr-[2px] mt-[1px] h-4 w-4" />
 						<span>
 							Install <span className="font-black max-lg:text-xs">&middot;</span>
@@ -118,7 +118,7 @@ export function NavBar({ stars, downloads }: NavBarProps) {
 						href={EXTERNAL_LINKS.CLOUD_APP_LOGIN}
 						target="_blank"
 						rel="noopener noreferrer"
-						className="hidden items-center gap-1.5 rounded-md py-2 text-sm border border-primary-background px-4 font-medium text-primary-background transition-all duration-200 hover:shadow-lg hover:scale-105 md:flex">
+						className="hidden items-center gap-1.5 rounded-md py-2 text-sm border border-primary-background px-4 font-medium text-primary-background transition-all duration-200 hover:shadow-lg hover:scale-105 md:flex whitespace-nowrap">
 						<Cloud className="inline h-4 w-4" />
 						Log in
 					</a>