UX: responsive oneboxing with images in chat (#22824)

* UX: fix narrow oneboxing with images in chat

* UX: more responsive oneboxing

* UX: onebox-avatar limits

* ony flex non onebox-avatars

plugins/chat/assets/stylesheets/common/chat-message-images.scss

@@ -3,12 +3,10 @@ $max_image_height: 150px;
 .chat-message {
   // append selectors to set images to a
   // max height of $max_image_height
-  .chat-message-collapser
+  .onebox img:not(.ytp-thumbnail-image, .onebox-avatar-inline),
-    .onebox
+  img.onebox,
-    img:not(.ytp-thumbnail-image, .onebox-avatar-inline),
+  .chat-uploads img,
-  .chat-message-collapser img.onebox,
+  p img,
-  .chat-message-collapser .chat-uploads img,
-  .chat-message-collapser p img,
   aside.onebox .onebox-body .aspect-image-full-size,
   aside.onebox .onebox-body .aspect-image-full-size img,
   .chat-message-text p img:not(.emoji) {
@@ -19,6 +17,46 @@ $max_image_height: 150px;
     overflow: hidden;
   }
 
+  .onebox {
+    container-type: inline-size;
+
+    .thumbnail {
+      max-width: 40% !important;
+      &.onebox-avatar {
+        max-height: 100px;
+        width: 20%;
+        max-width: 60px;
+        margin-right: 0.5rem;
+      }
+    }
+
+    @container (width < 400px) {
+      .onebox-body {
+        &:not(:has(.thumbnail.onebox-avatar)) {
+          display: flex;
+          flex-direction: column;
+        }
+
+        h3 {
+          margin-block: 0.75rem 0;
+        }
+        p {
+          margin-top: 0.5rem;
+        }
+
+        .thumbnail {
+          max-width: 100% !important;
+          margin: 0;
+
+          &.onebox-avatar {
+            max-width: 20%;
+            margin-right: 0.5rem;
+          }
+        }
+      }
+    }
+  }
+
   .chat-message-collapser
     .chat-message-collapser-header
     + div