fix views

src/app/page.tsx

@@ -84,16 +84,6 @@ const Page: React.FC = (): React.ReactElement => {
             Document sightings of {APP_CONFIG.description} in {APP_CONFIG.location}
           </p>
           
-          {!isAuthenticated && status !== 'loading' && (
-            <div className="mb-8 p-4 bg-emerald-900/30 rounded-lg inline-block">
-              <a 
-                href="/auth/signin"
-                className="text-white bg-emerald-600 hover:bg-emerald-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
-              >
-                Sign in to get started
-              </a>
-            </div>
-          )}
         </div>
 
         {/* Render content based on authentication status */}

src/components/AuthButton.tsx

@@ -26,16 +26,16 @@ const AuthButton = () => {
 
   if (session?.user) {
     return (
-      <div className="flex items-center space-x-3">
+      <div className="flex items-center gap-2 max-w-[180px]">
         {session.user.image && (
           <img 
             src={session.user.image} 
             alt={session.user.name || 'User'} 
-            className="w-8 h-8 rounded-full"
+            className="w-6 h-6 rounded-full flex-shrink-0"
           />
         )}
-        <div className="flex flex-col">
-          <span className="text-sm font-medium text-emerald-200">
+        <div className="flex flex-col min-w-0">
+          <span className="text-xs font-medium text-emerald-200 truncate">
             {session.user.name}
           </span>
           <button

src/components/Navigation.tsx

@@ -3,28 +3,41 @@
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
+import { useSession } from 'next-auth/react'
 import AuthButton from './AuthButton'
 
 const Navigation = () => {
   const pathname = usePathname()
-
-  const links = [
+  const { data: session } = useSession()
+  const isDevelopment = process.env.NODE_ENV === 'development'
+  
+  // Base navigation links
+  const baseLinks = [
     { href: '/', label: 'Home' },
     { href: '/sightings', label: 'Sightings' },
     { href: '/about', label: 'About' },
-    { href: '/auth/signin', label: 'Sign In' },
-    { href: '/debug', label: 'Debug' },
   ]
+  
+  // Conditionally add Sign In link if not authenticated
+  // removed for duplication
+  //const authLinks = !session ? [{ href: '/auth/signin', label: 'Sign In' }] : []
+  
+  // Conditionally add Debug link in development mode
+  const devLinks = isDevelopment ? [{ href: '/debug', label: 'Debug' }] : []
+  
+  // Combine all links
+  const links = [...baseLinks, ...devLinks]
+  //const links = [...baseLinks, ...authLinks, ...devLinks]
 
   return (
-    <div className="absolute w-full px-4 top-8 flex justify-between items-center bg-gray-900/50 py-2 rounded-lg">
-      <nav>
-        <ul className="flex space-x-6">
+    <div className="fixed w-[calc(100%-2rem)] left-4 right-4 top-8 flex justify-between items-center bg-gray-900/50 py-2 px-4 rounded-lg">
+      <nav className="overflow-hidden">
+        <ul className="flex flex-wrap gap-2">
           {links.map(({ href, label }) => (
             <li key={href}>
               <Link
                 href={href}
-                className={`text-sm transition-colors duration-200 ${
+                className={`text-xs sm:text-sm transition-colors duration-200 ${
                   pathname === href
                     ? 'text-emerald-400 font-bold'
                     : 'text-emerald-200/70 hover:text-emerald-200'
@@ -37,7 +50,7 @@ const Navigation = () => {
         </ul>
       </nav>
       
-      <div className="mr-4 border border-emerald-400/30 px-3 py-1 rounded">
+      <div className="border border-emerald-400/30 px-3 py-1 rounded ml-4 flex-shrink-0">
         <AuthButton />
       </div>
     </div>