Improve design

frontend/src/resources/css/_chat.scss

@@ -243,8 +243,22 @@
                                 a {
                                     text-decoration: none;
                                 }
+                                
+                                .attachement-image {
+                                    max-width: 200px;
+                                    border-radius: 8px;
+                                    cursor: pointer;
+                                    margin-left: 3px;
+                                    margin-right: 3px;
+                                    margin-bottom: 3px;
+
+                                    &:last-child {
+                                        margin-bottom: 0;
                                     }
                                 }
+                            }
+                        }
+
                         .message-time {
                             font-size: 0.7rem;
                             color: $color-dark-on-surface-variant;

frontend/src/ui/components/chat/Message.tsx

@@ -315,8 +315,8 @@ export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLo
                                                     }}
                                                     src={imageSrc} 
                                                     alt={file.name || "image"}
-                                                    style={{ maxWidth: "200px", borderRadius: "8px", cursor: "pointer" }} 
                                                     onClick={(e) => handleImageClick(file, e.currentTarget)}
+                                                    className="attachement-image"
                                                 />
                                             ) : (
                                                 <mdui-list-item>

frontend/src/ui/components/core/animations/AnimatedHeight.tsx

@@ -3,9 +3,10 @@ import type { AnimatedPropertyProps } from "./types";
 
 export default function AnimatedHeight({ visible, duration = 0.25, onFinish, children, ...props }: AnimatedPropertyProps) {
     const [height, setHeight] = useState("0px");
-    const [shouldRender, setShouldRender] = useState(visible);
+    const [shouldRender, setShouldRender] = useState(!!visible);
     const [isAnimating, setIsAnimating] = useState(false);
     const measureRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         if (visible) {
@@ -19,6 +20,7 @@ export default function AnimatedHeight({ visible, duration = 0.25, onFinish, chi
                 }
                 // Animation complete
                 setTimeout(() => {
+                    setHeight("auto");
                     setIsAnimating(false);
                 }, duration * 1000);
             }, 0);
@@ -28,9 +30,16 @@ export default function AnimatedHeight({ visible, duration = 0.25, onFinish, chi
                 const contentHeight = measureRef.current.scrollHeight;
                 setHeight(`${contentHeight}px`);
                 // Force a reflow before animating to 0
+                requestAnimationFrame(() => {
+                    // Read layout to ensure the previous height assignment is flushed
+                    if (containerRef.current) {
+                        containerRef.current.offsetHeight;
+                    }
+                    // Use a second frame to ensure the measured pixel height is applied before collapsing
                     requestAnimationFrame(() => {
                         setHeight("0px");
                     });
+                });
             }
             // Hide content after animation completes
             setTimeout(() => {
@@ -43,14 +52,10 @@ export default function AnimatedHeight({ visible, duration = 0.25, onFinish, chi
         }
     }, [visible, shouldRender]);
 
-    // Don't render if not visible and not animating
-    if (!visible && !shouldRender && !isAnimating) {
-        return null;
-    }
-
-    return (
+    return (visible || shouldRender || isAnimating) && (
         <div
             {...props}
+            ref={containerRef}
             style={{
                 height,
                 transition: `height ${duration}s ease`,