design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jürgen Kunz
2026-01-03 01:58:19 +00:00
parent 57b323b53c
commit 8e5168d299
5 changed files with 23 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
changelog.md
View File

@@ -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

2
ts_web/00_commitinfo_data.ts
View File

@@ -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.'
}

4
ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts
View File

@@ -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 */

1
ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts
View File

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

15
ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts
View File

@@ -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) */