ui: avoid username overflow, condense event view

src/components/EventFooter.tsx

@@ -14,6 +14,12 @@ import { RelayLink } from "./nostr/RelayLink";
 
 interface EventFooterProps {
   event: NostrEvent;
+  clientName?: string;
+  clientAppPointer?: {
+    kind: number;
+    pubkey: string;
+    identifier: string;
+  } | null;
 }
 
 /**
@@ -21,7 +27,11 @@ interface EventFooterProps {
  * Left: Kind badge (clickable to open KIND command)
  * Right: Relay count dropdown
  */
-export function EventFooter({ event }: EventFooterProps) {
+export function EventFooter({
+  event,
+  clientName,
+  clientAppPointer,
+}: EventFooterProps) {
   const addWindow = useAddWindow();
 
   // Get relays this event was seen on
@@ -35,24 +45,44 @@ export function EventFooter({ event }: EventFooterProps) {
   };
 
   return (
-    <div className="pt-2">
+    <div className="pt-1">
       {/* Footer Bar */}
       <div className="flex items-center justify-between text-xs text-muted-foreground">
-        {/* Left: Kind Badge */}
-        <button
-          onClick={handleKindClick}
-          className="group flex items-center gap-2 md:gap-1.5 min-h-[44px] md:min-h-0 px-1 -mx-1 cursor-crosshair hover:text-foreground transition-colors"
-          title={`View documentation for kind ${event.kind}`}
-        >
-          <KindBadge
-            kind={event.kind}
-            variant="compact"
-            iconClassname="text-muted-foreground group-hover:text-foreground transition-colors size-4 md:size-3"
-          />
-          <span className="text-xs md:text-[10px] md:leading-[10px]">
-            {kindName}
-          </span>
-        </button>
+        {/* Left: Kind Badge + Client */}
+        <div className="flex items-center gap-2 md:gap-1.5">
+          <button
+            onClick={handleKindClick}
+            className="group flex items-center gap-2 md:gap-1.5 min-h-[44px] md:min-h-0 px-1 -mx-1 cursor-crosshair hover:text-foreground transition-colors"
+            title={`View documentation for kind ${event.kind}`}
+          >
+            <KindBadge
+              kind={event.kind}
+              variant="compact"
+              iconClassname="text-muted-foreground group-hover:text-foreground transition-colors size-4 md:size-3"
+            />
+            <span className="text-xs md:text-[10px] md:leading-[10px]">
+              {kindName}
+            </span>
+          </button>
+          {clientName && (
+            <span className="text-xs md:text-[10px] md:leading-[10px] text-muted-foreground/70">
+              ·{" "}
+              {clientAppPointer ? (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    addWindow("open", { pointer: clientAppPointer });
+                  }}
+                  className="hover:underline hover:text-foreground cursor-crosshair"
+                >
+                  {clientName}
+                </button>
+              ) : (
+                clientName
+              )}
+            </span>
+          )}
+        </div>
 
         {/* Right: Relay Dropdown */}
         {relays.length > 0 && (

src/components/nostr/UserName.tsx

@@ -50,13 +50,14 @@ export function UserName({
     <span
       dir="auto"
       className={cn(
-        "font-semibold cursor-crosshair hover:underline hover:decoration-dotted inline-flex items-center gap-1",
+        "font-semibold cursor-crosshair hover:underline hover:decoration-dotted inline-flex items-center gap-1 max-w-full whitespace-nowrap overflow-hidden",
         className,
       )}
       onClick={handleClick}
     >
       <span
         className={cn(
+          "truncate",
           isGrimoire
             ? isActiveAccount
               ? "bg-gradient-to-tr from-orange-400 to-amber-600 bg-clip-text text-transparent"

src/components/nostr/kinds/BaseEventRenderer.tsx

@@ -560,7 +560,6 @@ export function BaseEventContainer({
   };
 }) {
   const { locale } = useGrimoire();
-  const addWindow = useAddWindow();
   const { canSign, signer, pubkey } = useAccount();
   const { settings } = useSettings();
   const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
@@ -624,13 +623,6 @@ export function BaseEventContainer({
   const clientAppPointer =
     parsedClientAddress?.kind === 31990 ? parsedClientAddress : null;
 
-  const handleClientClick = (e: React.MouseEvent) => {
-    if (clientAppPointer) {
-      e.stopPropagation();
-      addWindow("open", { pointer: clientAppPointer });
-    }
-  };
-
   return (
     <>
       <EventContextMenu
@@ -638,31 +630,16 @@ export function BaseEventContainer({
         onReactClick={handleReactClick}
         canSign={canSign}
       >
-        <div className="flex flex-col gap-2 p-3 border-b border-border/50 last:border-0">
-          <div className="flex flex-row justify-between items-center">
-            <div className="flex flex-row gap-2 items-baseline">
-              <EventAuthor pubkey={displayPubkey} />
+        <div className="flex flex-col gap-1 p-3 border-b border-border/50 last:border-0">
+          <div className="flex flex-row justify-between items-center gap-2">
+            <div className="flex flex-row gap-2 items-baseline min-w-0 overflow-hidden">
+              <EventAuthor pubkey={displayPubkey} className="min-w-0" />
               <span
-                className="text-xs text-muted-foreground cursor-help"
+                className="text-xs text-muted-foreground cursor-help shrink-0 whitespace-nowrap"
                 title={absoluteTime}
               >
                 {relativeTime}
               </span>
-              {settings?.appearance?.showClientTags && clientName && (
-                <span className="text-[10px] text-muted-foreground/70">
-                  via{" "}
-                  {clientAppPointer ? (
-                    <button
-                      onClick={handleClientClick}
-                      className="hover:underline hover:text-foreground cursor-crosshair"
-                    >
-                      {clientName}
-                    </button>
-                  ) : (
-                    clientName
-                  )}
-                </span>
-              )}
             </div>
             <EventMenu
               event={event}
@@ -671,7 +648,13 @@ export function BaseEventContainer({
             />
           </div>
           {children}
-          <EventFooter event={event} />
+          <EventFooter
+            event={event}
+            clientName={
+              settings?.appearance?.showClientTags ? clientName : undefined
+            }
+            clientAppPointer={clientAppPointer}
+          />
         </div>
       </EventContextMenu>
       <EmojiPickerDialog