Skip to content

Fixed the UI inconsistency#1297

Open
Shayan-Bhowmik wants to merge 1 commit into
aryandas2911:mainfrom
Shayan-Bhowmik:inconsistent-ui
Open

Fixed the UI inconsistency#1297
Shayan-Bhowmik wants to merge 1 commit into
aryandas2911:mainfrom
Shayan-Bhowmik:inconsistent-ui

Conversation

@Shayan-Bhowmik
Copy link
Copy Markdown

📌 Description

Fixed the layout inconsistencies on the login/landing viewport so the auth card sits cleanly above the footer without clipping or overlapping.

🔗 Related Issue

Closes #1148

🛠 Changes Made

  • Added extra bottom spacing to the login and 2FA auth wrappers so the card no longer bleeds into the footer area.
  • Kept the auth section contained within a stable viewport height so the background transition looks intentional and balanced.
  • Updated the footer to match the page background style for a more consistent visual flow.

📸 Screenshots (if applicable)

Add screenshots or GIFs to explain UI changes.

✅ Checklist

  • Code runs locally
  • Followed project structure
  • No console errors
  • Properly tested changes
  • Linked the issue

🚀 Notes for Reviewers

Please review the login page spacing on desktop, especially the gap between the card and footer boundary.

Copilot AI review requested due to automatic review settings May 29, 2026 15:12
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Updates auth and footer layout/styling to better align with the app’s theme system and to avoid full-viewport overlaps with the header.

Changes:

  • Adjusted Login page container min-height/padding to account for a fixed header height.
  • Refactored Footer styling from hard-coded colors to shared theme utility classes (app-bg, text-main, border-soft, text-muted).
  • Tweaked footer link/label colors and chip backgrounds for light/dark modes.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 8 comments.

File Description
frontend/src/pages/Login.jsx Updates auth page container sizing/padding to fit within viewport minus header.
frontend/src/components/Footer.jsx Replaces hard-coded footer theme colors with shared theme classes and updates link/chip styles.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

if (tempUserId) {
return (
<div className="auth-page-bg min-h-screen w-full flex items-center justify-center px-6 py-10 overflow-hidden relative">
<div className="auth-page-bg min-h-[calc(100vh-3.75rem)] w-full flex items-center justify-center px-6 pt-10 pb-24 md:pb-32 overflow-hidden relative">

return (
<div className="auth-page-bg min-h-screen w-full flex items-center justify-center px-6 py-10 overflow-hidden relative">
<div className="auth-page-bg min-h-[calc(100vh-3.75rem)] w-full flex items-center justify-center px-6 pt-10 pb-24 md:pb-32 overflow-hidden relative">
if (tempUserId) {
return (
<div className="auth-page-bg min-h-screen w-full flex items-center justify-center px-6 py-10 overflow-hidden relative">
<div className="auth-page-bg min-h-[calc(100vh-3.75rem)] w-full flex items-center justify-center px-6 pt-10 pb-24 md:pb-32 overflow-hidden relative">
{/* Bottom Bar */}
<div className="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4 text-xs font-medium text-gray-400">
<div className="pt-8 border-t border-soft flex flex-col md:flex-row justify-between items-center gap-4 text-xs font-medium text-muted">
<p>© 2026 DailyForge. All rights reserved.</p>
<div>
<h2 className="text-3xl font-extrabold tracking-tight text-white">
<h2 className="text-3xl font-extrabold tracking-tight text-main">
DailyForge<span className="text-[#6dd5c7]">.</span>
{/* Navigation */}
<div className="md:col-span-2">
<h3 className="text-xs font-bold uppercase tracking-widest text-[#6dd5c7] mb-6">
<h3 className="text-xs font-bold uppercase tracking-widest text-[#4eb7b3] mb-6">
<span
key={tech}
className="bg-white/5 border border-white/10 px-3 py-1 rounded-md text-[11px] font-medium text-[#6dd5c7]"
className="bg-white/40 dark:bg-white/5 border border-soft px-3 py-1 rounded-md text-[11px] font-medium text-[#3b8ea0]"
<Heart size={14} className="text-red-400 fill-red-400 animate-pulse" />
<span>for</span>
<span className="text-[#6dd5c7] font-bold">GSSoC 2026</span>
<span className="text-[#4eb7b3] font-bold">GSSoC 2026</span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UI/UX]: Inconsistency in UI of the login page

2 participants