From 8c8618bc930bd6614f77d02bcee0bcca780ce07a Mon Sep 17 00:00:00 2001
From: Tarulata Priya <tarulatapriya@gmail.com>
Date: Sun, 30 Aug 2026 13:39:26 +0530
Subject: [PATCH] feat: improve navbar responsiveness across all device sizes
 #1295

---
 src/app/layout.tsx | 20 ++++++++++++++++----
 src/app/page.tsx   |  9 ---------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f16cedb2..e962db27 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -78,13 +78,25 @@ export default function RootLayout({
           <ErrorBoundary>
             <header
               role="banner"
-              className="sticky top-0 z-50 flex items-center justify-between border-b border-[var(--border)] bg-[var(--bg)]/95 px-6 py-3 backdrop-blur"
+              className="sticky top-0 z-50 flex items-center justify-between border-b border-[var(--border)] bg-[var(--bg)]/95 px-4 sm:px-6 py-3 backdrop-blur"
             >
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2 flex-shrink-0">
                 <BrandLogo size={24} />
-                <h1 className="text-lg font-semibold">Reframe</h1>
+                <h1 className="text-lg font-semibold tracking-tight">Reframe</h1>
+              </div>
+              
+              <div className="flex items-center gap-2 sm:gap-4 flex-shrink-0">
+                <a
+                  href="https://github.com/magic-peach/reframe"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="View Reframe on GitHub"
+                  className="flex items-center gap-1.5 px-2 sm:px-3 py-1.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[10px] font-heading font-semibold uppercase tracking-wider transition-all duration-200 ease-in-out hover:scale-105 hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:shadow-[var(--shadow)]"
+                >
+                  ⭐ <span className="hidden sm:inline">Star on GitHub</span>
+                </a>
+                <ThemeToggle />
               </div>
-              <ThemeToggle />
             </header>
             <main id="main-content" tabIndex={-1}>
               {children}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 188ed440..bfef4ab5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,15 +4,6 @@ import Footer from "@/components/Footer";
 export default function Home() {
   return (
     <>
-      <a
-        href="https://github.com/magic-peach/reframe"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="View Reframe on GitHub"
-        className="hidden sm:flex fixed top-4 right-4 md:right-16 z-50 items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[var(--border)] bg-[var(--surface)] text-[10px] font-heading font-semibold uppercase tracking-wider transition-all duration-200 ease-in-out hover:scale-105 hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:shadow-[var(--shadow)]"
-      >
-        ⭐ Star on GitHub
-      </a>
 
       <main id="main-content" tabIndex={-1}>
         <VideoEditor />