From 427e9e3eb7684a58a4c2cb597283c5a5319d9dd3 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 15 Sep 2024 23:48:50 +0800
Subject: [PATCH] refactor: improve some style in server status page

---
 .../components/monitor/MonitorListItem.tsx    | 22 +++++++++----------
 .../monitor/StatusPage/EditForm.tsx           |  3 ++-
 .../components/monitor/StatusPage/index.tsx   |  6 ++---
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/client/components/monitor/MonitorListItem.tsx b/src/client/components/monitor/MonitorListItem.tsx
index 79502a1..99e2829 100644
--- a/src/client/components/monitor/MonitorListItem.tsx
+++ b/src/client/components/monitor/MonitorListItem.tsx
@@ -86,8 +86,8 @@ export const MonitorListItem: React.FC<{
         </span>
       </div>
 
-      <div className="pl-2">
-        <div className="text-base">{monitorName}</div>
+      <div className="flex-1 pl-2">
+        <div className="text-nowrap text-base">{monitorName}</div>
         {/* <div>
               {monitor.tags.map((tag) => (
                 <span
@@ -100,7 +100,15 @@ export const MonitorListItem: React.FC<{
             </div> */}
       </div>
 
-      <div className="flex-1 flex-shrink items-center overflow-hidden px-1">
+      {showCurrentResponse && latestResponse && (
+        <Tooltip title={t('Current')}>
+          <div className="px-2 text-sm text-gray-800 dark:text-gray-400">
+            {latestResponse}
+          </div>
+        </Tooltip>
+      )}
+
+      <div className="flex-shrink basis-[160px] items-center overflow-hidden px-1">
         <MonitorHealthBar
           healthBarClassName="justify-end"
           workspaceId={workspaceId}
@@ -109,14 +117,6 @@ export const MonitorListItem: React.FC<{
           onBeatsItemUpdate={setBeats}
         />
       </div>
-
-      {showCurrentResponse && latestResponse && (
-        <Tooltip title={t('Current')}>
-          <div className="px-2 text-sm text-gray-800 dark:text-gray-400">
-            {latestResponse}
-          </div>
-        </Tooltip>
-      )}
     </div>
   );
 });
diff --git a/src/client/components/monitor/StatusPage/EditForm.tsx b/src/client/components/monitor/StatusPage/EditForm.tsx
index 4db298f..265c233 100644
--- a/src/client/components/monitor/StatusPage/EditForm.tsx
+++ b/src/client/components/monitor/StatusPage/EditForm.tsx
@@ -227,6 +227,7 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
 
                 <Button
                   variant="dashed"
+                  type="button"
                   onClick={() =>
                     append({
                       id: '',
@@ -242,7 +243,7 @@ export const MonitorStatusPageEditForm: React.FC<MonitorStatusPageEditFormProps>
             )}
           />
 
-          <div className="!mt-8 flex gap-2">
+          <div className="!mt-8 flex justify-end gap-2">
             <Button type="submit" loading={isLoading}>
               {props.saveButtonLabel ?? t('Save')}
             </Button>
diff --git a/src/client/components/monitor/StatusPage/index.tsx b/src/client/components/monitor/StatusPage/index.tsx
index 0e76902..ac7d189 100644
--- a/src/client/components/monitor/StatusPage/index.tsx
+++ b/src/client/components/monitor/StatusPage/index.tsx
@@ -106,11 +106,11 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
         <div
           className={clsx(
             'mx-auto overflow-auto px-4 py-8',
-            !editMode ? 'w-4/5 sm:w-full' : 'w-2/3'
+            !editMode ? 'w-full' : 'w-2/3'
           )}
         >
           <div className="flex">
-            <div className="mb-4 flex-1 text-2xl">{info?.title}</div>
+            <div className="mb-4 flex-1 text-2xl font-bold">{info?.title}</div>
 
             <ColorSchemeSwitcher />
           </div>
@@ -132,7 +132,7 @@ export const MonitorStatusPage: React.FC<MonitorStatusPageProps> = React.memo(
             <MarkdownViewer value={info?.description ?? ''} />
           </div>
 
-          <div className="mb-2 text-lg">{t('Services')}</div>
+          <div className="mb-2 text-lg font-semibold">{t('Services')}</div>
 
           {info && (
             <StatusPageServices