robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: robin:06fa208dd855ac5b44e82935fb195910bb02f574
Branches Tags
robin:master
...
compare: robin:master
Branches Tags
robin:master

2 Commits
06fa208dd8 ... master

Author SHA1 Message Date
robin
467bd88f95 fix: SSR error - check for browser before accessing navigator 
- Add typeof window check in I18nContext useEffect
- Safely access navigator.language with optional chaining
 2026-01-19 23:41:45 +01:00
robin
d75a30f459 fix: Two-row header layout for mobile 
- Row 1: Logo + Logout (always fits)
- Row 2: Session info (left) + Status badges (right)
- No more horizontal scrolling on mobile
 2026-01-19 23:31:49 +01:00
2 changed files with 33 additions and 25 deletions
Expand all files Collapse all files

53
src/app/page.tsx
View File

@@ -184,34 +184,39 @@ export default function Home() {
{/* Scrollable Content Area */}
<div className="flex-1 overflow-y-auto pb-24">
{/* 1. Header */}
<header className="px-4 pt-4 pb-2">
<div className="flex items-center justify-between gap-2">
<div className="flex flex-col shrink-0">
<h1 className="text-2xl font-bold text-zinc-50 tracking-tighter">
DRAM<span className="text-orange-600">LOG</span>
</h1>
{activeSession && (
<div className="flex items-center gap-2 mt-0.5 animate-in fade-in slide-in-from-left-2 duration-700">
<div className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-600 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-orange-600"></span>
</div>
<span className="text-[9px] font-bold uppercase tracking-widest text-orange-600 flex items-center gap-1">
<Sparkles size={10} className="animate-pulse" />
<span className="hidden sm:inline">Live:</span> {activeSession.name}
</span>
<header className="px-4 pt-4 pb-2 space-y-2">
{/* Row 1: Logo + Logout */}
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold text-zinc-50 tracking-tighter">
DRAM<span className="text-orange-600">LOG</span>
</h1>
<button
onClick={handleLogout}
className="text-[10px] font-bold uppercase tracking-widest text-zinc-500 hover:text-white transition-colors"
>
{t('home.logout')}
</button>
</div>
{/* Row 2: Session info + Status */}
<div className="flex items-center justify-between">
{activeSession ? (
<div className="flex items-center gap-2 animate-in fade-in slide-in-from-left-2 duration-700">
<div className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-600 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-orange-600"></span>
</div>
)}
</div>
<span className="text-[9px] font-bold uppercase tracking-widest text-orange-600 flex items-center gap-1">
<Sparkles size={10} className="animate-pulse" />
Live: {activeSession.name}
</span>
</div>
) : (
<div />
)}
<div className="flex items-center gap-2">
<UserStatusBadge />
<OfflineIndicator />
<button
onClick={handleLogout}
className="text-[9px] font-bold uppercase tracking-widest text-zinc-600 hover:text-white transition-colors whitespace-nowrap"
>
{t('home.logout')}
</button>
</div>
</div>
</header>

5
src/i18n/I18nContext.tsx
View File

@@ -22,13 +22,16 @@ export const I18nProvider = ({ children }: { children: ReactNode }) => {
const [isInitialized, setIsInitialized] = useState(false);
useEffect(() => {
// Only run on client side
if (typeof window === 'undefined') return;
// Check for saved preference first
const savedLocale = localStorage.getItem('locale') as Locale;
if (savedLocale && (savedLocale === 'de' || savedLocale === 'en')) {
setLocaleState(savedLocale);
} else {
// Auto-detect from browser: default to English, switch to German if detected
const browserLang = navigator.language.toLowerCase();
const browserLang = navigator.language?.toLowerCase() || 'en';
if (browserLang.startsWith('de')) {
setLocaleState('de');
localStorage.setItem('locale', 'de');