fix(core): update

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.283',
+  version: '1.0.284',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-chart-area.demo.ts

@@ -9,6 +9,7 @@ export const demoFunc = () => {
         height: 100%;
         width: 100%;
         padding: 40px;
+        box-sizing: border-box;
       }
     </style>
     <div class="demoBox">

ts_web/elements/dees-chart-area.ts

@@ -32,9 +32,30 @@ export class DeesChartArea extends DeesElement {
   @property()
   public label: string = 'Untitled Chart';
 
+  private resizeObserver: ResizeObserver;
+
   constructor() {
     super();
     domtools.elementBasic.setup();
+
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        if (entry.target.classList.contains('mainbox')) {
+          this.resizeChart(); // Call resizeChart when the .mainbox size changes
+        }
+      }
+    });
+    this.registerStartupFunction(async () => {
+      this.updateComplete.then(() => {
+        const mainbox = this.shadowRoot.querySelector('.mainbox');
+        if (mainbox) {
+          this.resizeObserver.observe(mainbox); // Start observing the .mainbox element
+        }
+      });
+    });
+    this.registerGarbageFunction(async () => {
+      this.resizeObserver.disconnect();
+    })
   }
 
   public static styles = [
@@ -49,11 +70,9 @@ export class DeesChartArea extends DeesElement {
       .mainbox {
         position: relative;
         width: 100%;
-        max-width: 600px;
         height: 400px;
         background: #222;
         border-radius: 8px;
-        padding: 32px 16px 16px 0px;
       }
 
       .chartTitle {
@@ -65,9 +84,12 @@ export class DeesChartArea extends DeesElement {
         padding-top: 16px;
       }
       .chartContainer {
-        position: relative;
-        width: 100%;
-        height: 100%;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        bottom: 0px;
+        right: 0px;
+        padding: 32px 16px 16px 0px;
       }
     `,
   ];

ts_web/elements/dees-chart-log.ts

@@ -49,7 +49,6 @@ export class DeesChartLog extends DeesElement {
       .mainbox {
         position: relative;
         width: 100%;
-        max-width: 600px;
         height: 400px;
         background: #222;
         border-radius: 8px;