[After/Into #880] feat: dynamic validator badge width

CHANGELOG.md

@@ -101,6 +101,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#883](https://github.com/alleslabs/celatone-frontend/pull/883) Improve validator badge to have a dynamic width
 - [#884](https://github.com/alleslabs/celatone-frontend/pull/884) Bump cosmjs tx parsing problem
 - [#861](https://github.com/alleslabs/celatone-frontend/pull/861) Upgrade json schema package version
 - [#871](https://github.com/alleslabs/celatone-frontend/pull/871) Move filter and search logic to API

src/lib/components/CopyLink.tsx

@@ -72,7 +72,7 @@ export const CopyLink = ({
         {...flexProps}
       >
         <Text
-          wordBreak={{ base: "break-all", md: "inherit" }}
+          wordBreak="break-all"
           variant="body2"
           color="secondary.main"
           transition="all 0.25s ease-in-out"

src/lib/components/ExplorerLink.tsx

@@ -31,7 +31,6 @@ interface ExplorerLinkProps extends FlexProps {
   showCopyOnHover?: boolean;
   isReadOnly?: boolean;
   textFormat?: "truncate" | "ellipsis" | "normal";
-  maxWidth?: string;
   textVariant?: TextProps["variant"];
   ampCopierSection?: string;
   openNewTab?: boolean;
@@ -106,7 +105,6 @@ const LinkRender = ({
   hrefLink,
   textValue,
   isEllipsis,
-  maxWidth,
   textVariant,
   openNewTab,
 }: {
@@ -115,7 +113,6 @@ const LinkRender = ({
   hrefLink: string;
   textValue: string;
   isEllipsis: boolean;
-  maxWidth: ExplorerLinkProps["maxWidth"];
   textVariant: TextProps["variant"];
   openNewTab: Option<boolean>;
 }) => {
@@ -124,10 +121,7 @@ const LinkRender = ({
     <Text
       variant={textVariant}
       color="secondary.main"
-      transition="all 0.25s ease-in-out"
-      _hover={{ color: "secondary.light" }}
       className={isEllipsis ? "ellipsis" : undefined}
-      maxW={maxWidth}
       pointerEvents={hrefLink ? "auto" : "none"}
       wordBreak={{ base: "break-all", md: "inherit" }}
     >
@@ -136,7 +130,12 @@ const LinkRender = ({
   );
 
   return isInternal && !openNewTab ? (
-    <AppLink href={hrefLink} passHref onClick={(e) => e.stopPropagation()}>
+    <AppLink
+      href={hrefLink}
+      passHref
+      onClick={(e) => e.stopPropagation()}
+      style={{ overflow: "hidden" }}
+    >
       {textElement}
     </AppLink>
   ) : (
@@ -149,6 +148,7 @@ const LinkRender = ({
         if (!isInternal) trackMintScan(type);
         e.stopPropagation();
       }}
+      style={{ overflow: "hidden" }}
     >
       {textElement}
     </a>
@@ -163,7 +163,6 @@ export const ExplorerLink = ({
   showCopyOnHover = false,
   isReadOnly = false,
   textFormat = "truncate",
-  maxWidth = "160px",
   textVariant = "body2",
   ampCopierSection,
   openNewTab,
@@ -211,7 +210,6 @@ export const ExplorerLink = ({
         hrefLink={link}
         textValue={textValue}
         isEllipsis={textFormat === "ellipsis"}
-        maxWidth={maxWidth}
         textVariant={textVariant}
         openNewTab={openNewTab}
       />

src/lib/components/ValidatorBadge.tsx

@@ -13,7 +13,6 @@ interface ValidatorBadgeProps {
   validator: Nullable<Validator>;
   badgeSize?: ImageProps["boxSize"];
   ampCopierSection?: string;
-  maxWidth?: string;
   hasLabel?: boolean;
   moreInfo?: JSX.Element;
 }
@@ -22,7 +21,6 @@ export const ValidatorBadge = ({
   validator,
   badgeSize = 10,
   ampCopierSection,
-  maxWidth = "160px",
   hasLabel = true,
   moreInfo,
 }: ValidatorBadgeProps) => {
@@ -37,7 +35,7 @@ export const ValidatorBadge = ({
     <Flex alignItems="center" gap={2} w="full">
       <ValidatorImage validator={validator} boxSize={badgeSize} />
       {validator ? (
-        <Flex direction="column" w="full">
+        <Flex direction="column" w="full" minW={0}>
           {isMobile && hasLabel && <MobileLabel label="Validator" />}
           <ExplorerLink
             type="validator_address"
@@ -51,7 +49,6 @@ export const ValidatorBadge = ({
             isReadOnly={isNull(isValidatorExternalLink)}
             showCopyOnHover
             textFormat="ellipsis"
-            maxWidth={maxWidth}
             ampCopierSection={ampCopierSection}
             fixedHeight
           />

src/lib/components/ValidatorImage.tsx

@@ -28,7 +28,7 @@ export const ValidatorImage = ({
   }
 
   return isLoading || !data || !validator.moniker ? (
-    <SkeletonCircle boxSize={boxSize} />
+    <SkeletonCircle boxSize={boxSize} minWidth={boxSize} />
   ) : (
     <Image
       boxSize={boxSize}

src/lib/components/table/MobileCardTemplate.tsx

@@ -21,6 +21,7 @@ export const MobileCardTemplate = ({
     direction="column"
     gap={3}
     w="full"
+    minW={0}
     onClick={onClick}
   >
     <Flex align="center" justify="space-between">

src/lib/components/table/blocks/BlocksTableRow.tsx

@@ -50,11 +50,7 @@ export const BlocksTableRow = ({
       </TableRow>
       {showProposer && (
         <TableRow>
-          <ValidatorBadge
-            validator={blockData.proposer}
-            badgeSize={7}
-            maxWidth="220px"
-          />
+          <ValidatorBadge validator={blockData.proposer} badgeSize={7} />
         </TableRow>
       )}
       <TableRow

src/lib/components/table/bonded/BondedTableMobileCard.tsx

@@ -23,6 +23,7 @@ export const BondedTableMobileCard = ({
     direction="column"
     gap={3}
     w="full"
+    minW={0}
     border="1px solid"
     borderColor="gray.700"
   >

src/lib/components/table/contracts/ContractsTableMobileCard.tsx

@@ -53,7 +53,6 @@ export const ContractsTableMobileCard = ({
         <ExplorerLink
           value={contractInfo.contractAddress}
           type="contract_address"
-          showCopyOnHover
         />
       </Flex>
     }

src/lib/components/table/non-redelegatable/NonRedelegatableTableMobileCard.tsx

@@ -16,6 +16,7 @@ export const NonRedelegatablesTableMobileCard = ({
     direction="column"
     gap={2}
     w="full"
+    minW={0}
     borderTop="1px solid"
     borderTopColor="gray.700"
     pt={3}

src/lib/components/table/proposals/Answer.tsx

@@ -55,8 +55,8 @@ export const Answer = ({
   return (
     <HStack spacing={2}>
       <Box
-        width="12px"
-        height="12px"
+        boxSize="12px"
+        minW="12px"
         borderRadius="50%"
         backgroundColor={color}
       />

src/lib/components/table/redelegation/RedelegationTableMobileCard.tsx

@@ -29,12 +29,12 @@ export const RedelegationTableMobileCard = ({
       templateColumns="1fr 32px 1fr"
       alignItems="center"
     >
-      <Flex direction="column" gap={1}>
+      <Flex direction="column" gap={1} minW={0}>
         <MobileLabel label="From validator" />
         <ValidatorBadge validator={redelegation.srcValidator} />
       </Flex>
       <CustomIcon name="arrow-right" boxSize={3} color="gray.600" />
-      <Flex direction="column" gap={1}>
+      <Flex direction="column" gap={1} minW={0}>
         <MobileLabel label="To validator" />
         <ValidatorBadge validator={redelegation.dstValidator} />
       </Flex>

src/lib/components/table/tableComponents.ts

@@ -41,6 +41,7 @@ const tableRowBaseStyle = {
   fontSize: "14px",
   fontWeight: 400,
   p: 4,
+  minW: 0,
   minH: "75px",
   display: "flex",
   alignItems: "center",

src/lib/layout/Searchbar.tsx

@@ -418,44 +418,50 @@ const Searchbar = () => {
         onKeyDown={handleOnKeyEnter}
         autoComplete="off"
       />
-      <List
-        borderRadius="8px"
-        bg="gray.900"
-        position="absolute"
-        w="full"
-        h={isOpen ? "fit-content" : 0}
-        top="50px"
-        overflowY="scroll"
-        shadow="dark-lg"
-      >
-        {keyword.length > 0 ? (
-          <>
-            {isLoading || isTyping ? (
-              <StyledListItem display="flex" alignItems="center" gap={2} p={4}>
-                <Spinner color="gray.600" size="sm" />
-                <Text color="text.disabled" variant="body2" fontWeight={500}>
-                  Looking for results ...
-                </Text>
-              </StyledListItem>
-            ) : (
-              <ResultRender
-                results={results}
-                keyword={keyword}
-                cursor={cursor}
-                metadata={metadata}
-                setCursor={setCursor}
-                handleSelectResult={handleSelectResult}
-              />
-            )}
-          </>
-        ) : (
-          <StyledListItem p={4}>
-            <Text color="text.disabled" variant="body2" fontWeight={500}>
-              {getPlaceholder({ isWasm, isPool, isMove, isGov })}
-            </Text>
-          </StyledListItem>
-        )}
-      </List>
+      {isOpen && (
+        <List
+          borderRadius="8px"
+          bg="gray.900"
+          position="absolute"
+          w="full"
+          top="50px"
+          overflowY="scroll"
+          shadow="dark-lg"
+        >
+          {keyword.length > 0 ? (
+            <>
+              {isLoading || isTyping ? (
+                <StyledListItem
+                  display="flex"
+                  alignItems="center"
+                  gap={2}
+                  p={4}
+                >
+                  <Spinner color="gray.600" size="sm" />
+                  <Text color="text.disabled" variant="body2" fontWeight={500}>
+                    Looking for results ...
+                  </Text>
+                </StyledListItem>
+              ) : (
+                <ResultRender
+                  results={results}
+                  keyword={keyword}
+                  cursor={cursor}
+                  metadata={metadata}
+                  setCursor={setCursor}
+                  handleSelectResult={handleSelectResult}
+                />
+              )}
+            </>
+          ) : (
+            <StyledListItem p={4}>
+              <Text color="text.disabled" variant="body2" fontWeight={500}>
+                {getPlaceholder({ isWasm, isPool, isMove, isGov })}
+              </Text>
+            </StyledListItem>
+          )}
+        </List>
+      )}
     </FormControl>
   );
 };

src/lib/pages/block-details/components/BlockInfo.tsx

@@ -36,7 +36,7 @@ export const BlockInfo = ({ blockData }: BlockInfoProps) => {
             }`}
           </LabelText>
         </Flex>
-        <LabelText label="Proposed by" flex="1">
+        <LabelText label="Proposed by" flex="1" minW={0}>
           <ValidatorBadge
             validator={blockData.proposer}
             badgeSize={6}

src/lib/pages/pools/components/pool-details/tables/pool-txs/PoolTxsMsg.tsx

@@ -47,6 +47,7 @@ export const PoolTxsMsg = ({
   const hasMsgDetails = transaction.success && message;
   return (
     <Box
+      className="copier-wrapper"
       w="full"
       minW="min-content"
       borderBottom="1px solid"
@@ -59,7 +60,6 @@ export const PoolTxsMsg = ({
       }}
     >
       <Grid
-        className="copier-wrapper"
         templateColumns={templateColumns}
         transition="all 0.25s ease-in-out"
         cursor="pointer"

src/lib/pages/pools/components/pool-details/tables/pool-txs/messages/components/PoolInfoText.tsx

@@ -7,7 +7,7 @@ interface PoolInfoTextProps {
 }
 
 export const PoolInfoText = ({ title, children }: PoolInfoTextProps) => (
-  <Flex direction="column" gap={1} minW="90px">
+  <Flex direction="column" gap={1} minW={0}>
     <Text variant="body2" textColor="gray.500" fontWeight={500}>
       {title}
     </Text>

src/lib/pages/proposal-details/components/vote-details/voting-period/table/Voter.tsx

@@ -29,7 +29,6 @@ export const Voter = ({ proposalVote }: VoterProps) => {
             />
           ) : undefined
         }
-        maxWidth="110px"
       />
     );
 

src/lib/pages/proposal-details/components/vote-details/voting-period/validator-votes-table/index.tsx

@@ -40,8 +40,8 @@ export const ValidatorVotesTableBody = ({
 
   const templateColumns =
     fullVersion && !isMobile
-      ? `${!isProposalResolved ? "0.2fr " : ""}1fr 0.8fr 1.5fr 1fr`
-      : `${!isProposalResolved ? "0.1fr " : ""}1.5fr 1fr`;
+      ? `${!isProposalResolved ? "32px " : ""}1fr 0.8fr 1.5fr 1fr`
+      : `${!isProposalResolved ? "32px " : ""}1.5fr 0.5fr`;
 
   if (isLoading) return <Loading />;
   if (!validatorVotes) return <ErrorFetching dataName="votes" />;

src/lib/pages/proposal-details/components/vote-details/voting-period/votes-table/index.tsx

@@ -35,7 +35,7 @@ export const ProposalVotesTableBody = ({
 }: ProposalVotesTableBodyProps) => {
   const isMobile = useMobile();
   const templateColumns =
-    fullVersion && !isMobile ? `1fr 0.8fr 1.5fr 1fr` : `2fr 1fr`;
+    fullVersion && !isMobile ? `1fr 0.8fr 1.5fr 1fr` : `3fr 1fr`;
 
   if (isLoading) return <Loading />;
   if (!proposalVotes) return <ErrorFetching dataName="votes" />;

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

@@ -57,7 +57,7 @@ export const ValidatorsTableMobileCard = ({
               </Flex>
             </Flex>
           )}
-          <Flex direction="column" gap={1}>
+          <Flex direction="column" gap={1} minW={0}>
             <MobileLabel label="Validator" />
             <ValidatorBadge
               validator={{

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

@@ -72,7 +72,6 @@ export const ValidatorsTableRow = ({
             moniker: validator.moniker,
           }}
           badgeSize={7}
-          maxWidth="220px"
         />
       </TableRow>
       <TableRow>