fix: validator uptime header

CHANGELOG.md

@@ -138,6 +138,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#889](https://github.com/alleslabs/celatone-frontend/pull/889) Fix overflow validator table header
 - [#886](https://github.com/alleslabs/celatone-frontend/pull/886) Fix tx detail message newline
 - [#885](https://github.com/alleslabs/celatone-frontend/pull/885) Fix voted proposals freeze columns
 - [#881](https://github.com/alleslabs/celatone-frontend/pull/881) Fix abi option boolean problem

src/lib/pages/validators/components/validators-table/ValidatorsTableHeader.tsx

@@ -6,6 +6,7 @@ import { ValidatorOrder } from "../../types";
 import { trackUseSort } from "lib/amplitude";
 import { CustomIcon } from "lib/components/icon";
 import { TableHeader } from "lib/components/table";
+import { TooltipInfo } from "lib/components/Tooltip";
 
 const SortIcon = ({
   column,
@@ -29,6 +30,9 @@ const SortIcon = ({
 
 const StyledTableHeader = chakra(TableHeader, {
   baseStyle: {
+    display: "flex",
+    gap: 1,
+    alignItems: "center",
     py: 4,
     cursor: "pointer",
     transition: "all 0.25s ease-in-out",
@@ -102,7 +106,8 @@ export const ValidatorsTableHeader = ({
         />
       </StyledTableHeader>
       <StyledTableHeader onClick={handleOrderChange(ValidatorOrder.Uptime)}>
-        Uptime (100B)
+        Uptime
+        <TooltipInfo label="Calculated from recent 100 blocks" />
         <SortIcon
           column={ValidatorOrder.Uptime}
           order={order}

src/lib/pages/validators/components/validators-table/ValidatorsTableMobileCard.tsx

@@ -72,62 +72,65 @@ export const ValidatorsTableMobileCard = ({
         </Flex>
       }
       middleContent={
-        <Flex direction="column" gap={3}>
-          <Flex gap={3} w="full">
-            <Flex direction="column" flex="1">
-              <MobileLabel label="Voting Power" />
-              <Text variant="body2" color="text.main">
-                {formatPrettyPercent(
-                  divWithDefault(
-                    validator.votingPower,
-                    totalVotingPower,
-                    0
-                  ).toNumber() as Ratio<number>,
-                  2,
-                  true
-                )}
-              </Text>
-              <Text variant="body3" color="text.dark">
-                (
-                {formatUTokenWithPrecision(
-                  validator.votingPower as U<Token<Big>>,
-                  denomToken?.precision ?? 0,
-                  false,
-                  2
-                )}
-                {denomToken
-                  ? ` ${getTokenLabel(denomToken.denom, denomToken.symbol)}`
-                  : undefined}
-                )
-              </Text>
-            </Flex>
-            <Flex direction="column" flex="1">
-              <MobileLabel label="Uptime (100B)" />
-              <Text
-                variant="body2"
-                color={isZeroUptime ? "error.main" : "text.main"}
-                fontWeight={isZeroUptime ? 700 : undefined}
-              >
-                {formatPrettyPercent(
-                  ((validator.uptime ?? 0) / 100) as Ratio<number>,
-                  0,
-                  true
-                )}
-              </Text>
-            </Flex>
+        <Flex gap={3}>
+          <Flex direction="column" flex="1">
+            <MobileLabel label="Voting Power" />
+            <Text variant="body2" color="text.main">
+              {formatPrettyPercent(
+                divWithDefault(
+                  validator.votingPower,
+                  totalVotingPower,
+                  0
+                ).toNumber() as Ratio<number>,
+                2,
+                true
+              )}
+            </Text>
+            <Text variant="body3" color="text.dark">
+              (
+              {formatUTokenWithPrecision(
+                validator.votingPower as U<Token<Big>>,
+                denomToken?.precision ?? 0,
+                false,
+                2
+              )}
+              {denomToken
+                ? ` ${getTokenLabel(denomToken.denom, denomToken.symbol)}`
+                : undefined}
+              )
+            </Text>
           </Flex>
           <Flex direction="column" flex="1">
-            <MobileLabel label="Commission" />
+            <MobileLabel label="Uptime" />
             <Text
               variant="body2"
-              color={isMinCommissionRate ? "success.main" : "text.main"}
-              fontWeight={isMinCommissionRate ? 700 : undefined}
+              color={isZeroUptime ? "error.main" : "text.main"}
+              fontWeight={isZeroUptime ? 700 : undefined}
             >
-              {formatPrettyPercent(validator.commissionRate, 2, true)}
+              {formatPrettyPercent(
+                ((validator.uptime ?? 0) / 100) as Ratio<number>,
+                0,
+                true
+              )}
+            </Text>
+            <Text variant="body3" color="text.dark">
+              (Recent 100 blocks)
             </Text>
           </Flex>
         </Flex>
       }
+      bottomContent={
+        <Flex direction="column">
+          <MobileLabel label="Commission" />
+          <Text
+            variant="body2"
+            color={isMinCommissionRate ? "success.main" : "text.main"}
+            fontWeight={isMinCommissionRate ? 700 : undefined}
+          >
+            {formatPrettyPercent(validator.commissionRate, 2, true)}
+          </Text>
+        </Flex>
+      }
     />
   );
 };