fix(webchat): improve image paste UI layout and display

- Fix preview container width (use inline-flex + fit-content)
- Fix flex layout conflict in components.css (grid -> flex column)
- Change preview thumbnail to object-fit: contain (no cropping)
- Add image rendering in sent message bubbles
- Add CSS for chat-message-images display

Improves upon #1900

ui/src/styles/chat/layout.css

@@ -113,13 +113,16 @@
 
 /* Image attachments preview */
 .chat-attachments {
-  display: flex;
+  display: inline-flex;
   flex-wrap: wrap;
   gap: 8px;
   padding: 8px;
   background: var(--panel);
   border-radius: 8px;
   border: 1px solid var(--border);
+  width: fit-content;
+  max-width: 100%;
+  align-self: flex-start; /* Don't stretch in flex column parent */
 }
 
 .chat-attachment {
@@ -135,7 +138,7 @@
 .chat-attachment__img {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
 }
 
 .chat-attachment__remove {
@@ -189,6 +192,32 @@
   background: rgba(0, 0, 0, 0.6);
 }
 
+/* Message images (sent images displayed in chat) */
+.chat-message-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.chat-message-image {
+  max-width: 300px;
+  max-height: 200px;
+  border-radius: 8px;
+  object-fit: contain;
+  cursor: pointer;
+  transition: transform 150ms ease-out;
+}
+
+.chat-message-image:hover {
+  transform: scale(1.02);
+}
+
+/* User message images align right */
+.chat-group.user .chat-message-images {
+  justify-content: flex-end;
+}
+
 /* Compose input row - horizontal layout */
 .chat-compose__row {
   display: flex;