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:
Markov 2026-02-27 23:04:39 +01:00
parent bd583384d1
commit a9da3672b9
7 changed files with 9 additions and 9 deletions

View File

@ -25,7 +25,7 @@ export default function AuthGuard({ children }: { children: React.ReactNode }) {
if (!checked) { if (!checked) {
return ( 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> </div>
); );

View File

@ -107,7 +107,7 @@ export default function ProjectSettings({ project, onUpdated }: Props) {
}; };
return ( 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> <h2 className="text-lg font-bold">Настройки проекта</h2>
<div> <div>

View File

@ -99,7 +99,7 @@ export default function Sidebar({ projects, activeSlug }: Props) {
{/* Sidebar: always visible on desktop, slide-in on mobile */} {/* Sidebar: always visible on desktop, slide-in on mobile */}
<aside <aside
className={` 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 border-r border-[var(--border)] bg-[var(--card)] flex flex-col
transition-transform duration-200 transition-transform duration-200
${open ? "translate-x-0" : "-translate-x-full md:translate-x-0"} ${open ? "translate-x-0" : "-translate-x-full md:translate-x-0"}

View File

@ -5,7 +5,7 @@ export default function CreateProjectPage() {
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
<div className="flex h-screen items-center justify-center"> <div className="flex h-[100dvh] items-center justify-center">
<CreateProjectModal <CreateProjectModal
onCreated={(project) => navigate(`/projects/${project.slug}`)} onCreated={(project) => navigate(`/projects/${project.slug}`)}
onClose={() => navigate(-1)} onClose={() => navigate(-1)}

View File

@ -16,7 +16,7 @@ export default function HomePage() {
if (loading) { if (loading) {
return ( 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> </div>
); );

View File

@ -30,7 +30,7 @@ export default function LoginPage() {
}; };
return ( 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"> <form onSubmit={handleSubmit} className="w-full max-w-80 px-4">
<h1 className="text-3xl font-bold mb-1 text-center">Team Board</h1> <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> <p className="text-[var(--muted)] mb-6 text-center text-sm">AI Agent Collaboration Platform</p>

View File

@ -43,15 +43,15 @@ export default function ProjectPage() {
}; };
if (loading) { 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) { 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 ( return (
<div className="flex h-screen"> <div className="flex h-[100dvh]">
<Sidebar projects={projects} activeSlug={slug} /> <Sidebar projects={projects} activeSlug={slug} />
<main className="flex-1 flex flex-col overflow-hidden"> <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"> <header className="border-b border-[var(--border)] px-6 py-3 pl-14 md:pl-6">