fix: add scroll to the lablup-activity-panel

lablup · Sep 25, 2024 · 675fdca · 675fdca
1 parent 9b7c75e
commit 675fdca
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/src/components/backend-ai-resource-panel.ts b/src/components/backend-ai-resource-panel.ts
@@ -554,6 +554,7 @@ export default class BackendAIResourcePanel extends BackendAIPage {
         elevation="1"
         narrow
         height="${this.height}"
+        scrollableY="true"
       >
         <div slot="message">
           <div class="horizontal justified layout wrap indicators">

diff --git a/src/components/backend-ai-summary-view.ts b/src/components/backend-ai-summary-view.ts
@@ -558,6 +558,7 @@ export default class BackendAISummary extends BackendAIPage {
             elevation="1"
             narrow
             height="500"
+            scrollableY="true"
           >
             <div slot="message">
               <backend-ai-resource-monitor

diff --git a/src/components/lablup-activity-panel.ts b/src/components/lablup-activity-panel.ts
@@ -154,7 +154,7 @@ export default class LablupActivityPanel extends LitElement {
             @click="${() => this._removePanel()}"
           ></mwc-icon-button>
         </h4>
-        <div class="${this.disabled ? `disabled` : `enabled`}">
+        <div class="content ${this.disabled ? `disabled` : `enabled`}">
           <slot name="message"></slot>
         </div>
       </div>
@@ -168,6 +168,9 @@ export default class LablupActivityPanel extends LitElement {
     }
 
     const card = this.shadowRoot?.querySelector('.card') as HTMLDivElement;
+    const content = this.shadowRoot?.querySelector(
+      '.content',
+    ) as HTMLDivElement;
     const header = this.shadowRoot?.querySelector(
       '#header',
     ) as HTMLHeadingElement;
@@ -208,17 +211,21 @@ export default class LablupActivityPanel extends LitElement {
     }
 
     if (this.height > 0) {
-      this.height == 130
-        ? (card.style.height = 'fit-content')
-        : (card.style.height = this.height + 'px');
+      if (this.height == 130) {
+        card.style.height = 'fit-content';
+      } else {
+        content.style.height = this.height - 70 + 'px';
+        card.style.height = this.height + 'px';
+      }
     }
 
     if (this.noheader) {
       header.style.display = 'none';
     }
 
     if (this.scrollableY) {
-      card.style.overflowY = 'auto';
+      content.style.overflowY = 'auto';
+      content.style.overflowX = 'hidden';
     }
   }