@asd20/ui-next 2.21.1 → 2.21.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.21.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.2...ui-next-v2.21.3) (2026-08-12)
+
+
+### Bug Fixes
+
+* allow table width to fill message container width ([0987c4b](https://github.com/academydistrict20/asd20-ui-next/commit/0987c4bc33cdd7b71fa160edb81eaaa28be9cacc))
+
+## [2.21.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.1...ui-next-v2.21.2) (2026-08-12)
+
+
+### Bug Fixes
+
+* constrain single message images to message container ([18a1065](https://github.com/academydistrict20/asd20-ui-next/commit/18a1065ab9295e377c2ae9e879fe8ef557d0d396))
+
 ## [2.21.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.0...ui-next-v2.21.1) (2026-08-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.21.1",
+  "version": "2.21.3",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/atoms/Asd20RichBodyContent/index.vue

@@ -123,6 +123,7 @@ export default {
   }
 
   :deep(.asd20-message-table) {
+    width: 100% !important;
     border-collapse: collapse;
     font-size: 0.875rem;
   }
@@ -158,6 +159,15 @@ export default {
     margin-bottom: 0;
   }
 
+  :deep(.asd20-message-image) {
+    box-sizing: border-box;
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 1rem auto;
+    object-fit: contain;
+  }
+
   :deep(.asd20-message-image-gallery) {
     box-sizing: border-box;
     max-width: 100%;

package/src/components/atoms/Asd20RichBodyContent/messageDocumentRenderer.js

@@ -771,8 +771,8 @@ function renderTable(node) {
   )}</tbody></table></div>`
 }
 
-function renderImage(attrs) {
-  return `<img${attribute('src', attrs.src)}${attribute(
+function renderImage(attrs, className = '') {
+  return `<img${attribute('class', className)}${attribute('src', attrs.src)}${attribute(
     'alt',
     attrs.alt,
     true
@@ -811,11 +811,11 @@ function renderStandardNode(node) {
   }
   if (node.type === 'listItem') return `<li>${renderChildren(node)}</li>`
   if (node.type === 'image') {
-    return renderImage(node.attrs)
+    return renderImage(node.attrs, 'asd20-message-image')
   }
   if (node.type === 'imageGallery') {
     return `<figure class="asd20-message-image-gallery" data-cc-node="image-gallery"><div class="asd20-message-image-gallery__images" data-cc-gallery-images="">${node.attrs.images
-      .map(renderImage)
+      .map(image => renderImage(image))
       .join('')}</div></figure>`
   }
   if (node.type === 'videoEmbed') {