From cf36ac3b4d6edec2bcd7cf15bb380b2a8acb6f5f Mon Sep 17 00:00:00 2001
From: LasseStaus <l.stausgaard@gmail.com>
Date: Thu, 18 Apr 2024 12:41:23 +0200
Subject: [PATCH] Update CSS for recommended-material component and skeleton.

These changes aim to:
- Ensure that the individual recommended-materials in the grid, will "fill out" their respective part of the grid.

- Skeletons / non-skeletons should be equally large.

- That the content will not jump depending on the cover image frame.

DDFFORM-490
---
 .../recommended-material-skeleton.scss                    | 1 +
 .../recommended-material/recommended-material.scss        | 8 +++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/stories/Library/recommended-material/recommended-material-skeleton.scss b/src/stories/Library/recommended-material/recommended-material-skeleton.scss
index c1c508903..b870d53fb 100644
--- a/src/stories/Library/recommended-material/recommended-material-skeleton.scss
+++ b/src/stories/Library/recommended-material/recommended-material-skeleton.scss
@@ -16,6 +16,7 @@
     display: flex;
     flex-direction: column;
     gap: 5px;
+    margin-bottom: 12px;
   }
   .ssc-line {
     width: 60%;
diff --git a/src/stories/Library/recommended-material/recommended-material.scss b/src/stories/Library/recommended-material/recommended-material.scss
index e4e8f76b1..e0447f4b5 100644
--- a/src/stories/Library/recommended-material/recommended-material.scss
+++ b/src/stories/Library/recommended-material/recommended-material.scss
@@ -12,13 +12,15 @@ $_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
   background-color: $color__global-secondary;
   max-height: $_recommended-material-max-height;
   width: 100%;
+  height: 100%;
   padding: $s-md;
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: auto 1fr auto;
+  grid-auto-rows: min-content;
   row-gap: $s-lg;
   justify-items: center;
   align-items: center;
+  align-content: space-between;
   aspect-ratio: $_aspect-ratio-mobile;
 
   @include media-query__small {
@@ -53,12 +55,12 @@ $_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
 .recommended-material--in-grid {
   max-width: unset;
   border: 1px solid $color__global-tertiary-1;
+  aspect-ratio: unset;
 
   > .cover {
-    height: 100%;
+    height: $MATERIAL_LARGE_DESKTOP;
     max-height: $MATERIAL_LARGE_DESKTOP;
     @include media-query__medium {
-      height: $MATERIAL_LARGE_DESKTOP;
       max-height: unset;
     }
   }