fix(dees-appui-maincontent): migrate main content layout to CSS Grid and enable topbar collapse transitions

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.7.0',
+  version: '3.7.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-maincontent/dees-appui-maincontent.ts

@@ -53,41 +53,36 @@ export class DeesAppuiMaincontent extends DeesElement {
       /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         color: ${cssManager.bdTheme('#333', '#fff')};
-        display: block;
+        display: grid;
+        grid-template-rows: auto 1fr;
         width: 100%;
         height: 100%;
-        position: relative;
         background: ${cssManager.bdTheme('#ffffff', '#161616')};
       }
+
       .maincontainer {
-        position: absolute;
-        height: 100%;
-        right: 0px;
-        top: 0px;
-        width: 100%;
+        display: contents;
       }
 
       .topbar {
-        position: absolute;
-        width: 100%;
+        display: grid;
+        grid-template-rows: 1fr;
+        overflow: hidden;
         user-select: none;
+        transition: grid-template-rows 0.3s ease;
+      }
+
+      .topbar > * {
+        min-height: 0;
       }
 
       .content-area {
-        position: absolute;
-        top: 60px;
-        left: 0;
-        right: 0;
-        bottom: 0;
         overflow: auto;
+        min-height: 0;
       }
 
       :host([notabs]) .topbar {
-        display: none;
-      }
-
-      :host([notabs]) .content-area {
-        top: 0;
+        grid-template-rows: 0fr;
       }
     `,
   ];