Right-align dropdown burger icon on message rows

- use flexbox space-between in .who
- name/number truncates with ellipsis
- menu pinned right with flex-shrink:0
- tighter button padding and dropdown gap

frontend/src/components/MessagesPage.tsx

@@ -76,24 +76,17 @@ export default function MessagesPage() {
         const showAdd = !m.contact_name && num;
         return (
           <div key={m.id} className={"card" + (m.is_read ? "" : " unread")}>
-            <div className="who" style={{ position: "relative" }}>
+            <div className="who" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }}>
               {m.contact_name && num ? (
-                <>
+                <a href={"/contacts/history/" + encodeURIComponent(num.replace(/^\+/, ""))} style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{whoRaw}</a>
-                  <a href={"/contacts/history/" + encodeURIComponent(num.replace(/^\+/, ""))}>{whoRaw}</a>
-                  <span style={{ position: "relative", display: "inline-block", marginLeft: 6, verticalAlign: "middle" }}>
-                    <MsgContactMenu number={num} name={m.contact_name} callerid={m.callerid} />
-                  </span>
-                </>
               ) : num ? (
-                <>
+                <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{whoRaw}</span>
-                  <span>{whoRaw}</span>
-                  <span style={{ position: "relative", display: "inline-block", marginLeft: 6, verticalAlign: "middle" }}>
-                    <MsgContactMenu number={num} callerid={m.callerid} />
-                  </span>
-                </>
               ) : (
                 <span>{whoRaw}</span>
               )}
+              <span style={{ position: "relative", display: "inline-block", flexShrink: 0 }}>
+                <MsgContactMenu number={num} name={m.contact_name} callerid={m.callerid} />
+              </span>
             </div>
             <div className="meta">
               {m.time}{m.duration_fmt ? ` · ${m.duration_fmt}` : ""}
@@ -166,7 +159,7 @@ function MsgContactMenu({ number, name, callerid }: { number?: string; name?: st
   const lookup = encodeURIComponent(name || number || callerid || "");
   return (
     <>
-      <button className="btn" onClick={() => setOpen(!open)}>⋮</button>
+      <button className="btn" style={{ padding: "4px 8px", lineHeight: 1 }} onClick={() => setOpen(!open)}>⋮</button>
       {open && (
         <>
           <span
@@ -180,7 +173,7 @@ function MsgContactMenu({ number, name, callerid }: { number?: string; name?: st
               position: "absolute",
               right: 0,
               top: "100%",
-              marginTop: 6,
+              marginTop: 4,
               zIndex: 201,
               padding: "6px 0",
               minWidth: 180,