perf: header item responsive.

riccox · Jun 21, 2023 · 17db843 · 17db843
1 parent 47e1337
commit 17db843
Showing 1 changed file with 15 additions and 5 deletions.
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -93,22 +93,32 @@ export const Header: FC<Props> = ({ client }) => {
           <IconHomeBolt size={26} />
           <p>Home</p>
         </button>
+
         <p className={`text-2xl font-bold`}>{_.truncate(currentInstance?.name, { length: 16 })}</p>
         <p className={`text-2xl font-bold text-bw-800/50`}>#{currentInstance.id}</p>
-        <span className={`!cursor-pointer hover:underline badge outline cornered lg success`} onClick={onClickHost}>
+
+        <span
+          className={`!cursor-pointer hover:underline badge outline cornered lg success hidden 2xl:inline`}
+          onClick={onClickHost}
+        >
           Host: {_.truncate(currentInstance?.host, { length: 40 })}
         </span>
-        <p className={`font-bold `}>Updated: {getTimeText(stats?.lastUpdate)}</p>
-        <span className={`badge outline cornered lg primary`}>
+
+        <p className={`font-bold hidden xl:inline`}>Updated: {getTimeText(stats?.lastUpdate)}</p>
+
+        <span className={`badge outline cornered lg primary hidden xl:inline`}>
           DB Size: {_.ceil((stats?.databaseSize ?? 0) / 1048576, 2)} MB
         </span>
-        <span className={`badge light cornered lg ${health ? 'success' : 'warn'}`}>
+
+        <span className={`badge light cornered lg ${health ? 'success' : 'warn'} hidden xl:inline`}>
           Status: {health ? 'Available' : 'Unknown'}
         </span>
 
         <HoverCard withinPortal shadow="lg" radius={'lg'} transitionProps={{ transition: 'fade' }}>
           <HoverCard.Target>
-            <span className={`badge outline cornered lg primary`}>Meili Version: {version?.pkgVersion}</span>
+            <span className={`badge outline cornered lg primary hidden 2xl:inline`}>
+              Meili Version: {version?.pkgVersion}
+            </span>
           </HoverCard.Target>
           <HoverCard.Dropdown>
             Commit Date: {version?.commitDate} <br />