From c2d5ae45a206be581cafba78e668a1ccc7aca19b Mon Sep 17 00:00:00 2001
From: Stefan Koelle <stefan.koelle@gmail.com>
Date: Wed, 5 Aug 2026 16:33:45 +0200
Subject: [PATCH] web photo layout update

---
 src/api/main.py                |  2 +-
 src/api/templates/contact.html | 11 ++++++-----
 src/api/templates/index.html   | 24 ++++++++----------------
 3 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/api/main.py b/src/api/main.py
index 2295d54..ec45c41 100644
--- a/src/api/main.py
+++ b/src/api/main.py
@@ -253,7 +253,7 @@ def web_search(
         with conn.cursor() as cur:
             cur.execute(
                 f"""SELECT id, full_name, given_name, middle_name, family_name,
-                           prefix, suffix, organization, birthday, account
+                           prefix, suffix, organization, birthday, account, photo_url
                     FROM contacts {where_clause}{search_clause}
                     ORDER BY full_name
                     LIMIT 200""",
diff --git a/src/api/templates/contact.html b/src/api/templates/contact.html
index 4c2611e..3d778b4 100644
--- a/src/api/templates/contact.html
+++ b/src/api/templates/contact.html
@@ -66,8 +66,8 @@
         }
 
         .contact-photo {
-            width: 80px;
-            height: 80px;
+            width: 160px;
+            height: 160px;
             border-radius: 50%;
             object-fit: cover;
             flex-shrink: 0;
@@ -99,6 +99,7 @@
         .badge-account {
             background: #d1ecf1;
             color: #0c5460;
+            margin-top: 0.35rem;
         }
 
         .section {
@@ -211,10 +212,10 @@
                         {% if contact.organization %}{{ contact.organization }}{% endif %}
                     </div>
                     {% endif %}
+                    {% if is_admin and contact.account %}
+                    <span class="badge badge-account">{{ contact.account }}</span>
+                    {% endif %}
                 </div>
-                {% if is_admin and contact.account %}
-                <span class="badge badge-account">{{ contact.account }}</span>
-                {% endif %}
                 {% if contact.photo_url %}
                 <img src="{{ contact.photo_url }}" alt="Foto" class="contact-photo" onerror="this.style.display='none'">
                 {% endif %}
diff --git a/src/api/templates/index.html b/src/api/templates/index.html
index 4aca926..3456c39 100644
--- a/src/api/templates/index.html
+++ b/src/api/templates/index.html
@@ -139,20 +139,12 @@
             content: "\1F382 ";
         }
 
-        .badge {
-            display: inline-block;
-            padding: 0.2rem 0.6rem;
-            border-radius: 4px;
-            font-size: 0.75rem;
-            font-weight: 500;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            white-space: nowrap;
-        }
-
-        .badge-account {
-            background: #d1ecf1;
-            color: #0c5460;
+        .contact-photo {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            object-fit: cover;
+            flex-shrink: 0;
         }
 
         .no-contacts {
@@ -196,8 +188,8 @@
                             <div class="contact-birthday">{{ c.birthday }}</div>
                             {% endif %}
                         </div>
-                        {% if is_admin and c.account %}
-                        <span class="badge badge-account">{{ c.account }}</span>
+                        {% if c.photo_url %}
+                        <img src="{{ c.photo_url }}" alt="" class="contact-photo" onerror="this.style.display='none'">
                         {% endif %}
                     </div>
                 </a>