@@ -63,6 +63,16 @@ const CardImage = styled.img`
63
63
border-radius: 4px;
64
64
` ;
65
65
66
+ const StyledParagraph = styled ( Paragraph ) `
67
+ img {
68
+ max-width: 100%; /* or whatever you want */
69
+ height: auto; /* keep aspect ratio */
70
+ object-fit: contain; /* prevent distortion */
71
+ display: block; /* optional: avoid inline weirdness */
72
+ margin: 8px 0; /* optional spacing */
73
+ }
74
+ ` ;
75
+
66
76
const cardGridStyle = { padding :"8px" } ;
67
77
68
78
type NewsEntry = any ; // replace with actual types if available
@@ -139,7 +149,7 @@ export function NewsLayout() {
139
149
hoverable
140
150
cover = {
141
151
< a href = { url } target = "_blank" rel = "noreferrer" >
142
- < CardImage src = { coverImage } alt = { htmlTitle } />
152
+ < CardImage src = { coverImage } alt = { htmlTitle } style = { { minHeight : "500px" } } />
143
153
</ a >
144
154
}
145
155
>
@@ -223,9 +233,9 @@ export function NewsLayout() {
223
233
extra = { < a href = { c . html_url } target = "_blank" rel = "noreferrer" > View</ a > }
224
234
>
225
235
< Paragraph type = "secondary" > { new Date ( c . published_at ) . toLocaleDateString ( ) } </ Paragraph >
226
- < Paragraph ellipsis = { { rows :5 } } >
236
+ < StyledParagraph ellipsis = { { rows :10 } } >
227
237
< span dangerouslySetInnerHTML = { { __html :c . body . replace ( / \r \n / g, "<br />" ) } } />
228
- </ Paragraph >
238
+ </ StyledParagraph >
229
239
</ Card >
230
240
</ Col >
231
241
) ;
@@ -234,8 +244,6 @@ export function NewsLayout() {
234
244
235
245
< Divider />
236
246
237
-
238
-
239
247
</ Card >
240
248
241
249
</ NewsView >