fix: hanlde display of overly long usernames

src/components/AccountList/index.tsx

@@ -37,10 +37,10 @@ export default function AccountList({
           }}
         >
           <div className="flex justify-between items-center p-2">
-            <div className="flex items-center gap-2 relative">
+            <div className="flex-1 flex items-center gap-2 relative">
               <SimpleUserAvatar userId={act.pubkey} />
-              <div>
-                <SimpleUsername userId={act.pubkey} className="font-semibold" />
+              <div className="flex-1 w-0">
+                <SimpleUsername userId={act.pubkey} className="font-semibold truncate" />
                 <div className="text-sm rounded-full bg-muted px-2 w-fit">
                   {formatPubkey(act.pubkey)}
                 </div>

src/pages/primary/MePage/index.tsx

@@ -45,9 +45,9 @@ const MePage = forwardRef((_, ref) => {
     <PrimaryPageLayout ref={ref} pageName="home" titlebar={<MePageTitlebar />}>
       <div className="flex gap-4 items-center p-4">
         <SimpleUserAvatar userId={pubkey} size="big" />
-        <div className="space-y-1">
+        <div className="space-y-1 flex-1 w-0">
           <SimpleUsername
-            className="text-xl font-semibold truncate"
+            className="text-xl font-semibold text-wrap"
             userId={pubkey}
             skeletonClassName="h-6 w-32"
           />