diff --git a/changelog.md b/changelog.md index 2eb220b..7cbecb4 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,14 @@ # Changelog +## 2025-12-08 - 3.0.1 - fix(dees-appui) +Normalize header heights and box-sizing for App UI components + +- Set topbar/header heights to 48px (was 40px) and adjusted dependent offsets (activity container top, topShadow position) in dees-appui-activitylog. +- Make logo and secondary menu headers fixed 48px tall and replace vertical padding with horizontal padding for consistent vertical alignment (dees-appui-mainmenu, dees-appui-secondarymenu). +- Ensure tabs wrapper uses explicit 48px height and tabsContainer fills height (height:100%) to keep tab items vertically centered (dees-appui-tabs). +- Add box-sizing: border-box to affected header/logo containers to prevent overflow and ensure correct sizing. +- Minor CSS alignment and overflow fixes to improve consistent layout and scrolling behavior across the app UI components. + ## 2025-12-08 - 3.0.0 - BREAKING CHANGE(dees-appui-secondarymenu) Add SecondaryMenu component and replace Mainselector with new SecondaryMenu in AppUI diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 38adb38..905a8a2 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '3.0.0', + version: '3.0.1', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' } diff --git a/ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts b/ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts index ce40046..96281f3 100644 --- a/ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts +++ b/ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts @@ -63,13 +63,14 @@ export class DeesAppuiActivitylog extends DeesElement { .topbar { position: absolute; top: 0px; - height: 40px; + height: 48px; width: 100%; padding: 0px 16px; background: ${cssManager.bdTheme('#ffffff', '#09090b')}; border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')}; display: flex; align-items: center; + box-sizing: border-box; } .topbar .heading { @@ -81,7 +82,7 @@ export class DeesAppuiActivitylog extends DeesElement { .activityContainer { position: absolute; - top: 40px; + top: 48px; bottom: 48px; width: 100%; padding: 12px 0px; @@ -315,7 +316,7 @@ export class DeesAppuiActivitylog extends DeesElement { position: absolute; width: 100%; height: 24px; - top: 40px; + top: 48px; background: ${cssManager.bdTheme( 'linear-gradient(0deg, transparent 0%, #fafafa 100%)', 'linear-gradient(0deg, transparent 0%, #0a0a0a 100%)' diff --git a/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts b/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts index 90740e0..de81bd6 100644 --- a/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts +++ b/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts @@ -115,9 +115,11 @@ export class DeesAppuiMainmenu extends DeesElement { display: flex; align-items: center; gap: 10px; - padding: 16px 14px; + height: 48px; + padding: 0 14px; border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')}; flex-shrink: 0; + box-sizing: border-box; } .logoSection dees-icon { diff --git a/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts b/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts index 7ead8c3..db3d00d 100644 --- a/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts +++ b/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts @@ -134,9 +134,11 @@ export class DeesAppuiSecondarymenu extends DeesElement { display: flex; align-items: center; justify-content: space-between; - padding: 16px 16px; + height: 48px; + padding: 0 16px; border-bottom: 1px solid var(--sidebar-border); flex-shrink: 0; + box-sizing: border-box; } .header .heading { diff --git a/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts b/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts index 4688fb6..9d9fd2c 100644 --- a/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts +++ b/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts @@ -132,7 +132,9 @@ export class DeesAppuiTabs extends DeesElement { } .tabs-wrapper.horizontal-wrapper { + height: 48px; border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')}; + box-sizing: border-box; } .tabsContainer { @@ -146,7 +148,7 @@ export class DeesAppuiTabs extends DeesElement { font-size: 14px; overflow-x: auto; scrollbar-width: none; - height: 48px; + height: 100%; padding: 0 16px; gap: 4px; }