[ECO-2650] Fix size of scramble to avoid elements moving (#497)

Co-authored-by: Matt <[email protected]>
econia-labs · Jan 7, 2025 · 96347ed · 96347ed
1 parent ca9486c
commit 96347ed
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 11 deletions.
diff --git a/src/typescript/frontend/src/components/button/index.tsx b/src/typescript/frontend/src/components/button/index.tsx
@@ -68,27 +68,53 @@ const Button = <E extends React.ElementType = "button">({
             })}
 
           {!isScramble ? (
-            <FlexGap gap="8px" onMouseOver={replay} className="h-[1em]">
+            <FlexGap
+              gap="8px"
+              onMouseOver={replay}
+              justifyContent="space-between"
+              className="h-[1em]"
+            >
               <Text {...textProps}>{"{ "}</Text>
               {icon && (
                 <Text {...textProps} className="flex flex-row">
                   {icon}
                 </Text>
               )}
-              <Text {...textProps} className="flex flex-row">
+              <Text
+                {...textProps}
+                className="flex flex-row"
+                style={
+                  typeof children === "string"
+                    ? { minWidth: `${children.length + 1}ch`, textAlign: "center" }
+                    : {}
+                }
+              >
                 {children}
               </Text>
               <Text {...textProps}>{" }"}</Text>
             </FlexGap>
           ) : (
-            <FlexGap gap="8px" onMouseOver={replay} className="h-[1em]">
+            <FlexGap
+              gap="8px"
+              onMouseOver={replay}
+              className="h-[1em]"
+              justifyContent="space-between"
+            >
               <Text {...textProps}>{"{ "}</Text>
               {icon && (
                 <Text {...textProps} className="flex flex-row">
                   {icon}
                 </Text>
               )}
-              <Text {...textProps} ref={isScramble ? ref : undefined} />
+              <Text
+                {...textProps}
+                ref={isScramble ? ref : undefined}
+                style={
+                  typeof children === "string"
+                    ? { minWidth: `${children.length + 1}ch`, textAlign: "center" }
+                    : {}
+                }
+              />
               <Text {...textProps}>{" }"}</Text>
             </FlexGap>
           )}

diff --git a/src/typescript/frontend/src/components/header/components/mobile-menu/index.tsx b/src/typescript/frontend/src/components/header/components/mobile-menu/index.tsx
@@ -95,7 +95,7 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({
         <MobileMenuInner>
           {!geoblocked && (
             <ButtonWithConnectWalletFallback
-              className={"w-full"}
+              className={"w-full !px-0"}
               mobile={true}
               onClick={subMenuOnClick}
               arrow

diff --git a/src/typescript/frontend/src/components/header/wallet-button/ConnectWalletButton.tsx b/src/typescript/frontend/src/components/header/wallet-button/ConnectWalletButton.tsx
@@ -100,9 +100,9 @@ export const ButtonWithConnectWalletFallback = ({
               mobile={mobile}
             />
             <div className={!mobile ? "" : "text-black text-[32px] leading-[40px]"}>
-              <span
+              <div
                 className="whitespace-nowrap text-overflow-ellipsis overflow-hidden"
-                style={{ width, maxWidth: width }}
+                style={{ minWidth: width }}
                 ref={ref}
               />
             </div>

diff --git a/src/typescript/frontend/src/components/pages/emojicoin/components/main-info/MainInfo.tsx b/src/typescript/frontend/src/components/pages/emojicoin/components/main-info/MainInfo.tsx
@@ -36,7 +36,6 @@ const LinkButton = ({
 }) => {
   const button = (
     <Button
-      isScramble={false}
       scale="lg"
       fakeDisabled={!link && !!LINKS?.discord && !!DISCORD_METADATA_REQUEST_CHANNEL}
       disabled={!link && !LINKS?.discord && !DISCORD_METADATA_REQUEST_CHANNEL}
@@ -245,9 +244,7 @@ const MainInfo = ({ data }: MainInfoProps) => {
               whileTap={{ scaleX: 0.96, scaleY: 0.98 }}
               transition={{ ease: "linear", duration: 0.05 }}
             >
-              <Button scale="lg" isScramble={false}>
-                copy coin address
-              </Button>
+              <Button scale="lg">copy coin address</Button>
             </motion.div>
             {dexscreenerButton}
             {twitterButton}