From bc2a007068bb8a9d4c5a8e411fcb2c0081b82d36 Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Fri, 17 Jan 2025 11:30:32 +0100
Subject: [PATCH] fix(card): make the UI more responsive

There is a good chance that the `value` which will
be rendered in markdown is very large.
In such cases, the consumer may limit the `height` or
`max-height` of the component, which will result in
the content to overflow out of the card.
The component should have a more responsive UI
when its size is more limited by the consumer.
---
 src/components/card/card.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index 5eb3f41bb4..4d65e27840 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -55,7 +55,6 @@ section {
 }
 
 img {
-    flex-shrink: 0;
     transition: filter 0.6s ease;
     object-fit: cover;
     border-radius: calc(
@@ -66,6 +65,8 @@ img {
     }
 
     :host(limel-card[orientation='landscape']) & {
+        flex-shrink: 0;
+
         max-width: 40%;
         height: 100%;
     }
@@ -78,10 +79,12 @@ img {
 }
 
 limel-markdown {
+    overflow-y: auto;
     padding: 0.5rem 0.75rem;
 }
 
 header {
+    flex-shrink: 0;
     display: flex;
     justify-content: center;
 
@@ -131,8 +134,8 @@ header {
 }
 
 limel-action-bar {
+    flex-shrink: 0;
     --action-bar-background-color: transparent;
-    padding: 0.5rem;
     margin-left: auto;
 }