From 9e43bad862fc6ec9e1726a1c1a23fb07055e5563 Mon Sep 17 00:00:00 2001
From: yaaabs <brianyabut02@gmail.com>
Date: Sun, 21 Sep 2025 17:52:39 +0800
Subject: [PATCH 1/7] refactor(legislative): remove empty className and unused
 import

---
 src/pages/government/legislative/[chamber].tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/government/legislative/[chamber].tsx b/src/pages/government/legislative/[chamber].tsx
index f9bd2f5f3..eebb1d3af 100644
--- a/src/pages/government/legislative/[chamber].tsx
+++ b/src/pages/government/legislative/[chamber].tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'react-router-dom'
-import { ExternalLink, MapPin, Phone, Globe, Mail } from 'lucide-react'
+import { ExternalLink, MapPin, Phone, Globe } from 'lucide-react'
 import legislativeData from '../../../data/directory/legislative.json'
 
 // Recursive component to render legislative details
@@ -136,7 +136,7 @@ export default function LegislativeChamber() {
   return (
     <div className="space-y-6">
       <div className="bg-white rounded-lg  shadow-sm">
-        <div className="">
+        <div>
           <h1 className="text-3xl font-bold text-gray-900 mb-2">
             {chamberData.chamber}
           </h1>

From 914bf22e695994d11d138da1d2123e37c29233d8 Mon Sep 17 00:00:00 2001
From: yaaabs <brianyabut02@gmail.com>
Date: Sun, 21 Sep 2025 17:54:53 +0800
Subject: [PATCH 2/7] Revert "refactor(legislative): remove empty className and
 unused import"

This reverts commit 9e43bad862fc6ec9e1726a1c1a23fb07055e5563.
---
 src/pages/government/legislative/[chamber].tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/government/legislative/[chamber].tsx b/src/pages/government/legislative/[chamber].tsx
index eebb1d3af..f9bd2f5f3 100644
--- a/src/pages/government/legislative/[chamber].tsx
+++ b/src/pages/government/legislative/[chamber].tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'react-router-dom'
-import { ExternalLink, MapPin, Phone, Globe } from 'lucide-react'
+import { ExternalLink, MapPin, Phone, Globe, Mail } from 'lucide-react'
 import legislativeData from '../../../data/directory/legislative.json'
 
 // Recursive component to render legislative details
@@ -136,7 +136,7 @@ export default function LegislativeChamber() {
   return (
     <div className="space-y-6">
       <div className="bg-white rounded-lg  shadow-sm">
-        <div>
+        <div className="">
           <h1 className="text-3xl font-bold text-gray-900 mb-2">
             {chamberData.chamber}
           </h1>

From ada8f660cffa338658d9cd1bf755b422c24f5f61 Mon Sep 17 00:00:00 2001
From: yaaabs <brianyabut02@gmail.com>
Date: Sun, 21 Sep 2025 17:56:49 +0800
Subject: [PATCH 3/7] refactor(legislative): remove unused Mail import

---
 src/pages/government/legislative/[chamber].tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/government/legislative/[chamber].tsx b/src/pages/government/legislative/[chamber].tsx
index f9bd2f5f3..8e9575261 100644
--- a/src/pages/government/legislative/[chamber].tsx
+++ b/src/pages/government/legislative/[chamber].tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'react-router-dom'
-import { ExternalLink, MapPin, Phone, Globe, Mail } from 'lucide-react'
+import { ExternalLink, MapPin, Phone, Globe } from 'lucide-react'
 import legislativeData from '../../../data/directory/legislative.json'
 
 // Recursive component to render legislative details

From 275db781b728fa5ac31c13c31314222901fd0759 Mon Sep 17 00:00:00 2001
From: yaaabs <brianyabut02@gmail.com>
Date: Sun, 21 Sep 2025 18:01:56 +0800
Subject: [PATCH 4/7] feat(legislative): add email support for legislative
 officials

---
 .../government/legislative/[chamber].tsx      | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/pages/government/legislative/[chamber].tsx b/src/pages/government/legislative/[chamber].tsx
index 8e9575261..61225bf4e 100644
--- a/src/pages/government/legislative/[chamber].tsx
+++ b/src/pages/government/legislative/[chamber].tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'react-router-dom'
-import { ExternalLink, MapPin, Phone, Globe } from 'lucide-react'
+import { ExternalLink, MapPin, Phone, Globe, Mail } from 'lucide-react'
 import legislativeData from '../../../data/directory/legislative.json'
 
 // Recursive component to render legislative details
@@ -44,7 +44,6 @@ function LegislativeDetailSection({
     'address',
     'trunkline',
     'website',
-    'email',
   ]
 
   if (isSimpleObject) {
@@ -59,6 +58,23 @@ function LegislativeDetailSection({
         {Object.entries(data).map(([key, value]) => {
           if (skipKeys.includes(key) || value === undefined) return null
 
+          // Special handling for email fields
+          if (key === 'email' && value) {
+            return (
+              <div key={key} className="text-sm">
+                <div className="flex items-start">
+                  <Mail className="h-4 w-4 text-gray-400 mr-2 mt-0.5 flex-shrink-0" />
+                  <a
+                    href={`mailto:${value}`}
+                    className="text-primary-600 hover:underline leading-relaxed"
+                  >
+                    {String(value)}
+                  </a>
+                </div>
+              </div>
+            )
+          }
+
           return (
             <div key={key} className="text-sm">
               <span className="text-gray-800 leading-relaxed">

From 9cf5a2adaceaba1c5aeeb399226cff21013de17d Mon Sep 17 00:00:00 2001
From: yaaabs <brianyabut02@gmail.com>
Date: Sun, 21 Sep 2025 21:20:29 +0800
Subject: [PATCH 5/7] fix: add missing semicolon and improve typescript types
 in legislative chamber component

---
 src/pages/government/legislative/[chamber].tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pages/government/legislative/[chamber].tsx b/src/pages/government/legislative/[chamber].tsx
index 58d7dbc84..95daca095 100644
--- a/src/pages/government/legislative/[chamber].tsx
+++ b/src/pages/government/legislative/[chamber].tsx
@@ -7,7 +7,7 @@ function LegislativeDetailSection({
   data,
   level = 0,
 }: {
-  data: any;
+  data: unknown;
   level?: number;
 }) {
   if (data === null || typeof data !== 'object') {
@@ -44,7 +44,7 @@ function LegislativeDetailSection({
     'address',
     'trunkline',
     'website',
-  ]
+  ];
 
   if (isSimpleObject) {
     const cols = Object.keys(data).length > 4 ? Object.keys(data).length : 4;
@@ -61,18 +61,18 @@ function LegislativeDetailSection({
           // Special handling for email fields
           if (key === 'email' && value) {
             return (
-              <div key={key} className="text-sm">
-                <div className="flex items-start">
-                  <Mail className="h-4 w-4 text-gray-400 mr-2 mt-0.5 flex-shrink-0" />
+              <div key={key} className='text-sm'>
+                <div className='flex items-start'>
+                  <Mail className='h-4 w-4 text-gray-400 mr-2 mt-0.5 flex-shrink-0' />
                   <a
                     href={`mailto:${value}`}
-                    className="text-primary-600 hover:underline leading-relaxed"
+                    className='text-primary-600 hover:underline leading-relaxed'
                   >
                     {String(value)}
                   </a>
                 </div>
               </div>
-            )
+            );
           }
 
           return (
@@ -135,7 +135,7 @@ export default function LegislativeChamber() {
   const { chamber } = useParams<{ chamber: string }>();
 
   const chamberData = legislativeData.find(
-    (item: any) => item.slug === chamber
+    (item: { slug: string }) => item.slug === chamber
   );
 
   if (!chamberData) {

From 1cd7857bb9c6b93c50be70e55a625ca235a79698 Mon Sep 17 00:00:00 2001
From: yaaabs <brianyabut02@gmail.com>
Date: Sun, 21 Sep 2025 21:42:59 +0800
Subject: [PATCH 6/7] fix: add missing Mail import from lucide-react

---
 src/pages/government/legislative/[chamber].tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/government/legislative/[chamber].tsx b/src/pages/government/legislative/[chamber].tsx
index d425f28d6..95daca095 100644
--- a/src/pages/government/legislative/[chamber].tsx
+++ b/src/pages/government/legislative/[chamber].tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'react-router-dom';
-import { ExternalLink, MapPin, Phone, Globe } from 'lucide-react';
+import { ExternalLink, MapPin, Phone, Globe, Mail } from 'lucide-react';
 import legislativeData from '../../../data/directory/legislative.json';
 
 // Recursive component to render legislative details

From acf11bc1e70c3ae10b00f66d3d1d7398afa31284 Mon Sep 17 00:00:00 2001
From: yaaabs <brianyabut02@gmail.com>
Date: Mon, 22 Sep 2025 18:10:03 +0800
Subject: [PATCH 7/7] refactor: make Secretariat Officials table responsive

---
 .../government/legislative/[chamber].tsx      | 84 ++++++++++++++++---
 1 file changed, 73 insertions(+), 11 deletions(-)

diff --git a/src/pages/government/legislative/[chamber].tsx b/src/pages/government/legislative/[chamber].tsx
index 95daca095..e837519da 100644
--- a/src/pages/government/legislative/[chamber].tsx
+++ b/src/pages/government/legislative/[chamber].tsx
@@ -47,18 +47,80 @@ function LegislativeDetailSection({
   ];
 
   if (isSimpleObject) {
-    const cols = Object.keys(data).length > 4 ? Object.keys(data).length : 4;
-
+    // Responsive table for Secretariat Officials (level 1)
+    if (
+      level === 1 &&
+      typeof data === 'object' &&
+      data !== null &&
+      'role' in data &&
+      'name' in data
+    ) {
+      const obj = data as {
+        role: string;
+        name: string;
+        office?: string;
+        contact?: string;
+        email?: string;
+      };
+      return (
+        <div className='overflow-x-auto w-full'>
+          <table className='min-w-full border-separate border-spacing-y-2'>
+            <tbody>
+              <tr className='bg-white'>
+                <td
+                  className='whitespace-nowrap text-sm font-medium text-gray-900 pr-4 align-top'
+                  style={{ maxWidth: '180px' }}
+                >
+                  {obj.role}
+                </td>
+                <td
+                  className='whitespace-nowrap text-sm text-gray-900 pr-4 align-top'
+                  style={{ maxWidth: '220px' }}
+                >
+                  {obj.name}
+                </td>
+                {obj.office && (
+                  <td
+                    className='whitespace-nowrap text-sm text-gray-700 pr-4 align-top'
+                    style={{ maxWidth: '220px' }}
+                  >
+                    {obj.office}
+                  </td>
+                )}
+                <td
+                  className='whitespace-nowrap text-sm text-gray-700 pr-4 align-top'
+                  style={{ maxWidth: '180px' }}
+                >
+                  {obj.contact}
+                </td>
+                {obj.email && (
+                  <td
+                    className='whitespace-nowrap text-sm pr-4 align-top'
+                    style={{ maxWidth: '220px' }}
+                  >
+                    <div className='flex items-center'>
+                      <Mail className='h-4 w-4 text-gray-400 mr-2 flex-shrink-0' />
+                      <a
+                        href={`mailto:${obj.email}`}
+                        className='text-primary-600 hover:underline break-all'
+                        style={{ wordBreak: 'break-all' }}
+                      >
+                        {String(obj.email)}
+                      </a>
+                    </div>
+                  </td>
+                )}
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      );
+    }
+    // Fallback for other simple objects
     return (
-      <div
-        className={`mb-4 grid grid-cols-${cols} md:grid-cols-${cols} lg:grid-cols-${cols} gap-x-6 ${
-          level === 1 ? 'rounded-2xl font-bold text-lg' : ''
-        }`}
-      >
+      <div className='mb-4 grid grid-cols-1 md:grid-cols-2 gap-x-6'>
         {Object.entries(data).map(([key, value]) => {
           if (skipKeys.includes(key) || value === undefined) return null;
-
-          // Special handling for email fields
           if (key === 'email' && value) {
             return (
               <div key={key} className='text-sm'>
@@ -66,7 +128,8 @@ function LegislativeDetailSection({
                   <Mail className='h-4 w-4 text-gray-400 mr-2 mt-0.5 flex-shrink-0' />
                   <a
                     href={`mailto:${value}`}
-                    className='text-primary-600 hover:underline leading-relaxed'
+                    className='text-primary-600 hover:underline leading-relaxed break-all'
+                    style={{ wordBreak: 'break-all' }}
                   >
                     {String(value)}
                   </a>
@@ -74,7 +137,6 @@ function LegislativeDetailSection({
               </div>
             );
           }
-
           return (
             <div key={key} className='text-sm'>
               <span className='text-gray-800 leading-relaxed'>