@repobit/dex-system-design 0.23.88 → 0.23.89

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.23.89](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.88...@repobit/dex-system-design@0.23.89) (2026-07-16)
+
+### Bug Fixes
+
+* **DEX-1014:** card adjustments
+
+
 ## [0.23.88](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.87...@repobit/dex-system-design@0.23.88) (2026-07-16)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.88",
+  "version": "0.23.89",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -74,8 +74,8 @@
     "url": "https://github.com/bitdefender/dex-core/issues"
   },
   "dependencies": {
-    "@repobit/dex-store": "1.3.84",
-    "@repobit/dex-store-elements": "1.5.1",
+    "@repobit/dex-store": "1.3.85",
+    "@repobit/dex-store-elements": "1.5.2",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -92,5 +92,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "971af131324acdf322e7a01fff6549cebeabeab2"
+  "gitHead": "655316a0cdee9b7084c8bd4c8e85ca31b45ff55b"
 }

package/src/components/cards/card.js

@@ -60,10 +60,6 @@ class Card extends LitElement {
     const items = Array.from(this.querySelectorAll("bd-card-item"));
     if (!items.length) return;
 
-    console.log('[bd-card-section] _equalizeHeights called', {
-      innerWidth: window.innerWidth,
-      items     : items.length
-    });
 
     if (window.innerWidth <= 768) {
       items.forEach(item => {
@@ -93,22 +89,6 @@ class Card extends LitElement {
     });
 
     requestAnimationFrame(() => {
-      // Log box computed styles
-      console.log('[bd-card-section] box computed styles:', items.map(item => {
-        const box = item.renderRoot?.querySelector(".bd-light-box-s");
-        if (!box) return null;
-        const cs = getComputedStyle(box);
-        return {
-          width        : box.getBoundingClientRect().width,
-          computedWidth: cs.width,
-          flex         : cs.flex,
-          minWidth     : cs.minWidth,
-          inlineWidth  : box.style.width,
-          cssVarOnHost : getComputedStyle(item).getPropertyValue('--bd-card-width'),
-          cssVarOnBox  : cs.getPropertyValue('--bd-card-width')
-        };
-      }));
-
       // Egalizare icon wrappers
       let maxIcon = 0;
       items.forEach(item => {
@@ -242,35 +222,51 @@ class CardItem extends LitElement {
   }
 
   _renderIcon() {
-    const SMALL_ICON_THRESHOLD = 120;
-    const SMALL_ICON_SIZE = 40;
-
     const iconEl = this.querySelector("[slot='icon']");
 
     if (iconEl) {
       const clone     = iconEl.cloneNode(true);
-      const originalW = iconEl.getAttribute("width");
-      const originalH = iconEl.getAttribute("height");
-
-      const isSmallIcon =
-        (originalW && parseInt(originalW) <= SMALL_ICON_THRESHOLD) ||
-      (originalH && parseInt(originalH) <= SMALL_ICON_THRESHOLD);
-
-      const targetSize = isSmallIcon ? SMALL_ICON_SIZE : 120;
-
-      clone.style.maxWidth  = `${targetSize}px`;
-      clone.style.maxHeight = `${targetSize}px`;
-      clone.style.width     = `${targetSize}px`;
-      clone.style.height    = `${targetSize}px`;
+      const originalW = parseInt(iconEl.getAttribute("width") || "0");
+      const originalH = parseInt(iconEl.getAttribute("height") || "0");
+
+      const _calcSize = (w, h, el) => {
+        // Daca nu are atribute, incearca sa citeasca dimensiunile reale
+        if (!w && !h && el) {
+          const rect = el.getBoundingClientRect();
+          w = Math.round(rect.width);
+          h = Math.round(rect.height);
+          console.log('[bd-card-icon] fallback dimensions from rect:', { w, h });
+        }
+
+        // Daca tot nu stim dimensiunile, lasam ca e imagine mare
+        if (!w && !h) return { w: 120, h: 120 };
+
+        const dim = Math.max(w, h);
+        if (dim <= 50)  return { w, h };
+        if (dim <= 100) return { w: 48, h: 48 };
+        return { w: 120, h: 120 };
+      };
+
+      const { w: finalW, h: finalH } = _calcSize(originalW, originalH, iconEl);
+
+
+      clone.style.maxWidth  = "120px";
+      clone.style.maxHeight = "120px";
+      clone.style.width     = `${finalW}px`;
+      clone.style.height    = `${finalH}px`;
       clone.style.objectFit = "contain";
       clone.style.display   = "block";
 
       const innerImg = clone.querySelector("img");
       if (innerImg) {
-        innerImg.style.maxWidth  = `${targetSize}px`;
-        innerImg.style.maxHeight = `${targetSize}px`;
-        innerImg.style.width     = `${targetSize}px`;
-        innerImg.style.height    = `${targetSize}px`;
+        const imgW = parseInt(innerImg.getAttribute("width") || "0");
+        const imgH = parseInt(innerImg.getAttribute("height") || "0");
+        const { w: imgFinalW, h: imgFinalH } = _calcSize(imgW, imgH);
+
+        innerImg.style.maxWidth  = "120px";
+        innerImg.style.maxHeight = "120px";
+        innerImg.style.width     = `${imgFinalW}px`;
+        innerImg.style.height    = `${imgFinalH}px`;
         innerImg.style.objectFit = "contain";
         innerImg.style.display   = "block";
         innerImg.removeAttribute("width");
@@ -290,7 +286,6 @@ class CardItem extends LitElement {
 
     return "";
   }
-
   _hasContent() {
     const slottedNodes = [...this.childNodes].filter((node) => {
       if (node.nodeType === Node.ELEMENT_NODE) {