From 751a7999c01b8b500acc90b7be2b5742b96b2226 Mon Sep 17 00:00:00 2001
From: Fabian Schieder <fabian.schieder.1010@gmail.com>
Date: Sun, 25 Jan 2026 20:11:36 +0100
Subject: [PATCH] Refactor account page layout and styles for profile picture
 display

---
 account.php          |  32 +++++------
 assets/css/login.css | 134 ++++++++++++++++++++++++++++++-------------
 2 files changed, 110 insertions(+), 56 deletions(-)

diff --git a/account.php b/account.php
index 7909384..676c7a5 100644
--- a/account.php
+++ b/account.php
@@ -65,23 +65,23 @@ include 'header.php';
     <link rel="stylesheet" href="assets/css/login.css">
 
     <main class="auth" role="main">
-        <section class="auth__grid" aria-label="Account Bereich">
-            <div class="auth__card">
-                <header class="auth__header">
-                    <img src="<?php echo htmlspecialchars($user['profilePicture']); ?>"
-                         alt="Profilbild"
-                         width="475">
-                </header>
-            </div>
+        <section class="auth__grid auth__card__side" aria-label="Account Bereich">
+                    <div class="auth__card auth__card__side__picture">
+                    <header class="auth__header">
+                        <img src="<?php echo htmlspecialchars($user['profilePicture']); ?>"
+                             alt="Profilbild"
+                             width="120">
+                    </header>
+                </div>
 
-            <div class="auth__card">
-                <header class="auth__header">
-                    <p class="auth__title">
-                        Username: <?php echo htmlspecialchars($user['displayName'], ENT_QUOTES, 'UTF-8'); ?></p> <br>
-                    <p class="auth__title">UserID: <?php echo (int)$user['userID']; ?></p> <br>
-                    <p class="auth__title">Email: <?php echo htmlspecialchars($user['email']); ?></p> <br>
-                </header>
-            </div>
+                <div class="auth__card">
+                    <header class="auth__header">
+                        <p class="auth__title">
+                            Username: <?php echo htmlspecialchars($user['displayName'], ENT_QUOTES, 'UTF-8'); ?></p> <br>
+                        <p class="auth__title">UserID: <?php echo (int)$user['userID']; ?></p> <br>
+                        <p class="auth__title">Email: <?php echo htmlspecialchars($user['email']); ?></p> <br>
+                    </header>
+                </div>
         </section>
     </main>
 
diff --git a/assets/css/login.css b/assets/css/login.css
index 675705a..ae4ff7c 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -2,7 +2,7 @@
    Geizhals-inspiriertes, cleanes Login-Layout
 */
 
