web photo layout update

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""",

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 %}

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>