src/pages/home/index.tsx

@@ -374,7 +374,9 @@ const DisplaySigner = ({ meta, profile, pubkey }: DisplaySignerProps) => {
       <UserComponent
         pubkey={pubkey}
         name={
-          profile?.display_name || profile?.name || shorten(hexToNpub(pubkey))
+          profile?.display_name ||
+          profile?.name ||
+          shorten(hexToNpub(pubkey), 5)
         }
         image={profile?.picture}
       />

src/pages/home/style.module.scss

@@ -35,8 +35,10 @@
 
       .titleBox {
         display: flex;
+        flex: 4;
         flex-direction: column;
         align-items: center;
+        overflow-wrap: anywhere;
         gap: 10px;
         padding: 10px;
         background-color: #cdc8c499;
@@ -70,7 +72,7 @@
       .signers {
         display: flex;
         flex-direction: column;
-        flex: 1;
+        flex: 6;
         justify-content: center;
         gap: 10px;
         padding: 10px;