jp/asterisk-voicemail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Right-align dropdown burger icon on message rows

Browse Source 
- use flexbox space-between in .who
- name/number truncates with ellipsis
- menu pinned right with flex-shrink:0
- tighter button padding and dropdown gap
This commit is contained in:
jp
2026-08-13 19:48:46 +01:00
parent 58de4653e1
commit ebc905984c
1 changed files with 8 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/MessagesPage.tsx
View File

@ -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(/^\+/, ""))}>{whoRaw}</a>
<span style={{ position: "relative", display: "inline-block", marginLeft: 6, verticalAlign: "middle" }}>
<MsgContactMenu number={num} name={m.contact_name} callerid={m.callerid} />
</span>
</>
<a href={"/contacts/history/" + encodeURIComponent(num.replace(/^\+/, ""))} style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{whoRaw}</a>
) : num ? (
<>
<span>{whoRaw}</span>
<span style={{ position: "relative", display: "inline-block", marginLeft: 6, verticalAlign: "middle" }}>
<MsgContactMenu number={num} callerid={m.callerid} />
</span>
</>
<span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{whoRaw}</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,