Fix mobile viewport: h-screen → h-[100dvh] + scrollable settings
- All pages use 100dvh instead of 100vh (respects Android nav bar) - ProjectSettings: overflow-y-auto + pb-20 for bottom padding
This commit is contained in:
parent
bd583384d1
commit
a9da3672b9
@ -25,7 +25,7 @@ export default function AuthGuard({ children }: { children: React.ReactNode }) {
|
||||
|
||||
if (!checked) {
|
||||
return (
|
||||
<div className="flex h-screen items-center justify-center text-[var(--muted)]">
|
||||
<div className="flex h-[100dvh] items-center justify-center text-[var(--muted)]">
|
||||
Загрузка...
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -107,7 +107,7 @@ export default function ProjectSettings({ project, onUpdated }: Props) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-xl mx-auto p-6 space-y-6">
|
||||
<div className="max-w-xl mx-auto p-6 pb-20 space-y-6 overflow-y-auto h-full">
|
||||
<h2 className="text-lg font-bold">Настройки проекта</h2>
|
||||
|
||||
<div>
|
||||
|
||||
@ -99,7 +99,7 @@ export default function Sidebar({ projects, activeSlug }: Props) {
|
||||
{/* Sidebar: always visible on desktop, slide-in on mobile */}
|
||||
<aside
|
||||
className={`
|
||||
fixed md:static z-50 top-0 left-0 h-screen w-60 shrink-0
|
||||
fixed md:static z-50 top-0 left-0 h-[100dvh] w-60 shrink-0
|
||||
border-r border-[var(--border)] bg-[var(--card)] flex flex-col
|
||||
transition-transform duration-200
|
||||
${open ? "translate-x-0" : "-translate-x-full md:translate-x-0"}
|
||||
|
||||
@ -5,7 +5,7 @@ export default function CreateProjectPage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="flex h-screen items-center justify-center">
|
||||
<div className="flex h-[100dvh] items-center justify-center">
|
||||
<CreateProjectModal
|
||||
onCreated={(project) => navigate(`/projects/${project.slug}`)}
|
||||
onClose={() => navigate(-1)}
|
||||
|
||||
@ -16,7 +16,7 @@ export default function HomePage() {
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex h-screen items-center justify-center text-[var(--muted)]">
|
||||
<div className="flex h-[100dvh] items-center justify-center text-[var(--muted)]">
|
||||
Загрузка...
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -30,7 +30,7 @@ export default function LoginPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen items-center justify-center">
|
||||
<div className="flex h-[100dvh] items-center justify-center">
|
||||
<form onSubmit={handleSubmit} className="w-full max-w-80 px-4">
|
||||
<h1 className="text-3xl font-bold mb-1 text-center">Team Board</h1>
|
||||
<p className="text-[var(--muted)] mb-6 text-center text-sm">AI Agent Collaboration Platform</p>
|
||||
|
||||
@ -43,15 +43,15 @@ export default function ProjectPage() {
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="flex h-screen items-center justify-center text-[var(--muted)]">Загрузка...</div>;
|
||||
return <div className="flex h-[100dvh] items-center justify-center text-[var(--muted)]">Загрузка...</div>;
|
||||
}
|
||||
|
||||
if (!project) {
|
||||
return <div className="flex h-screen items-center justify-center text-[var(--muted)]">Проект не найден</div>;
|
||||
return <div className="flex h-[100dvh] items-center justify-center text-[var(--muted)]">Проект не найден</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-screen">
|
||||
<div className="flex h-[100dvh]">
|
||||
<Sidebar projects={projects} activeSlug={slug} />
|
||||
<main className="flex-1 flex flex-col overflow-hidden">
|
||||
<header className="border-b border-[var(--border)] px-6 py-3 pl-14 md:pl-6">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user