@repobit/dex-system-design 0.23.88 → 0.23.90

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 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
+
+* **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.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.84",
-    "@repobit/dex-store-elements": "1.5.1",
+    "@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": "971af131324acdf322e7a01fff6549cebeabeab2"
+  "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

@@ -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,24 @@ 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 clone = iconEl.cloneNode(true);
 
-      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`;
+      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) {
-        innerImg.style.maxWidth  = `${targetSize}px`;
-        innerImg.style.maxHeight = `${targetSize}px`;
-        innerImg.style.width     = `${targetSize}px`;
-        innerImg.style.height    = `${targetSize}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");
@@ -290,7 +259,6 @@ class CardItem extends LitElement {
 
     return "";
   }
-
   _hasContent() {
     const slottedNodes = [...this.childNodes].filter((node) => {
       if (node.nodeType === Node.ELEMENT_NODE) {