fix: remove duplicate site-bg, handle fullscreen promise rejection, unify tooltip language, improve dropdown CSS compat and accessibility

src/app/client/page.tsx

@@ -63,13 +63,13 @@ export default function ClientPage() {
 
   const toggleFullscreen = useCallback(() => {
     if (!document.fullscreenElement) {
-      document.documentElement.requestFullscreen();
+      document.documentElement.requestFullscreen().catch(() => {});
       setIsFullscreen(true);
     } else {
-      document.exitFullscreen();
+      document.exitFullscreen().catch(() => {});
       setIsFullscreen(false);
     }
-  }, []);
+  }, [setIsFullscreen]);
 
   useEffect(() => {
     function onFullscreenChange() {
@@ -183,7 +183,7 @@ export default function ClientPage() {
             background: "linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
             color: "var(--button-text-color, #1a1a2e)",
           }}
-          title="Herladen"
+          title="Reload"
         >
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <polyline points="23 4 23 10 17 10" />
@@ -216,7 +216,7 @@ export default function ClientPage() {
             background: "linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
             color: "var(--button-text-color, #1a1a2e)",
           }}
-          title="Online gebruikers"
+          title="Online users"
         >
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />

src/app/globals.css

@@ -727,7 +727,7 @@ tbody tr:hover {
 .dropdown-menu {
   background-color: var(--color-dropdown);
   border: 1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent);
-  box-shadow: 0 8px 32px color-mix(in srgb, rgb(0 0 0) 20%, transparent);
+  box-shadow: 0 8px 32px color-mix(in srgb, rgb(0, 0, 0) 20%, transparent);
   transform-origin: top right;
   transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
               transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);

src/app/layout.tsx

@@ -64,7 +64,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
               <TopHeader />
               <SiteHeader />
               <Navigation />
-              <main className="overflow-hidden site-bg">
+              <main className="overflow-hidden">
                 <div className="mx-auto mt-10 grid max-w-7xl grid-cols-12 gap-x-3 gap-y-8 p-6 md:mt-0">
                   <div className="col-span-12">{children}</div>
                 </div>

src/components/top-header.tsx

@@ -83,7 +83,7 @@ export async function TopHeader() {
             ) : null}
 
             <details className="relative">
-              <summary className="list-none cursor-pointer flex items-center [&::-webkit-details-marker]:hidden">
+              <summary aria-label="User menu" className="list-none cursor-pointer flex items-center [&::-webkit-details-marker]:hidden">
                 {/* biome-ignore lint/performance/noImgElement: external imager */}
                 <img className="w-[54px] h-[62px] bg-no-repeat bg-center" src={avatar} alt="" />
                 <span className="-ml-2 font-semibold" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>{session.user.name}</span>