fix(appui): adjust layout and spacing in app UI components: fix activity log overflow, contain main content overscroll, and refine secondary menu padding/transition

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-01-03 - 3.28.1 - fix(appui)
+adjust layout and spacing in app UI components: fix activity log overflow, contain main content overscroll, and refine secondary menu padding/transition
+
+- ts_web/elements/00group-appui/dees-appui-activitylog: removed host max-width, added overflow:hidden and set .maincontainer width to 280px to prevent horizontal overflow
+- ts_web/elements/00group-appui/dees-appui-maincontent: added overscroll-behavior: contain to .content-area to prevent scroll chaining/overscroll
+- ts_web/elements/00group-appui/dees-appui-secondarymenu: updated .groupHeader padding and hover border behavior, increased group icon size from 14px to 16px, and added margin + transition tweaks to .groupItems for smoother collapse/expand
+
 ## 2026-01-02 - 3.28.0 - feat(dees-appui)
 Rename DeesAppuiBase to DeesAppui and migrate related API, exports, demos and docs
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.28.0',
+  version: '3.28.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts

@@ -53,12 +53,12 @@ export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI
         position: relative;
         display: block;
         width: 100%;
-        max-width: 320px;
         height: 100%;
         background: var(--activitylog-bg);
         font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
         border-left: 1px solid var(--activitylog-border);
         cursor: default;
+        overflow: hidden;
       }
 
       .maincontainer {
@@ -66,7 +66,7 @@ export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI
         top: 0px;
         left: 0px;
         height: 100%;
-        width: 100%;
+        width: 280px;
       }
 
       /* Header with streaming indicator */

ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts

@@ -85,6 +85,7 @@ export class DeesAppuiMaincontent extends DeesElement {
       .content-area {
         overflow: auto;
         min-height: 0;
+        overscroll-behavior: contain;
       }
 
       :host([notabs]) .topbar {

ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts

@@ -235,7 +235,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 8px 8px;
+        padding: 8px 12px;
         cursor: pointer;
         border-radius: 6px;
         transition: background 0.15s ease, opacity 0.2s ease, max-height 0.25s ease;
@@ -243,7 +243,14 @@ export class DeesAppuiSecondarymenu extends DeesElement {
       }
 
       .groupHeader:hover {
+        border: 1px solid ${cssManager.bdTheme('rgba(140, 120, 100, 0.06)', 'rgba(180, 160, 140, 0.08)')};
+        padding: 7px 11px;
+      }
+
+      .groupHeader:not(.collapsed) {
         background: ${cssManager.bdTheme('rgba(140, 120, 100, 0.06)', 'rgba(180, 160, 140, 0.08)')};
+        border: none;
+        padding: 8px 12px;
       }
 
       .groupHeader .groupTitle {
@@ -260,7 +267,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
       }
 
       .groupHeader .groupTitle dees-icon {
-        font-size: 14px;
+        font-size: 16px;
         color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
       }
 
@@ -286,14 +293,16 @@ export class DeesAppuiSecondarymenu extends DeesElement {
       /* Group Items Container */
       .groupItems {
         overflow: hidden;
-        transition: max-height 0.25s ease, opacity 0.2s ease;
+        transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
         max-height: 1000px;
         opacity: 1;
+        margin-bottom: 12px;
       }
 
       .groupItems.collapsed {
         max-height: 0;
         opacity: 0;
+        margin-bottom: 0;
       }
 
       /* Always show items when horizontally collapsed (regardless of group collapse state) */