fix: Revamp CSS for Login Screen#55
Conversation
There was a problem hiding this comment.
Pull request overview
Revamps styling intended for the login screen by updating shared layout rules in styles/global.css, which is included across the app via the common header.
Changes:
- Restyles global
bodyto a centered full-viewport flex layout with a gradient background. - Updates
#headerto a flex-based layout and adjusts header text/form spacing. - Converts
#contentinto a narrow “card” container and modifiesform#settings tdspacing.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| max-width: 500px; | ||
| padding: 40px; | ||
| border-radius: 8px; | ||
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
There was a problem hiding this comment.
div#content is used by many pages (admin screens, register, evaluate, etc.) and historically sized for the app layout (e.g., other global elements are fixed ~1000px wide). Changing it to max-width: 500px with card-like styling will shrink/wrap all content site-wide and likely break tables/forms. If the intent is only to restyle the login screen, scope these #content changes to the login page (or a more specific selector) rather than the global div#content rule.
| max-width: 500px; | |
| padding: 40px; | |
| border-radius: 8px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
| form#settings td { | ||
| padding: 10px 0; | ||
| margin: 0; | ||
| vertical-align: top; | ||
| width: 100%; | ||
| } |
There was a problem hiding this comment.
The form#settings td padding/width changes apply to many unrelated forms because id="settings" is reused throughout the app (registration, admin edit forms, etc.). This means the PR will unintentionally change layouts beyond the login screen. Consider scoping this rule to the specific page/container being revamped (e.g., #content form#settings td for only the card, or a page-specific class) or introducing a dedicated form id/class for the login screen.
| div#header { | ||
| min-height: 65px; | ||
| background-color: #317082; | ||
| color: #fff; | ||
| font-size: 1.5em; | ||
| padding: 10px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| } |
There was a problem hiding this comment.
div#header is now display:flex with justify-content: space-between, but existing header styling/markup still relies on floats (#logo { float:left; }, div#header ul { float:right; }). Mixing flex layout with float-based layout is unreliable and makes it harder to reason about the header across browsers; flex items also ignore float. Consider updating the child rules to use flex positioning consistently (remove floats / set appropriate flex properties) or avoid switching #header to flex if the rest of the header remains float-based.
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; |
There was a problem hiding this comment.
body is now a flex container with justify-content/align-items:center and height:100vh. Since includes/header.php renders multiple top-level siblings in <body> (header, menu, nav, content, etc.), this will lay them out as flex items (default flex-direction: row) and will visibly break the layout across the entire site, not just the login screen. Please scope these styles to the login page (e.g., a body.login class or a wrapper on login.php) or keep the global body layout non-flex.
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; |
Automated fix by CoderOps.
Swarm: sw5
Task: Revamp CSS for Login Screen