Merge origin/main into navbar CTA fix

Co-authored-by: naheel0 <191262736+naheel0@users.noreply.github.com>

Author: Copilot

src/components/GitHubLoginButton.tsx

@@ -5,11 +5,13 @@ import { Github, LogIn, LogOut } from "lucide-react";
 type GitHubLoginButtonProps = {
   onBeforeSignIn?: () => void;
   showScopeNote?: boolean;
+  compact?: boolean;
 };
 
 export default function GitHubLoginButton({
   onBeforeSignIn,
   showScopeNote = false,
+  compact = false,
 }: GitHubLoginButtonProps) {
   const { data: session, status } = useSession();
   const displayName =
@@ -19,37 +21,37 @@ export default function GitHubLoginButton({
 
   if (session) {
     return (
-      <div className="flex flex-wrap items-center gap-2">
-        <div className="hidden sm:flex items-center gap-2 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-2 text-xs font-medium text-emerald-200">
-          <Github size={14} />
+      <div className="flex min-w-0 flex-wrap items-center justify-end gap-2">
+        <div className="hidden min-h-10 items-center gap-2 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-2 text-xs font-medium text-emerald-200 sm:inline-flex">
+          <Github size={14} className="shrink-0" />
           <span className="max-w-[150px] truncate">{displayName}</span>
         </div>
         <button
           onClick={() => signOut()}
-          className="inline-flex items-center justify-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-white transition-all hover:border-white/25 hover:bg-white/10"
+          className="inline-flex min-h-10 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-sm font-medium leading-none text-white transition-all hover:border-white/25 hover:bg-white/10 sm:px-4 sm:py-2"
         >
-          <LogOut size={14} />
-          Sign out
+          <LogOut size={14} className="shrink-0" />
+          <span>{compact ? "Out" : "Sign out"}</span>
         </button>
       </div>
     );
   }
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex min-w-0 flex-col items-end gap-2 sm:items-center">
       <button
         onClick={() => {
           onBeforeSignIn?.();
           signIn("github");
         }}
-        className="inline-flex items-center justify-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white transition-colors hover:border-white/15 hover:bg-white/[0.07]"
+        className="inline-flex min-h-10 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-sm font-semibold leading-none text-white transition-colors hover:border-white/15 hover:bg-white/[0.07] sm:px-4 sm:py-2"
       >
-        <Github size={15} />
-        <LogIn size={14} />
-        Login with GitHub
+        <Github size={15} className="shrink-0" />
+        {!compact && <LogIn size={14} className="shrink-0" />}
+        <span>{compact ? "Login" : "Login with GitHub"}</span>
       </button>
       {showScopeNote && (
-        <p className="text-xs text-neutral-400">
+        <p className="max-w-[220px] text-right text-xs leading-snug text-neutral-400 sm:max-w-xs sm:text-left">
           We request GitHub’s “repo” scope to read private repo contents for
           README generation.
         </p>

src/components/layout/Navbar.tsx

@@ -21,62 +21,62 @@ export const Navbar = ({
 
   return (
     <nav
-      className={`fixed top-0 w-full z-50 transition-all duration-300 ${
+      className={`fixed top-0 z-50 w-full transition-all duration-300 ${
         scrolled
-          ? "bg-black/80 backdrop-blur-md border-b border-white/10 py-3"
+          ? "border-b border-white/10 bg-black/80 py-3 backdrop-blur-md"
           : "bg-transparent py-5"
       }`}
     >
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center">
-          <div className="flex flex-1 items-center">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex min-w-0 items-center">
+          <div className="flex min-w-0 flex-1 items-center">
             {/* Brand Logo */}
             <Link
               href="/"
-              className="flex items-center gap-3 group cursor-pointer"
+              className="group flex min-w-0 cursor-pointer items-center gap-3"
               aria-label="ReadmeGenAI Home"
             >
-              <div className="relative w-9 h-9 bg-white rounded-lg flex items-center justify-center overflow-hidden transition-transform group-hover:rotate-3">
-                <span className="text-black font-black text-xl">R</span>
+              <div className="relative flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-white transition-transform group-hover:rotate-3">
+                <span className="text-xl font-black text-black">R</span>
               </div>
-              <span className="font-bold text-xl tracking-tighter">
+              <span className="truncate text-lg font-bold tracking-tighter sm:text-xl">
                 ReadmeGenAI
               </span>
             </Link>
           </div>
 
           {/* Desktop Menu */}
-          <div className="hidden md:flex items-center justify-center space-x-1">
+          <div className="hidden items-center justify-center space-x-1 md:flex">
             {links.map((link) => (
               <a
                 key={link.name}
                 href={link.href}
-                className="px-4 py-2 text-sm font-medium text-gray-400 hover:text-white transition-colors"
+                className="px-4 py-2 text-sm font-medium text-gray-400 transition-colors hover:text-white"
               >
                 {link.name}
               </a>
             ))}
           </div>
 
           {/* Action Buttons */}
-          <div className="flex flex-1 items-center justify-end gap-3">
-            <GitHubLoginButton />
+          <div className="flex min-w-0 flex-1 items-center justify-end gap-2 sm:gap-3">
+            <GitHubLoginButton compact />
 
             {/* Using an anchor tag with button styling for the GitHub Link */}
             <a
               href="https://github.com/BeyteFlow/ReadmeGenAI"
               target="_blank"
               rel="noopener noreferrer"
-              className="hidden sm:flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 hover:border-white/30 hover:bg-white/10 transition-all text-xs font-medium"
+              className="hidden min-h-10 shrink-0 items-center gap-2 whitespace-nowrap rounded-full border border-white/10 bg-white/5 px-4 py-1.5 text-xs font-medium transition-all hover:border-white/30 hover:bg-white/10 sm:flex"
             >
-              <Github size={14} />
+              <Github size={14} className="shrink-0" />
               <span>Star on GitHub</span>
             </a>
 
             {/* Mobile Menu Toggle using your custom Button component (Ghost variant) */}
             <Button
               variant="ghost"
-              className="md:hidden p-2 px-2"
+              className="min-h-10 shrink-0 p-2 px-2 md:hidden"
               onClick={() => setIsMenuOpen(!isMenuOpen)}
               aria-label="Toggle Menu"
             >
@@ -88,7 +88,7 @@ export const Navbar = ({
 
       {/* Mobile Menu Drawer */}
       {isMenuOpen && (
-        <div className="md:hidden bg-black border-b border-white/10 px-4 py-6 space-y-4 animate-in slide-in-from-top duration-300">
+        <div className="space-y-4 border-b border-white/10 bg-black px-4 py-6 animate-in slide-in-from-top duration-300 md:hidden">
           {links.map((link) => (
             <a
               key={link.name}
@@ -103,7 +103,7 @@ export const Navbar = ({
           <Button
             asChild
             variant="primary"
-            className="w-full justify-center mt-4"
+            className="mt-4 w-full justify-center"
           >
             <a
               href="https://github.com/BeyteFlow/ReadmeGenAI"