refactor: improve some style in server status page

src/client/components/monitor/MonitorListItem.tsx

@@ -86,8 +86,8 @@ export const MonitorListItem: React.FC<{
         </span>
       </div>
 
-      <div className="pl-2">
+      <div className="flex-1 pl-2">
-        <div className="text-base">{monitorName}</div>
+        <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>
   );
 });

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>

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