fix(dees-appui): Normalize header heights and box-sizing for App UI components

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
 

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

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%)'

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 {

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 {

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