-:root{
+:root {
     /* Dunkelblauer Background, helle Cards, blaue Akzente */
     --gh-bg: #151923;
     --gh-card: #1f2937;
@@ -21,7 +21,7 @@
 }
 
 /* Wir stylen nur innerhalb des Login-Bereichs, damit global nichts kaputtgeht */
-.auth{
+.auth {
     display: grid;
     place-items: center;
     min-height: 81.5svh;
@@ -29,7 +29,7 @@
     background: var(--gh-bg);
 }
 
-.auth__grid{
+.auth__grid {
     display: grid;
     grid-template-columns: 1fr; /* statt 1.06fr 0.94fr */
     justify-items: center;
@@ -40,8 +40,56 @@
     align-items: center; /* optional, aber passend zur Zentrierung */
 }
 
+/*
+ * Layout-Varianten für Seiten, die mehrere .auth__card haben (z.B. account.php)
+ * Nutzung:
+ *  - nebeneinander: <section class="auth__grid auth__card__side">
+ *  - untereinander: <section class="auth__grid auth__card__stack">
+ */
+.auth__grid.auth__card__side {
+    grid-template-columns: max-content 1fr;
+    align-items: start;
+    justify-items: stretch;
+}
+
+.auth__grid.auth__card__side .auth__card {
+    width: 100%;
+}
+
+/* Bild-Card in Side-Ansicht: Card wird so groß wie das Bild (inkl. Padding), Bild bleibt IN der Card */
+.auth__grid.auth__card__side .auth__card.auth__card__side__picture {
+    display: inline-grid;
+    width: max-content;
+    justify-self: center; /* Card mittig in der linken Spalte */
+    padding: 12px; /* Abstand zwischen Rahmen und Bild */
+    overflow: hidden; /* Bild darf nicht über Radius/Rahmen hinauslaufen */
+    place-items: center; /* Bild mittig in der Card */
+}
+
+/* Der normale auth__header ist ein Grid (Logo+Text). In der Bild-Card wollen wir nur "zentriert" */
+.auth__grid.auth__card__side .auth__card.auth__card__side__picture .auth__header{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 0;
+}
+
+.auth__grid.auth__card__side .auth__card.auth__card__side__picture img {
+    display: block; /* entfernt Inline-Gap unter Bildern */
+    max-width: none; /* Card richtet sich an echter Bildbreite aus */
+    height: auto;
+    /* runde Ecken kommen vom Container (overflow:hidden) */
+}
+
+.auth__grid.auth__card__stack {
+    grid-template-columns: 1fr;
+    align-items: center;
+    justify-items: center;
+}
+
 .auth__card,
-.auth__sideCard{
+.auth__sideCard {
     width: min(520px, 100%);
     background: var(--gh-card);
     /* border: 1px solid var(--gh-border); */
@@ -49,11 +97,11 @@
     box-shadow: var(--gh-shadow);
 }
 
-.auth__card{
+.auth__card {
     padding: 22px;
 }
 
-.auth__header{
+.auth__header {
     display: grid;
     grid-template-columns: auto 1fr;
     column-gap: 14px;
@@ -62,28 +110,28 @@
     margin-bottom: 12px;
 }
 
-.auth__logo{
+.auth__logo {
     display: block;
     width: 140px;
     height: auto;
     grid-row: span 2;
 }
 
-.auth__title{
+.auth__title {
     margin: 0;
     font-size: 1.55rem;
     letter-spacing: 0.2px;
     color: var(--gh-text);
 }
 
-.auth__subtitle{
+.auth__subtitle {
     margin: 0;
     color: var(--gh-muted);
     font-size: 0.98rem;
     line-height: 1.4;
 }
 
-.auth__alert__error{
+.auth__alert__error {
     margin: 12px 0 14px;
     color: #ffffff;
     background: var(--gh-danger);
@@ -92,7 +140,7 @@
     box-shadow: 0 8px 18px rgba(217, 45, 32, 0.18);
 }
 
-.auth__alert__sucess{
+.auth__alert__sucess {
     margin: 12px 0 14px;
     color: #ffffff;
     background: #558346;
@@ -101,15 +149,15 @@
     box-shadow: 0 8px 18px rgba(72, 142, 62, 0.18);
 }
 
-.auth__form{
+.auth__form {
     margin-top: 6px;
 }
 
-.auth__field{
+.auth__field {
     margin-top: 12px;
 }
 
-.auth__field label{
+.auth__field label {
     display: block;
     margin: 0 0 6px;
     font-size: 0.95rem;
@@ -117,7 +165,7 @@
 }
 
 .auth__field input[type="text"],
-.auth__field input[type="password"]{
+.auth__field input[type="password"] {
     width: 100%;
     box-sizing: border-box;
     padding: 12px 12px;
@@ -130,16 +178,16 @@
 }
 
 .auth__field input[type="text"]:focus,
-.auth__field input[type="password"]:focus{
+.auth__field input[type="password"]:focus {
     border-color: rgba(37, 99, 235, 0.75);
     box-shadow: var(--gh-focus);
 }
 
-.auth__actions{
+.auth__actions {
     margin-top: 14px;
 }
 
-.auth__submit{
+.auth__submit {
     width: 100%;
     padding: 12px 14px;
     border: 0;
@@ -152,95 +200,101 @@
     transition: transform 120ms ease, filter 120ms ease;
 }
 
-.auth__submit:hover{
+.auth__submit:hover {
     filter: brightness(1.02);
     transform: translateY(-1px);
 }
 
-.auth__submit:active{
+.auth__submit:active {
     transform: translateY(0px);
 }
 
-.auth__links{
+.auth__links {
     margin-top: 14px;
     padding-top: 12px;
     border-top: 1px dashed var(--gh-border);
 }
 
-.auth__muted{
+.auth__muted {
     margin: 8px 0 0;
     color: var(--gh-muted);
 }
 
-.auth__muted a{
+.auth__muted a {
     color: var(--gh-link);
     text-decoration: none;
     font-weight: 700;
 }
 
-.auth__muted a:hover{
+.auth__muted a:hover {
     text-decoration: underline;
 }
 
-.auth__sideCard{
+.auth__sideCard {
     padding: 18px;
     background: var(--gh-card);
 }
 
-.auth__sideCard h3{
+.auth__sideCard h3 {
     margin: 0 0 10px;
     font-size: 1.05rem;
     color: var(--gh-text);
 }
 
-.auth__sideCard ul{
+.auth__sideCard ul {
     margin: 0;
     padding-left: 18px;
     color: var(--gh-text);
 }
 
-.auth__sideCard li{
+.auth__sideCard li {
     margin: 8px 0;
     color: var(--gh-text);
 }
 
-.auth__tip{
+.auth__tip {
     margin-top: 14px;
     padding: 12px 12px;
     border-radius: 12px;
-    background: rgba(37,99,235,0.06);
-    border: 1px solid rgba(37,99,235,0.16);
+    background: rgba(37, 99, 235, 0.06);
+    border: 1px solid rgba(37, 99, 235, 0.16);
     color: var(--gh-text);
 }
 
-@media (max-width: 900px){
-    .auth__grid{
+@media (max-width: 900px) {
+    .auth__grid {
         grid-template-columns: 1fr;
     }
 
-    .auth__logo{
+    /* Side-Layout klappt auf Mobile automatisch auf 1 Spalte zusammen */
+    .auth__grid.auth__card__side {
+        grid-template-columns: 1fr;
+        justify-items: center;
+    }
+
+    .auth__logo {
         width: 120px;
     }
 
-    .auth__sideCard{
+    .auth__sideCard {
         display: none;
     }
 }
 
-@media (max-width: 520px){
-    .auth{
+@media (max-width: 520px) {
+    .auth {
         padding-top: 18px;
     }
 
-    .auth__card{
+    .auth__card {
         padding: 18px;
     }
 
-    .auth__header{
+    .auth__header {
         grid-template-columns: 1fr;
     }
 
-    .auth__logo{
+    .auth__logo {
         width: 140px;
         grid-row: auto;
     }