From 9bb3751b14cf61800a73886d31f8f0d5f499ff91 Mon Sep 17 00:00:00 2001
From: Nonumpa <acerxp511@msn.com>
Date: Sun, 9 Jul 2023 14:44:36 +0800
Subject: [PATCH 1/2] feat(article): ux improvements of images in article page

fix #540
---
 components/ListPageDisplays/ArticleCard.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/ListPageDisplays/ArticleCard.js b/components/ListPageDisplays/ArticleCard.js
index b12cb23a..239a6b18 100644
--- a/components/ListPageDisplays/ArticleCard.js
+++ b/components/ListPageDisplays/ArticleCard.js
@@ -88,6 +88,7 @@ const useStyles = makeStyles(theme => ({
   attachment: {
     minWidth: 0, // Don't use intrinsic image width as flex item min-size
     maxHeight: '10em', // Don't let image rows take too much vertical space
+    margin: '0 1em 0 0', // Add right margin that separate attachment and text with a space
   },
 }));
 
@@ -122,6 +123,7 @@ function ArticleCard({ article, highlight = '' }) {
                 <span>{c('Info box').t`reports`}</span>
               </div>
             </div>
+            <Thumbnail article={article} className={classes.attachment} />
             {(text || highlight) && (
               <ExpandableText className={classes.content} lineClamp={3}>
                 {highlight
@@ -129,7 +131,6 @@ function ArticleCard({ article, highlight = '' }) {
                   : text}
               </ExpandableText>
             )}
-            <Thumbnail article={article} className={classes.attachment} />
           </div>
         </ListPageCard>
       </a>

From 30b8a6c767460d987fa6fb7f4cc3ccd7e859da65 Mon Sep 17 00:00:00 2001
From: Nonumpa <acerxp511@msn.com>
Date: Sun, 9 Jul 2023 14:56:29 +0800
Subject: [PATCH 2/2] test(article): update ListPageCards storyshot

---
 .../ListPageCards.stories.storyshot           | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot b/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
index 00579990..5d657009 100644
--- a/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
+++ b/components/ListPageDisplays/__snapshots__/ListPageCards.stories.storyshot
@@ -83,6 +83,19 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </span>
                   </div>
                 </div>
+                <Thumbnail
+                  article={
+                    Object {
+                      "articleType": "TEXT",
+                      "createdAt": "2020-01-01T00:00:00Z",
+                      "id": "id1",
+                      "replyCount": 3,
+                      "replyRequestCount": 4,
+                      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+                    }
+                  }
+                  className="makeStyles-attachment"
+                />
                 <ExpandableText
                   className="makeStyles-content"
                   lineClamp={3}
@@ -102,19 +115,6 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </div>
                   </div>
                 </ExpandableText>
-                <Thumbnail
-                  article={
-                    Object {
-                      "articleType": "TEXT",
-                      "createdAt": "2020-01-01T00:00:00Z",
-                      "id": "id1",
-                      "replyCount": 3,
-                      "replyRequestCount": 4,
-                      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                    }
-                  }
-                  className="makeStyles-attachment"
-                />
               </div>
             </article>
           </ListPageCard>
@@ -210,6 +210,19 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </span>
                   </div>
                 </div>
+                <Thumbnail
+                  article={
+                    Object {
+                      "articleType": "TEXT",
+                      "createdAt": "2019-01-01T00:00:00Z",
+                      "id": "id2",
+                      "replyCount": 0,
+                      "replyRequestCount": 999,
+                      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu ex augue. Etiam posuere sagittis iaculis. Vestibulum sollicitudin nec felis a mollis. Phasellus ut est velit. Proin fermentum arcu ornare quam vulputate, vel eleifend velit ultrices. Fusce tincidunt vel urna at luctus.",
+                    }
+                  }
+                  className="makeStyles-attachment"
+                />
                 <ExpandableText
                   className="makeStyles-content"
                   lineClamp={3}
@@ -261,19 +274,6 @@ exports[`Storyshots ListPageDisplays/ListPageCards Article Cards 1`] = `
                     </div>
                   </div>
                 </ExpandableText>
-                <Thumbnail
-                  article={
-                    Object {
-                      "articleType": "TEXT",
-                      "createdAt": "2019-01-01T00:00:00Z",
-                      "id": "id2",
-                      "replyCount": 0,
-                      "replyRequestCount": 999,
-                      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu ex augue. Etiam posuere sagittis iaculis. Vestibulum sollicitudin nec felis a mollis. Phasellus ut est velit. Proin fermentum arcu ornare quam vulputate, vel eleifend velit ultrices. Fusce tincidunt vel urna at luctus.",
-                    }
-                  }
-                  className="makeStyles-attachment"
-                />
               </div>
             </article>
           </ListPageCard>