fix: account username changing

crates/app/src/public/css/style.css

@@ -162,6 +162,10 @@ p {
     margin-bottom: 0;
 }
 
+.post_right {
+    max-width: calc(84% + 4px);
+}
+
 .name {
     max-width: 250px;
     overflow: hidden;
@@ -178,6 +182,10 @@ p {
     .name.lg\:long {
         max-width: unset;
     }
+
+    .post_right {
+        max-width: calc(91% + 4px);
+    }
 }
 
 ul,
@@ -357,6 +365,7 @@ img.emoji {
     height: 100dvh;
     top: 0;
     left: 0;
+    animation: fadein ease-in-out 1 0.1s forwards running;
 }
 
 .lightbox_exit {
@@ -369,6 +378,7 @@ img.emoji {
     box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
         var(--color-shadow);
     border-radius: var(--radius);
+    animation: popin ease-in-out 1 0.15s forwards running;
 }
 
 /* avatar/banner */
@@ -1096,6 +1106,26 @@ dialog::backdrop {
     min-width: max-content;
 }
 
+@keyframes fadein {
+    from {
+        opacity: 0%;
+    }
+
+    to {
+        opacity: 100%;
+    }
+}
+
+@keyframes static_fadeout {
+    from {
+        opacity: 100%;
+    }
+
+    to {
+        opacity: 0%;
+    }
+}
+
 @keyframes popin {
     from {
         opacity: 0%;

crates/app/src/public/html/components.html

@@ -189,7 +189,7 @@ and show_community and community.id != config.town_square or question %}
                 selector_type="username") }}
             </a>
 
-            <div class="flex flex-col w-full gap-1">
+            <div class="flex flex-col w-full gap-1 post_right">
                 <div class="flex flex-wrap gap-2 items-center">
                     <span class="name"
                         >{{ self::full_username(user=owner) }}</span
@@ -242,7 +242,7 @@ and show_community and community.id != config.town_square or question %}
                 {{ self::post_media(upload_ids=post.uploads) }} {% else %}
                 <details>
                     <summary
-                        class="card flex gap-2 items-center tertiary red w-full"
+                        class="card flex gap-2 flex-wrap items-center tertiary red w-full"
                     >
                         {{ icon "triangle-alert" }}
                         <b>{{ post.context.content_warning }}</b>

crates/app/src/public/js/atto.js

@@ -1036,7 +1036,13 @@ ${option.input_element_type === "textarea" ? `${option.value}</textarea>` : ""}
     });
 
     self.define("lightbox_close", () => {
-        document.getElementById("lightbox").classList.add("hidden");
+        document.getElementById("lightbox").style.animation =
+            "static_fadeout ease-in-out 1 0.1s forwards running";
+
+        setTimeout(() => {
+            document.getElementById("lightbox").removeAttribute("style");
+            document.getElementById("lightbox").classList.add("hidden");
+        }, 250);
     });
 })();