From 849e71f1fd93605c172009d26591cca3cf5f795c Mon Sep 17 00:00:00 2001
From: calebyhan <calebhantech@gmail.com>
Date: Tue, 30 Jun 2026 11:20:59 -0400
Subject: [PATCH] Fix long legislation titles overflowing admin layout

Truncates the AdminPageHeader title and the legislation table's title
column so long bill titles no longer push action buttons out of view;
the full title remains visible via the detail page metadata card and
a hover tooltip on the table cell. (#164)
---
 frontend/src/app/admin/legislation/[id]/page.tsx |  4 ++++
 frontend/src/app/admin/legislation/page.tsx      | 10 +++++++++-
 frontend/src/components/admin/AdminPageShell.tsx |  6 ++++--
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/admin/legislation/[id]/page.tsx b/frontend/src/app/admin/legislation/[id]/page.tsx
index 982d001..cd207d5 100644
--- a/frontend/src/app/admin/legislation/[id]/page.tsx
+++ b/frontend/src/app/admin/legislation/[id]/page.tsx
@@ -152,6 +152,10 @@ export default function LegislationDetailsPage() {
 
       <AdminCard>
         <div className="grid gap-4 text-sm text-slate-700 sm:grid-cols-2">
+          <p className="sm:col-span-2">
+            <span className="font-semibold text-slate-900">Title:</span>{" "}
+            {legislation.bill_number}: {legislation.title}
+          </p>
           <p>
             <span className="font-semibold text-slate-900">Status:</span>{" "}
             {legislation.status}
diff --git a/frontend/src/app/admin/legislation/page.tsx b/frontend/src/app/admin/legislation/page.tsx
index ebd5eb5..a9c3111 100644
--- a/frontend/src/app/admin/legislation/page.tsx
+++ b/frontend/src/app/admin/legislation/page.tsx
@@ -90,7 +90,15 @@ export default function AdminLegislationPage() {
   // Define Table Columns
   const columns: ColumnDef<Legislation>[] = [
     { accessorKey: "bill_number", header: "Bill Number" },
-    { accessorKey: "title", header: "Title" },
+    {
+      accessorKey: "title",
+      header: "Title",
+      cell: ({ getValue }) => (
+        <div className="max-w-xs truncate" title={getValue() as string}>
+          {getValue() as string}
+        </div>
+      ),
+    },
     { accessorKey: "status", header: "Status" },
     { accessorKey: "type", header: "Type" },
     { accessorKey: "session_number", header: "Session" },
diff --git a/frontend/src/components/admin/AdminPageShell.tsx b/frontend/src/components/admin/AdminPageShell.tsx
index c95c218..e6faaec 100644
--- a/frontend/src/components/admin/AdminPageShell.tsx
+++ b/frontend/src/components/admin/AdminPageShell.tsx
@@ -28,8 +28,10 @@ export function AdminPageHeader({
 }) {
   return (
     <div className="flex flex-col gap-4 border-b border-slate-200 pb-4 sm:flex-row sm:items-start sm:justify-between">
-      <div>
-        <h1 className="text-2xl font-semibold text-slate-900">{title}</h1>
+      <div className="min-w-0">
+        <h1 className="truncate text-2xl font-semibold text-slate-900">
+          {title}
+        </h1>
         {description ? (
           <p className="mt-1 text-sm text-slate-600">{description}</p>
         ) : null}