arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

fix: improve mobile responsiveness for login and signup pages

Browse source 
Add horizontal padding to page containers so cards don't bleed to the
edges on small screens, reduce card inner padding on mobile, scale down
headings at mobile breakpoints, and change the first/last name grid from
a fixed two-column layout to responsive (single column on mobile).
Replace the fixed-width form class (w-95) with w-full on the login form.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arthur Belleville 2026-04-02 22:16:20 +02:00
parent 3830bfcf29
commit f82d3f70b8
No known key found for this signature in database
2 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/main/src/pages/login.tsx
View file

@ -95,7 +95,7 @@ export function LoginPage() {
};
return (
<div className="min-h-screen flex items-center justify-center bg-linear-to-br from-primary/10 via-background to-secondary/5 animate-gradient-x bg-size-[400%_400%] relative overflow-hidden">
<div className="min-h-screen flex items-center justify-center bg-linear-to-br from-primary/10 via-background to-secondary/5 animate-gradient-x bg-size-[400%_400%] relative overflow-hidden px-4 py-8 sm:px-6">
<AnimatedBackground />
<div
ref={cardRef}
@ -113,7 +113,7 @@ export function LoginPage() {
<div
className={twMerge(
"relative w-full h-full p-8 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10 transition-shadow duration-200",
"relative w-full h-full p-5 sm:p-8 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10 transition-shadow duration-200",
isHovered
? "shadow-[0_15px_35px_rgba(0,0,0,0.15)] dark:shadow-[0_15px_35px_rgba(0,0,0,0.3)]"
: "shadow-xl shadow-black/10 dark:shadow-black/25"
@ -161,7 +161,7 @@ export function LoginPage() {
/>
</div>
<h1 className="text-3xl font-bold text-foreground mb-8 text-center">
<h1 className="text-2xl sm:text-3xl font-bold text-foreground mb-6 sm:mb-8 text-center">
{t("auth:login.title")}
</h1>
@ -175,7 +175,7 @@ export function LoginPage() {
</div>
<div className="space-y-4 flex flex-col items-center">
<form className="space-y-4 w-95 max-w-md mx-auto" onSubmit={onSubmit}>
<form className="space-y-4 w-full max-w-md mx-auto" onSubmit={onSubmit}>
<div className="space-y-2">
<Label htmlFor="email">
{t("common:labels.email")} <span className="text-red-500">*</span>

8
apps/main/src/pages/signup.tsx
View file

@ -151,7 +151,7 @@ export function SignUpPage() {
};
return (
<div className="min-h-screen flex items-center justify-center bg-linear-to-br from-primary/10 via-background to-secondary/5 animate-gradient-x bg-size-[400%_400%] relative overflow-hidden">
<div className="min-h-screen flex items-center justify-center bg-linear-to-br from-primary/10 via-background to-secondary/5 animate-gradient-x bg-size-[400%_400%] relative overflow-hidden px-4 py-8 sm:px-6">
<AnimatedBackground />
<div
ref={cardRef}
@ -168,7 +168,7 @@ export function SignUpPage() {
<div
className={twMerge(
"relative w-full h-full p-6 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10 transition-shadow duration-200",
"relative w-full h-full p-4 sm:p-6 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10 transition-shadow duration-200",
isHovered
? "shadow-[0_15px_35px_rgba(0,0,0,0.15)] dark:shadow-[0_15px_35px_rgba(0,0,0,0.3)]"
: "shadow-xl shadow-black/10 dark:shadow-black/25"
@ -216,13 +216,13 @@ export function SignUpPage() {
/>
</div>
<h1 className="text-2xl font-bold text-foreground mb-6 text-center">
<h1 className="text-xl sm:text-2xl font-bold text-foreground mb-5 sm:mb-6 text-center">
{t("auth:signup.title")}
</h1>
<div className="space-y-3 flex flex-col items-center">
<form className="space-y-3 w-full" onSubmit={onSubmit}>
<div className="grid grid-cols-2 gap-3">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div className="space-y-2">
<Label htmlFor="first_name" className="text-sm">
{t("auth:signup.firstName")} <span className="text-red-500">*</span>