fix(web): list cosmetics — FK link color, id-column width cap, filter Esc

frontend/apps/web/src/components/FieldValueView.tsx

@@ -24,7 +24,7 @@ export function FieldValueView({ value }: FieldValueViewProps) {
   // detail needs the column's FK-target metadata (tracked in #184);
   // until then the row click (→ this row's detail) is the action.
   if (isForeignKeyValue(value)) {
-    return <span className="text-blue-600 underline decoration-dotted">{value.label}</span>;
+    return <span className="font-medium text-indigo-600 hover:underline">{value.label}</span>;
   }
   return <>{renderValue(value)}</>;
 }

frontend/apps/web/src/pages/ListPage.tsx

@@ -334,10 +334,16 @@ interface FilterModalProps {
   onClose: () => void;
 }
 
-// Modal on desktop, bottom-sheet on mobile. Closing on backdrop tap or
-// the Done button; Escape handled by the parent page's listeners are
-// not needed here because the backdrop already gives an obvious exit.
+// Modal on desktop, bottom-sheet on mobile. Closes on backdrop tap,
+// the Done button, OR the Escape key.
 function FilterModal({ filters, active, onChange, onClearAll, onClose }: FilterModalProps) {
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
   return (
     <div
       className="fixed inset-0 z-50 flex items-end justify-center sm:items-center"

frontend/packages/ui/src/Table.tsx

@@ -116,9 +116,14 @@ export function Table<Row>({
                 {columns.map((col) => (
                   <td
                     key={col.key}
-                    className={`whitespace-nowrap px-4 py-2 ${ALIGN_CLASSES[col.align ?? 'left']}`}
+                    className={`px-4 py-2 ${ALIGN_CLASSES[col.align ?? 'left']}`}
                   >
-                    {col.render(row)}
+                    {/* Cap very wide cells (e.g. UUID `id` columns) and
+                        truncate with an ellipsis so one long column
+                        doesn't dominate the table; full value is on the
+                        detail page. `truncate` carries whitespace-nowrap
+                        so values still never split mid-word. */}
+                    <div className="max-w-[16rem] truncate">{col.render(row)}</div>
                   </td>
                 ))}
               </tr>