From 67f8d9ef476f5e021975a0b9953ed78b3fae8004 Mon Sep 17 00:00:00 2001
From: agatha197 <28584164+agatha197@users.noreply.github.com>
Date: Thu, 22 Aug 2024 08:33:01 +0000
Subject: [PATCH] style: remove bottom margin of model store error message
 (#2653)

### TL;DR

Improved error message display in ModelStoreListPage component.

### What changed?

Added a `style` prop to the `Typography.Paragraph` component within the `Alert` message. This sets the `marginBottom` to 0, removing any extra space below the error message.

### How to test?

1. Navigate to the ModelStoreListPage.
2. Trigger an error condition that displays an error message.
3. Verify that the error message is displayed without extra bottom margin.
4. Compare with the previous version to ensure the spacing has been reduced.

### Why make this change?

This change improves the visual consistency and compactness of error messages in the ModelStoreListPage. By removing the extra bottom margin, it ensures that error messages are displayed more efficiently, especially in cases where multiple errors might be shown.

---

<!--
Please precisely, concisely, and concretely describe what this PR changes, the rationale behind codes,
and how it affects the users and other developers.
-->

**Checklist:** (if applicable)

- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [x] Specific setting for review (eg., KB link, endpoint or how to setup)
- [x] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after
---
 react/src/components/ModelCardModal.tsx | 7 ++++++-
 react/src/pages/ModelStoreListPage.tsx  | 6 +++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/react/src/components/ModelCardModal.tsx b/react/src/components/ModelCardModal.tsx
index b8f9bc2a99..9e22386ab7 100644
--- a/react/src/components/ModelCardModal.tsx
+++ b/react/src/components/ModelCardModal.tsx
@@ -132,7 +132,12 @@ const ModelCardModal: React.FC<ModelCardModalProps> = ({
     >
       {model_card?.error_msg ? (
         <Flex direction="column" wrap="wrap" align="stretch" gap={'sm'}>
-          <Alert message={model_card?.error_msg} type="error" showIcon />
+          <Alert
+            message={model_card?.error_msg}
+            type="error"
+            showIcon
+            style={{ width: '100%' }}
+          />
           <Empty
             style={{ width: '100%' }}
             image={Empty.PRESENTED_IMAGE_SIMPLE}
diff --git a/react/src/pages/ModelStoreListPage.tsx b/react/src/pages/ModelStoreListPage.tsx
index 0d9fc67b01..7235ade9e0 100644
--- a/react/src/pages/ModelStoreListPage.tsx
+++ b/react/src/pages/ModelStoreListPage.tsx
@@ -298,8 +298,12 @@ const ModelStoreListPage: React.FC = () => {
                   ))}
                 {item?.error_msg && (
                   <Alert
+                    style={{ width: '100%' }}
                     message={
-                      <Typography.Paragraph ellipsis={{ rows: 6 }}>
+                      <Typography.Paragraph
+                        ellipsis={{ rows: 6 }}
+                        style={{ marginBottom: 0 }}
+                      >
                         {item.error_msg}
                       </Typography.Paragraph>
                     }