fix: buildify1 image extension overflowed in screens that were smaller than the given width

modules/buildify/client/extensions/ImageExtension.ts

@@ -159,12 +159,31 @@ export class XImageExtension extends ExtensionBoilerplate<BaseImage> {
   }
 
   override styles(): Styles[] {
+    const width = (() => {
+      const defaultWidth = '100%';
+      const w = this.defaultValue('width', { global: defaultWidth }) as Maybe<string>;
+      if (typeof w === 'string') {
+        // Cap width to 100% to prevent overflow
+        return `min(100%, ${w})`;
+      } else {
+        return defaultWidth;
+      }
+    })();
+    const height = (() => {
+      const defaultHeight = 'auto';
+      const h = this.defaultValue('height', { global: defaultHeight }) as Maybe<string>;
+      if (typeof h !== 'string' || h === defaultHeight) {
+        return defaultHeight;
+      } else {
+        return `min(100%, ${h})`;
+      }
+    })();
     return [
       ...super.styles(),
       {
         ':host': {
-          width: this.defaultValue('width', { global: '100%' }),
-          height: this.defaultValue('height', { global: 'auto' }),
+          width,
+          height,
         },
       },
     ];