antv/thankcard-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve login button overflow and improve form layout spacing

Browse Source
This commit is contained in:
antv
2026-06-30 16:16:56 +07:00
parent 8cbdd93e56
commit d99541b7e4
5 changed files with 39 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/login.blade.php
+32 -11
View File
@@ -6,12 +6,21 @@
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>GMO-Z.com RUNSYSTEM - {{ __('auth.login') }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-fade-in {
animation: fadeIn 0.3s ease-in-out forwards;
}
</style>
</head>
<body class="bg-[#f0f4f9] min-h-screen flex items-center justify-center font-sans antialiased overflow-x-hidden">
<div class="relative w-full max-w-6xl mx-auto px-4 flex flex-col lg:flex-row items-center justify-between gap-12 py-10">
<div class="flex-1 flex flex-col items-center">
<div class="relative w-full max-w-[680px] aspect-[16/10.5] bg-[#1e293b] rounded-t-2xl p-3 shadow-2xl border border-slate-700">
<div class="relative w-full max-w-[680px] min-h-[490px] lg:aspect-[16/10.5] lg:min-h-0 bg-[#1e293b] rounded-t-2xl p-3 shadow-2xl border border-slate-700">
<div class="w-full h-full bg-[#f0f4f9] rounded-lg overflow-hidden flex flex-col justify-between p-6 relative">
<div class="absolute inset-0 pointer-events-none opacity-20">
<svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
@@ -23,20 +32,32 @@
<img src="{{ asset('images/logo.png') }}" alt="GMO-Z.com RUNSYSTEM" class="h-10 w-auto object-contain">
</div>
<div class="w-full max-w-[380px] mx-auto z-10 space-y-6 my-auto">
<div class="w-full max-w-[380px] mx-auto z-10 space-y-4 my-auto">
<h3 class="text-2xl font-bold text-center text-[#1e293b]">{{ __('auth.login') }}</h3>
<form action="{{ route('login') }}" method="POST" class="space-y-6">
<form action="{{ route('login') }}" method="POST" class="space-y-3.5">
@csrf
@if($errors->any())
<div class="bg-red-50 text-red-600 text-sm font-semibold p-3 rounded-lg border border-red-200 shadow-sm flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
<span>{{ $errors->first() }}</span>
</div>
@endif
<!-- Reserved Error Area to Prevent Layout Shift (CLS) -->
<div class="min-h-[52px] flex items-center justify-center transition-all duration-300" aria-live="polite">
@if($errors->any())
<div class="w-full bg-red-50 text-red-600 text-xs sm:text-sm font-semibold p-2.5 rounded-lg border border-red-200 shadow-sm flex items-start gap-2 animate-fade-in transition-opacity duration-300 ease-in-out opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0 mt-0.5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span class="leading-normal">{{ $errors->first() }}</span>
</div>
@else
<div class="w-full opacity-0 pointer-events-none select-none" aria-hidden="true">
<div class="p-2.5 text-xs sm:text-sm border border-transparent flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24"></svg>
<span class="leading-normal">&nbsp;</span>
</div>
</div>
@endif
</div>
<div class="form-group !mb-5">
<div class="form-group">
<label class="form-label !mb-1.5 uppercase tracking-wider text-xs">{{ __('auth.email') }} <span class="text-red-500">*</span></label>
<div class="form-input-group">
<span class="form-input-icon">
@@ -48,7 +69,7 @@
</div>
</div>
<div class="form-group !mb-6">
<div class="form-group">
<label class="form-label !mb-1.5 uppercase tracking-wider text-xs">{{ __('auth.password') }} <span class="text-red-500">*</span></label>
<div class="form-input-group">
<span class="form-input-icon">