Fix Manage table column spread using fixed layout + colgroup

The first column had width:100% which pushed Active People/Projects
to the far right. Use table-layout:fixed with explicit col widths
(42% name, 26% per stat, 56px actions) so columns distribute like
Runn.io across the full table width.

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/pages/manage/HubSection.tsx

@@ -12,7 +12,7 @@ import {
   useTeams,
   useUsers,
 } from "../../hooks/usePortalData";
-import { ManagePageHeader, ManageToolbar } from "./_shared";
+import { ManagePageHeader, ManageToolbar, RunnHubColgroup } from "./_shared";
 
 interface HubEntry {
   key: string;
@@ -61,6 +61,7 @@ export function HubSection() {
         <ManageToolbar onSearchChange={setSearch} search={search} />
 
         <table className="data-table runn-table">
+          <RunnHubColgroup />
           <thead>
             <tr>
               <th>Name</th>

frontend/src/pages/manage/RolesSection.tsx

@@ -9,7 +9,7 @@ import { Modal } from "../../components/ui/Modal";
 import { toastFromError, useToast } from "../../components/ui/Toast";
 import { useRoles } from "../../hooks/usePortalData";
 import type { Role } from "../../types";
-import { ManagePageHeader, ManageToolbar, RowMenu } from "./_shared";
+import { ManagePageHeader, ManageToolbar, RunnEntityColgroup, RowMenu } from "./_shared";
 
 export function RolesSection() {
   const queryClient = useQueryClient();
@@ -79,6 +79,7 @@ export function RolesSection() {
           <EmptyState title="No roles yet" description="Create a role to start assigning team members." />
         ) : (
           <table className="data-table runn-table">
+            <RunnEntityColgroup />
             <thead>
               <tr>
                 <th>Name</th>

frontend/src/pages/manage/TagsSection.tsx

@@ -9,7 +9,7 @@ import { Modal } from "../../components/ui/Modal";
 import { toastFromError, useToast } from "../../components/ui/Toast";
 import { useTags } from "../../hooks/usePortalData";
 import type { Tag } from "../../types";
-import { ManagePageHeader, ManageToolbar, RowMenu } from "./_shared";
+import { ManagePageHeader, ManageToolbar, RunnEntityColgroup, RowMenu } from "./_shared";
 
 const TAG_PALETTE = ["#7c3aed", "#0ea5e9", "#16a34a", "#f97316", "#dc2626", "#facc15", "#0f766e", "#a855f7"];
 
@@ -82,6 +82,7 @@ export function TagsSection() {
           <EmptyState title="No tags yet" description="Create your first tag and apply it to people or projects." />
         ) : (
           <table className="data-table runn-table">
+            <RunnEntityColgroup />
             <thead>
               <tr>
                 <th>Name</th>

frontend/src/pages/manage/TeamsSection.tsx

@@ -9,7 +9,7 @@ import { Modal } from "../../components/ui/Modal";
 import { toastFromError, useToast } from "../../components/ui/Toast";
 import { useTeams } from "../../hooks/usePortalData";
 import type { Team } from "../../types";
-import { ManagePageHeader, ManageToolbar, RowMenu } from "./_shared";
+import { ManagePageHeader, ManageToolbar, RunnEntityColgroup, RowMenu } from "./_shared";
 
 export function TeamsSection() {
   const queryClient = useQueryClient();
@@ -79,6 +79,7 @@ export function TeamsSection() {
           <EmptyState title="No teams yet" description="Create a team to group people by department or function." />
         ) : (
           <table className="data-table runn-table">
+            <RunnEntityColgroup />
             <thead>
               <tr>
                 <th>Name</th>

frontend/src/pages/manage/_shared.tsx

@@ -9,6 +9,29 @@ export interface RowMenuItem {
   danger?: boolean;
 }
 
+/** Name + two stat columns + actions — matches Runn Teams/Roles/Tags tables */
+export function RunnEntityColgroup() {
+  return (
+    <colgroup>
+      <col className="runn-col-name" />
+      <col className="runn-col-stat" />
+      <col className="runn-col-stat" />
+      <col className="runn-col-actions" />
+    </colgroup>
+  );
+}
+
+/** Name + count + actions — Manage hub table */
+export function RunnHubColgroup() {
+  return (
+    <colgroup>
+      <col className="runn-col-name" />
+      <col className="runn-col-stat" />
+      <col className="runn-col-actions" />
+    </colgroup>
+  );
+}
+
 export function RowMenu({ items }: { items: RowMenuItem[] }) {
   const [open, setOpen] = useState(false);
   const [position, setPosition] = useState<{ top: number; left: number } | null>(null);

frontend/src/styles.css

@@ -1786,13 +1786,27 @@ th {
 
 .runn-table {
   border-radius: 0;
-  table-layout: auto;
+  table-layout: fixed;
   width: 100%;
 }
 
+.runn-table col.runn-col-name {
+  width: 42%;
+}
+
+.runn-table col.runn-col-stat {
+  width: 26%;
+}
+
+.runn-table col.runn-col-actions {
+  width: 56px;
+}
+
 .runn-table th,
 .runn-table td {
+  overflow: hidden;
   padding: 14px 18px;
+  text-overflow: ellipsis;
   vertical-align: middle;
 }
 
@@ -1805,19 +1819,10 @@ th {
   background: rgba(124, 58, 237, 0.04);
 }
 
-/* First column (Name) is the biggest but doesn't swallow every pixel */
-.runn-table th:first-child,
-.runn-table td:first-child {
-  width: 100%;
-}
-
-/* Count columns: wide and left-aligned so the value sits directly under the header text */
 .runn-table th.num,
 .runn-table td.num {
-  min-width: 240px;
   text-align: left;
   white-space: nowrap;
-  width: 240px;
 }
 
 .runn-table th.num {