From 22b4fa6f3a773a3ccb8d42b1043783d38c25c8f8 Mon Sep 17 00:00:00 2001
From: kai <kai@pinguholic.de>
Date: Wed, 26 Aug 2026 12:04:28 +0200
Subject: [PATCH]  anpussung Bild format au der Kutte

---
 app/templates/profile.html | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/templates/profile.html b/app/templates/profile.html
index 415d81c..2113084 100644
--- a/app/templates/profile.html
+++ b/app/templates/profile.html
@@ -19,10 +19,12 @@
         .kutte::before, .kutte::after { content: ""; position: absolute; top: 0; width: 30%; height: 62px; background: #111; border-bottom: 3px solid #404040; }
         .kutte::before { left: 0; border-radius: 24px 0 45% 0; }
         .kutte::after { right: 0; border-radius: 0 24px 0 45%; }
-        .patch-grid { display: grid; grid-template-columns: repeat(auto-fill, 105px); gap: 14px; justify-content: start; align-content: start; }
-        .patch { width: 105px; height: 105px; padding: 5px; display: grid; place-items: center; text-align: center; background: #242424; border: 2px dashed #78716c; border-radius: 9px; color: #f8fafc; overflow: hidden; }
+        .patch-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; align-items: flex-start; }
+        .patch { padding: 5px; display: grid; place-items: center; text-align: center; background: #242424; border: 2px dashed #78716c; border-radius: 9px; color: #f8fafc; }
+        .patch-image-frame { width: fit-content; height: fit-content; }
+        .patch-icon-frame { width: 105px; height: 105px; }
         .patch-icon { font-size: 2.5rem; }
-        .patch-image { width: 100%; height: 100%; object-fit: contain; display: block; }
+        .patch-image { width: auto; height: auto; max-width: 140px; max-height: 140px; object-fit: contain; display: block; }
         .patch.locked { opacity: .38; filter: grayscale(1); }
         .patch.earned { border-style: solid; border-color: #a78bfa; box-shadow: 0 0 12px rgba(167, 139, 250, .35); }
         .profile-edit { margin-top: 24px; }
@@ -62,7 +64,7 @@
                 <div class="patch-grid">
                     {% for badge in badges %}
                         {% if badge.earned %}
-                            <div class="patch earned" title="{{ badge.name }} – {{ badge.description }}" aria-label="{{ badge.name }}: {{ badge.description }}">
+                            <div class="patch earned {% if badge.image_path %}patch-image-frame{% else %}patch-icon-frame{% endif %}" title="{{ badge.name }} – {{ badge.description }}" aria-label="{{ badge.name }}: {{ badge.description }}">
                                 {% if badge.image_path %}
                                     <img class="patch-image" src="{{ badge.image_path }}" alt="Patch {{ badge.name }}">
                                 {% else %}