Gerhard Scheikl
0fbabdad31
- Add explicit viewport meta (device-width) for proper mobile scaling. - Widen the main container (720 -> 960, 1120 on >=1280px) with fluid clamp() padding so wide screens are used better. - Wrap the top nav and allow it to reflow on narrow screens. - Collapse the key/value grid to a single column and enlarge touch targets on small screens. - Keep single-form pages (login/signup/activate) in a readable narrow column instead of stretching full width.
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import type { Metadata, Viewport } from 'next';
|
|
import Link from 'next/link';
|
|
import './globals.css';
|
|
import { createSupabaseServerClient } from '@/lib/supabase/server';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'LinumIQ Tunnels',
|
|
description: 'Remote access tunnels for Home Assistant',
|
|
};
|
|
|
|
export const viewport: Viewport = {
|
|
width: 'device-width',
|
|
initialScale: 1,
|
|
};
|
|
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
export default async function RootLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const supabase = createSupabaseServerClient();
|
|
const {
|
|
data: { user },
|
|
} = await supabase.auth.getUser();
|
|
const isAdmin = user?.app_metadata?.role === 'admin';
|
|
|
|
return (
|
|
<html lang="en">
|
|
<body>
|
|
<nav className="nav">
|
|
<Link href="/" style={{ color: 'var(--fg)', fontWeight: 600 }}>
|
|
LinumIQ Tunnels
|
|
</Link>
|
|
<div className="row">
|
|
{user ? (
|
|
<>
|
|
<Link href="/dashboard">Dashboard</Link>
|
|
<Link href="/billing">Billing</Link>
|
|
<Link href="/security">Security</Link>
|
|
{isAdmin && <Link href="/admin">Admin</Link>}
|
|
<form action="/api/auth/signout" method="post" style={{ margin: 0 }}>
|
|
<button className="secondary" type="submit">
|
|
Sign out
|
|
</button>
|
|
</form>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link href="/login">Login</Link>
|
|
<Link href="/signup" className="btn">
|
|
Sign up
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
<main className="container">{children}</main>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|