@repobit/dex-system-design 0.23.55 → 0.23.57

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.57](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.56...@repobit/dex-system-design@0.23.57) (2026-06-26)
+
+### Bug Fixes
+
+* **DEX-1014:** css adjustments for features component
+* **DEX-1014:** css adjustments for features component
+
+
+## [0.23.56](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.55...@repobit/dex-system-design@0.23.56) (2026-06-25)
+
+### Bug Fixes
+
+* **DEX-1014:** css adjustments for tabs component
+
+
 ## [0.23.55](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.54...@repobit/dex-system-design@0.23.55) (2026-06-25)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.55",
+  "version": "0.23.57",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -70,8 +70,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.3.51",
-    "@repobit/dex-store-elements": "1.4.43",
+    "@repobit/dex-store": "1.3.53",
+    "@repobit/dex-store-elements": "1.4.45",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -88,5 +88,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "2a6282a6cdabf56872dfceffef9a995824cd7930"
+  "gitHead": "2a961aadaa90eac422c04d1aa86d3b48505db1b6"
 }

package/src/components/features/features.js

@@ -19,6 +19,7 @@ class BdFeatures extends LitElement {
   constructor() {
     super();
     this._minHeight = 0;
+    this._resizeObserver = null;
   }
 
   _getCols() {
@@ -26,10 +27,33 @@ class BdFeatures extends LitElement {
   }
 
   async firstUpdated() {
+    if (document.fonts?.ready) {
+      await document.fonts.ready;
+    }
+
     await this._measureMaxHeight();
+
+    const container = this.renderRoot.querySelector(".bd-features-container");
+    if (container) {
+      this._resizeObserver = new ResizeObserver(() => {
+        this._equalizeRows();
+      });
+      this._resizeObserver.observe(container);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
+  }
+
+  _isVisible() {
+    return this.offsetWidth > 0 && this.offsetHeight > 0;
   }
 
   _equalizeRows() {
+    if (!this._isVisible()) return;
+
     const container = this.renderRoot.querySelector(".bd-features-container");
     if (!container) return;
 
@@ -37,37 +61,64 @@ class BdFeatures extends LitElement {
     const titles       = container.querySelectorAll(".col-title-wrapper");
     const descriptions = container.querySelectorAll(".col-description");
 
-    icons.forEach(el        => el.style.height = "");
-    titles.forEach(el       => el.style.height = "");
-    descriptions.forEach(el => el.style.height = "");
-
-    let maxH = 0;
-    icons.forEach(el => { if (el.scrollHeight > maxH) maxH = el.scrollHeight; });
-    icons.forEach(el => el.style.height = `${maxH}px`);
+    icons.forEach(el        => el.style.height = "auto");
+    titles.forEach(el       => el.style.height = "auto");
+    descriptions.forEach(el => el.style.height = "auto");
+
+    const measure = (els) => {
+      let maxH = 0;
+      els.forEach(el => {
+        const h = el.getBoundingClientRect().height;
+        if (h > maxH) maxH = h;
+      });
+      return maxH;
+    };
+
+    const iconMax = measure(icons);
+    const titleMax = measure(titles);
+    const descMax = measure(descriptions);
+
+    // Aplica doar daca > 0, altfel removeProperty
+    if (iconMax > 0) {
+      icons.forEach(el => el.style.height = `${iconMax}px`);
+    } else {
+      icons.forEach(el => el.style.removeProperty("height"));
+    }
 
-    maxH = 0;
-    titles.forEach(el => { if (el.scrollHeight > maxH) maxH = el.scrollHeight; });
-    titles.forEach(el => el.style.height = `${maxH}px`);
+    if (titleMax > 0) {
+      titles.forEach(el => el.style.height = `${titleMax}px`);
+    } else {
+      titles.forEach(el => el.style.removeProperty("height"));
+    }
 
-    maxH = 0;
-    descriptions.forEach(el => { if (el.scrollHeight > maxH) maxH = el.scrollHeight; });
-    descriptions.forEach(el => el.style.height = `${maxH}px`);
+    if (descMax > 0) {
+      descriptions.forEach(el => el.style.height = `${descMax}px`);
+    } else {
+      descriptions.forEach(el => el.style.removeProperty("height"));
+    }
   }
 
   async _measureMaxHeight() {
     const container = this.renderRoot.querySelector(".bd-features-container");
     if (!container) return;
 
+    // Daca e ascunsa, nu masura
+    if (!this._isVisible()) return;
+
     await this.updateComplete;
+
+    await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+
     this._equalizeRows();
-    await new Promise(resolve => requestAnimationFrame(resolve));
 
-    const h = container.scrollHeight;
+    await this.updateComplete;
+
+    const h = container.getBoundingClientRect().height;
     if (h > 0) {
       this._minHeight = h;
     }
 
-    await this.updateComplete;
+    await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
     this._equalizeRows();
   }
 
@@ -119,11 +170,14 @@ class BdFeatures extends LitElement {
   render() {
     const cols     = this._getCols();
     const colCount = cols.length;
+    const colWidth = 400;
+    const gap      = 32;
+    const maxWidth = colCount * colWidth + (colCount - 1) * gap;
 
     return html`
       <div
         class="bd-features-container"
-        style="grid-template-columns: repeat(${colCount}, 1fr); ${this._minHeight ? `min-height: ${this._minHeight}px;` : ""}"
+        style="grid-template-columns: repeat(${colCount}, 1fr); max-width: ${maxWidth}px; ${this._minHeight ? `min-height: ${this._minHeight}px;` : ""}"
       >
         ${cols.map(col => this._renderCol(col))}
       </div>

package/src/components/tabs/tabs.css.js

@@ -6,8 +6,8 @@ export default css`
   font-size: 100%;
   display: block;
   font-family: var(--typography-fontFamily-sans);
-  padding-top: var(--spacing-64);
-  padding-bottom: var(--spacing-64);
+  // padding-top: var(--spacing-64);
+  // padding-bottom: var(--spacing-64);
 }
 
 :host([bg-blue]) {