From 7ddf389325892b9dc7a80207e0d8ff3829e64995 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Wed, 24 Aug 2022 01:06:07 +0100
Subject: [PATCH] fix: text overflow

---
 src/components/common/ConnectButton.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/common/ConnectButton.tsx b/src/components/common/ConnectButton.tsx
index c7f7f0da..2effaa84 100644
--- a/src/components/common/ConnectButton.tsx
+++ b/src/components/common/ConnectButton.tsx
@@ -104,21 +104,24 @@ export const ConnectButton: React.FC<{
               }
               return (
                 <div
-                  className="flex relative group"
+                  className="relative group"
                   style={{ gap: 12, height: "30px" }}
                 >
                   {userSites.isSuccess ? (
                     <>
-                      <button className="flex items-center" type="button">
+                      <button
+                        className="flex items-center w-full"
+                        type="button"
+                      >
                         <Avatar
                           className="align-middle mr-2"
                           images={userSites.data?.[0]?.avatars || []}
                           name={userSites.data?.[0]?.name}
                           size={30}
                         />
-                        <div className="flex flex-col">
+                        <div className="flex-1 flex flex-col min-w-0">
                           <span
-                            className={`text-left leading-none font-medium ${
+                            className={`text-left leading-none font-medium truncate ${
                               InsufficientBalance
                                 ? "text-red-600"
                                 : "text-gray-600"
@@ -129,7 +132,7 @@ export const ConnectButton: React.FC<{
                           </span>
                           {userSites.data?.[0]?.username && (
                             <span
-                              className={`text-left leading-none text-xs ${
+                              className={`text-left leading-none text-xs truncate ${
                                 InsufficientBalance
                                   ? "text-red-400"
                                   : "text-gray-400"