Merge pull request #766 from IT-Academy-BCN/feature#187-new-cards-display

fix(challenge): show related cards in grid layout

Author: ivilarop

CHANGELOG.md

@@ -4,6 +4,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+### [ita-challenges-frontend-3.27.3-RELEASE] - 2026-02-23
+
+### Changed
+- Display related challenge cards in a responsive grid layout (3 columns on desktop, 1 column on mobile).
 ### [ita-challenges-frontend-3.27.2-RELEASE] - 2026-02-23
 
 ### Fixed

conf/.env.CI.dev

@@ -1,2 +1,2 @@
 MICROSERVICE_DEPLOY=ita-challenges-frontend
-MICROSERVICE_VERSION=3.27.2-RELEASE
+MICROSERVICE_VERSION=3.27.3-RELEASE

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ita-challenges-frontend",
-  "version": "3.27.2-RELEASE",
+  "version": "3.27.3-RELEASE",
    "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.dev.json",

src/app/modules/challenge/components/challenge-info/challenge-info.component.html

@@ -178,7 +178,7 @@ <h3>{{ "modules.challenge.info.related" | translate }}</h3>
         <!-- Display related challenges when available. By now this
           is a temporary mocked solution for demo purposes -->
         <section *ngIf="relatedChallenges && relatedChallenges.length > 0" class="info-card">
-          <div class="d-flex flex-column gap-3">
+          <div class="related-challenges-grid">
             <app-challenge-card *ngFor="let challenge of relatedChallenges"
               [title]="challenge.challenge_title | dynamicTranslate" 
               [creation_date]="challenge.creation_date"

src/app/modules/challenge/components/challenge-info/challenge-info.component.scss

@@ -56,6 +56,12 @@
   width: 80%;
 }
 
+.related-challenges-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+}
+
 .side-by-side {
   width: 100%;
   max-width: 100%;
@@ -176,6 +182,10 @@ p, ul li {
 
 
 @media screen and (max-width: 768px) {
+  .related-challenges-grid {
+    grid-template-columns: 1fr;
+  }
+
   .details-body {
     flex-direction: column;