fix(ui): remove top header login button, fix mobile viewport cropping, update footer CTA to slate gray

src/components/Header/Header.tsx

@@ -5,8 +5,6 @@ import {
   Bell,
   Menu,
   Calendar,
-  LogIn,
-  Check,
   X,
   BookOpen,
   Bus,
@@ -15,8 +13,6 @@ import {
   Code2,
   Trophy,
   Bot,
-  Rocket,
-  ChevronRight
 } from 'lucide-react';
 import { useAuth } from '@/context/AuthContext';
 import { BUS_ROUTES, FACULTY_DATA, CLUBS_DATA } from '@/constants';
@@ -40,7 +36,7 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
   const [isNotifOpen, setIsNotifOpen] = useState(false);
   const [currentDate, setCurrentDate] = useState('');
   const navigate = useNavigate();
-  const { user, isAuthenticated, isVerifiedStudent, loginWithGoogle } = useAuth();
+  const { user, isAuthenticated, isVerifiedStudent } = useAuth();
   const notifRef = useRef<HTMLDivElement>(null);
   const searchRef = useRef<HTMLDivElement>(null);
 
@@ -180,24 +176,24 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
   };
 
   return (
-    <header className="sticky top-0 z-30 w-full bg-white/90 backdrop-blur-md border-b border-slate-200/80 px-4 lg:px-8 py-3 flex items-center justify-between shadow-xs">
-      <div className="flex items-center gap-4">
+    <header className="sticky top-0 z-30 w-full bg-white/90 backdrop-blur-md border-b border-slate-200/80 px-3 sm:px-4 lg:px-8 py-3 flex items-center justify-between shadow-xs">
+      <div className="flex items-center gap-2.5 sm:gap-4 min-w-0 flex-1">
         {/* Mobile Toggle */}
         <button
           onClick={onToggleSidebar}
-          className="lg:hidden p-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 transition-colors cursor-pointer"
+          className="lg:hidden p-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 transition-colors cursor-pointer shrink-0"
           title="Toggle Navigation Menu"
         >
           <Menu className="w-5 h-5" />
         </button>
 
         {/* Global Interactive Search Input Container */}
-        <div className="relative" ref={searchRef}>
+        <div className="relative min-w-0 flex-1 max-w-[210px] xs:max-w-[260px] sm:max-w-xs md:max-w-md" ref={searchRef}>
           <div
             onClick={() => setIsSearchOpen(true)}
-            className="relative w-64 sm:w-80 md:w-96 cursor-text"
+            className="relative w-full cursor-text"
           >
-            <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
             <input
               type="text"
               value={searchQuery}
@@ -206,8 +202,8 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
                 setIsSearchOpen(true);
               }}
               onFocus={() => setIsSearchOpen(true)}
-              placeholder="Search notes, faculty, bus routes, clubs..."
-              className="w-full pl-10 pr-12 py-2 text-xs font-medium bg-slate-100/90 hover:bg-slate-100 focus:bg-white border border-transparent focus:border-indigo-500/40 rounded-xl text-slate-800 placeholder-slate-400 outline-none transition-all shadow-inner"
+              placeholder="Search notes, faculty, bus routes..."
+              className="w-full pl-9 pr-8 sm:pr-12 py-2 text-xs font-medium bg-slate-100/90 hover:bg-slate-100 focus:bg-white border border-transparent focus:border-indigo-500/40 rounded-xl text-slate-800 placeholder-slate-400 outline-none transition-all shadow-inner truncate"
               style={{ fontFamily: 'Inter, sans-serif' }}
             />
             <span className="hidden sm:inline-flex absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-semibold text-slate-400 bg-white border border-slate-200 px-1.5 py-0.5 rounded-md shadow-2xs">
@@ -291,7 +287,7 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
       </div>
 
       {/* Right Header Status Bar */}
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-2 sm:gap-3 shrink-0">
         {/* Date Display Badge */}
         <div className="hidden md:flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-100 text-slate-600 text-xs font-medium border border-slate-200/60">
           <Calendar className="w-3.5 h-3.5 text-indigo-600" />
@@ -376,8 +372,8 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
           )}
         </div>
 
-        {/* User Auth Quick Badge */}
-        {isAuthenticated && user ? (
+        {/* User Auth Quick Badge (If Logged In) */}
+        {isAuthenticated && user && (
           <div className="flex items-center gap-2 pl-2 border-l border-slate-200">
             {user.pictureUrl ? (
               <img
@@ -400,17 +396,9 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
               </span>
             </div>
           </div>
-        ) : (
-          <button
-            onClick={loginWithGoogle}
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold shadow-sm transition-all cursor-pointer"
-            style={{ fontFamily: 'Poppins, sans-serif' }}
-          >
-            <LogIn className="w-3.5 h-3.5" />
-            <span>Sign In</span>
-          </button>
         )}
       </div>
     </header>
   );
 }
+