@repobit/dex-system-design 0.23.89 → 0.23.90

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.90](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.23.89...@repobit/dex-system-design@0.23.90) (2026-07-17)
+
+### Bug Fixes
+
+* **DEX-1014:** card adjustments
+
+
 ## [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.23.89",
+  "version": "0.23.90",
   "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.85",
-    "@repobit/dex-store-elements": "1.5.2",
+    "@repobit/dex-store": "1.3.86",
+    "@repobit/dex-store-elements": "1.5.3",
     "lit": "^3.3.2"
   },
   "devDependencies": {
@@ -92,5 +92,5 @@
   "volta": {
     "node": "24.14.0"
   },
-  "gitHead": "655316a0cdee9b7084c8bd4c8e85ca31b45ff55b"
+  "gitHead": "abf075834b7c0fae83b233530b2bd5c1f1e9db09"
 }

package/src/components/cards/card.css.js

@@ -57,7 +57,7 @@ export default css`
     position: relative;
     width: 100%;
     flex-direction: column;
-    max-width: 1400px;
+    max-width: 1290px;
     margin: 0 auto;
     padding-top: var(--spacing-64);
     padding-bottom: var(--spacing-64);
@@ -212,13 +212,17 @@ export default css`
       padding: 0;
       align-items: stretch;
     }
-
+  ::slotted(bd-card-section) {
+      padding: 0 20px;
+  }
     ::slotted(bd-card-item) {
       width: 100% !important;
       max-width: 100% !important;
       flex: 0 0 auto !important;
       min-width: 0 !important;
-      margin: 0 !important;
+      margin: 0 auto !important;
+       padding: 0 20px;
+
     }
 
     .bd-light-box-s {

package/src/components/cards/card.js

@@ -225,48 +225,21 @@ class CardItem extends LitElement {
     const iconEl = this.querySelector("[slot='icon']");
 
     if (iconEl) {
-      const clone     = iconEl.cloneNode(true);
-      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`;
+      const clone = iconEl.cloneNode(true);
+
+      clone.style.maxWidth  = "48px";
+      clone.style.maxHeight = "48px";
+      clone.style.width     = "48px";
+      clone.style.height    = "48px";
       clone.style.objectFit = "contain";
       clone.style.display   = "block";
 
       const innerImg = clone.querySelector("img");
       if (innerImg) {
-        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.maxWidth  = "48px";
+        innerImg.style.maxHeight = "48px";
+        innerImg.style.width     = "48px";
+        innerImg.style.height    = "48px";
         innerImg.style.objectFit = "contain";
         innerImg.style.display   = "block";
         innerImg.removeAttribute("width");