fix: add scroll to the lablup-activity-panel (#2711)

### This PR resolves [giftbox#723](lablup/giftbox#723) issue

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lSyr8xXz1wdXALkJKzVx/67fb17ec-9e97-4d60-b48e-9fb2aecb43f5.png)

**Changes:**

- Implemented `scrollableY="true"` attribute for activity panels in `BackendAIResourcePanel` and `BackendAISummary`
- Enhanced `lablup-activity-panel` to improve scrolling functionality:
  - Added a `content` class to the inner div
  - Adjusted height calculations to account for header space
  - Implemented separate overflow settings for content area

**Checklist:**

- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

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">
@@ -705,7 +706,7 @@ export default class BackendAIResourcePanel extends BackendAIPage {
                           <div
                             class="layout vertical center center-justified resource-name"
                           >
-                            <div class="gauge-name">GPU/NPU</div>
+                            <div class="gauge-name">GPU / NPU</div>
                           </div>
                           <div class="layout vertical">
                             ${this.cuda_gpu_total

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

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';
     }
   }