From 611c65c40badf226a8e30bbc0d785be7aa8231cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexander=20M=C3=BCller?= <alexander@mueller-post.de>
Date: Wed, 1 Jan 2025 21:43:05 +0100
Subject: [PATCH] Postwall - Avatar-Header Formatierung

---
 src/components/postwall.js |  2 +-
 style/postwall.css         | 27 +++++++++++++++++++--------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/postwall.js b/src/components/postwall.js
index dde9075..5f3b3ea 100644
--- a/src/components/postwall.js
+++ b/src/components/postwall.js
@@ -89,7 +89,7 @@ export async function loadPostwall() {
                 <div class="post-header">
                     <img src="${avatar}" alt="${author}" class="avatar">
                     <div class="post-author">
-                        <strong>${author}</strong>
+                        <span class="post-authorname">${author}</span>
                         <span class="post-username">${username}</span>
                     </div>
                     <span class="post-timestamp">${timeAgo}</span>
diff --git a/style/postwall.css b/style/postwall.css
index 806b806..e1f9d55 100644
--- a/style/postwall.css
+++ b/style/postwall.css
@@ -56,8 +56,8 @@
 
 .post-timestamp {
     position: absolute;
-    top: 5px;
-    right: 5px;
+    top: 0;
+    right: 0;
     font-size: 0.8rem;
     color: #bbb;
     font-weight: bold;
@@ -69,9 +69,24 @@
     flex-direction: column;
 }
 
+.post-authorname {
+    font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    display: block;
+}
+
 .post-username {
     font-size: 0.8em;
     color: #bbb;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    display: block;
+    line-height: 1.2;
 }
 
 .avatar {
@@ -171,12 +186,8 @@
         flex: 0 0 300px;
         max-height: 350px;
     }
-    .post-header .avatar {
-        width: 30px;
-        height: 30px;
-    }
-    .post-username {
-        font-size: 0.8em;
+    .post-authorname {
+        max-width: 170px;
     }
     .post-media img {
         max-height: 120px;