From dddb8c366359763167b572ef6aa3386bd103ab58 Mon Sep 17 00:00:00 2001
From: jp <jp@txt3.com>
Date: Thu, 13 Aug 2026 20:42:29 +0100
Subject: [PATCH] frontend: prevent contacts content overflowing the viewport +
 sync UI repo
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ContactsPage: drop whiteSpace:nowrap on the action cell; wrap the
  Edit/History/Delete/⋮ buttons in a flex container with flex-wrap so they
  reflow instead of forcing the table wider than the viewport; allow the
  name/number/email cell to break long strings.
- index.css: td word-break:break-word + table max-width:100% as a guard.
- Sync the UI repo (ContactsPage/ContactHistory/MessagesPage implicit-any
  annotations that unblock npm run build) into the frontend/ mirror.
---
 frontend/src/components/ContactHistory.tsx |  2 +-
 frontend/src/components/ContactsPage.tsx   | 26 +++++++++++-----------
 frontend/src/components/MessagesPage.tsx   |  4 ++--
 frontend/src/index.css                     |  6 +++++
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/ContactHistory.tsx b/frontend/src/components/ContactHistory.tsx
index 0450b15..a0940a1 100644
--- a/frontend/src/components/ContactHistory.tsx
+++ b/frontend/src/components/ContactHistory.tsx
@@ -15,7 +15,7 @@ export default function ContactHistory() {
       </div>
       {isLoading && <div className="card empty">Loading...</div>}
       {error && <div className="card err">{(error as Error).message}</div>}
-      {data?.messages?.map((m) => (
+      {data?.messages?.map((m: any) => (
         <div key={m.id} className={"card" + (m.is_read ? "" : " unread")}>
           <div className="who">{data.contact}</div>
           <div className="meta">{m.time}{m.duration_fmt ? ` · ${m.duration_fmt}` : ""}</div>
diff --git a/frontend/src/components/ContactsPage.tsx b/frontend/src/components/ContactsPage.tsx
index a86d1a9..7a61101 100644
--- a/frontend/src/components/ContactsPage.tsx
+++ b/frontend/src/components/ContactsPage.tsx
@@ -38,23 +38,23 @@ export default function ContactsPage() {
           </div>
           <table>
             <tbody>
-              {data.map((c) => (
+              {data.map((c: any) => (
                 <tr key={c.id}>
-                  <td>
+                  <td style={{ minWidth: 0 }}>
                     <b>{c.name || "Unnamed"}</b><br />
-                    <span style={{ color: "var(--text-muted)", fontSize: 13 }}>
+                    <span style={{ color: "var(--text-muted)", fontSize: 13, overflowWrap: "anywhere", wordBreak: "break-word" }}>
                       {c.number_e164} {c.email && `· ${c.email}`}
                     </span>
                   </td>
-                  <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
-                    <a className="btn" href={`/contacts/edit/${c.id}`}>Edit</a>
-                    {" "}
-                    <a className="btn" href={`/contacts/history/${encodeURIComponent(c.number_e164 || c.name)}`}>History</a>
-                    {" "}
-                    <DeleteBtn id={c.id} name={c.name} />
-                    <span style={{ position: "relative", display: "inline-block", marginLeft: 4 }}>
-                      <ContactMenu number={c.number_e164} name={c.name} />
-                    </span>
+                  <td style={{ textAlign: "right", verticalAlign: "middle" }}>
+                    <div style={{ display: "flex", flexWrap: "wrap", gap: 6, justifyContent: "flex-end" }}>
+                      <a className="btn" href={`/contacts/edit/${c.id}`}>Edit</a>
+                      <a className="btn" href={`/contacts/history/${encodeURIComponent(c.number_e164 || c.name)}`}>History</a>
+                      <DeleteBtn id={c.id} name={c.name} />
+                      <span style={{ position: "relative", display: "inline-block" }}>
+                        <ContactMenu number={c.number_e164} name={c.name} />
+                      </span>
+                    </div>
                   </td>
                 </tr>
               ))}
@@ -121,7 +121,7 @@ function ContactMenu({ number, name }: { number?: string; name?: string }) {
             )}
             <a
               className="btn"
-              href={"https://who-called.co.uk/Number/" + lookup}
+              href={"https://www.google.com/search?q=uk+number+" + lookup}
               target="_blank"
               rel="noreferrer"
               style={{ display: "block", borderRadius: 0, border: "none", width: "100%", justifyContent: "flex-start" }}
diff --git a/frontend/src/components/MessagesPage.tsx b/frontend/src/components/MessagesPage.tsx
index bca8106..d04148d 100644
--- a/frontend/src/components/MessagesPage.tsx
+++ b/frontend/src/components/MessagesPage.tsx
@@ -70,7 +70,7 @@ export default function MessagesPage() {
       {isLoading && <div className="card empty">Loading...</div>}
       {error && <div className="card err">{(error as Error).message}</div>}
 
-      {data?.messages?.map((m) => {
+      {data?.messages?.map((m: any) => {
         const whoRaw = m.contact_name || m.callerid || "Unknown caller";
         const num = sanitiseNumber(m.callerid);
         const showAdd = !m.contact_name && num;
@@ -192,7 +192,7 @@ function MsgContactMenu({ number, name, callerid }: { number?: string; name?: st
             )}
             <a
               className="btn"
-              href={"https://who-called.co.uk/Number/" + lookup}
+              href={"https://www.google.com/search?q=uk+number+" + lookup}
               target="_blank"
               rel="noreferrer"
               style={{ display: "block", borderRadius: 0, border: "none", width: "100%", justifyContent: "flex-start" }}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 46e17e4..8021a77 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -332,6 +332,12 @@ td {
   padding: 10px 6px;
   vertical-align: top;
   border-bottom: 1px solid var(--border);
+  word-break: break-word;
+}
+
+/* Keep the contacts table (and any table) from forcing horizontal overflow */
+table {
+  max-width: 100%;
 }
 
 tr:hover td { background: rgba(255, 255, 255, 0.01); }