From 0451d451104666f49d23f5a98f214d5c45fc2b5c Mon Sep 17 00:00:00 2001
From: Replit Agent <agent@replit.com>
Date: Thu, 4 Jun 2026 08:02:19 +0000
Subject: [PATCH] Center meeting details and attendee information horizontally

Update `artifacts/tx-os/src/pages/executive-meetings.tsx` to apply horizontal centering to meeting titles, locations, attendee group headers, attendee names, and merge placeholders for improved visual consistency.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 611256d1-27a6-47df-99f9-aa1bdc1a3b15
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/fKZh36i
Replit-Helium-Checkpoint-Created: true
---
 .../tx-os/src/pages/executive-meetings.tsx    | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/artifacts/tx-os/src/pages/executive-meetings.tsx b/artifacts/tx-os/src/pages/executive-meetings.tsx
index 2f80e9d6..9dd1c898 100644
--- a/artifacts/tx-os/src/pages/executive-meetings.tsx
+++ b/artifacts/tx-os/src/pages/executive-meetings.tsx
@@ -4645,22 +4645,20 @@ function MeetingRow({
               onSave={onSaveTitle}
               ariaLabel={t("executiveMeetings.editMeetingTitle")}
               dir={isRtl ? "rtl" : "ltr"}
-              // #641: pin to cell-start alignment (right in AR, left in EN)
-              // for the view-mode wrapper AND any inner `<p>` Tiptap saved —
-              // `safeHtml` keeps `style` attributes (so users can colour /
-              // size text), which means a stray `text-align: center` saved
-              // by the editor would otherwise leak into the cell. The
-              // `!` modifier outranks the inline style so the title always
-              // reads from the start of the cell regardless of what's
-              // stored.
-              className="font-medium leading-snug break-words text-start [&_p]:!text-start"
+              // Center the title horizontally for the view-mode wrapper AND
+              // any inner `<p>` Tiptap saved — `safeHtml` keeps `style`
+              // attributes (so users can colour / size text), which means a
+              // stray `text-align` saved by the editor would otherwise leak
+              // into the cell. The `!` modifier outranks the inline style so
+              // the title always stays centered regardless of what's stored.
+              className="font-medium leading-snug break-words text-center [&_p]:!text-center"
               disabled={!canMutate}
               testId={`em-edit-title-${meeting.id}`}
               startInEditMode={autoEditTitle}
               onStartedEditing={onAutoEditTitleConsumed}
             />
             {meeting.location && (
-              <div className="text-[11px] text-muted-foreground mt-0.5 break-words">
+              <div className="text-[11px] text-muted-foreground mt-0.5 break-words text-center">
                 {meeting.location}
               </div>
             )}
@@ -4757,7 +4755,7 @@ function MeetingRow({
               }}
               ariaLabel={t("executiveMeetings.merge.editLabel")}
               dir={isRtl ? "rtl" : "ltr"}
-              className="font-medium leading-snug break-words"
+              className="font-medium leading-snug break-words text-center [&_p]:!text-center"
               disabled={!canMutate}
               placeholder={t("executiveMeetings.merge.placeholder")}
               testId={`em-merge-edit-${meeting.id}`}
@@ -5869,7 +5867,7 @@ function AttendeeGroup({
           than a stray line of text. */}
       <div
         data-testid="em-attendee-group-header"
-        className="text-sm font-bold text-[#0B1E3F] mt-0.5 mb-1 pb-0.5 text-start pointer-events-none select-none border-b border-[#0B1E3F]/15 print:border-b print:border-gray-400"
+        className="text-sm font-bold text-[#0B1E3F] mt-0.5 mb-1 pb-0.5 text-center pointer-events-none select-none border-b border-[#0B1E3F]/15 print:border-b print:border-gray-400"
       >
         {label}
       </div>
@@ -5964,7 +5962,7 @@ function AttendeeFlow({
   }
 
   if (items.length === 0 && !showAdd && !isPending) {
-    return <span className="text-xs text-gray-500">—</span>;
+    return <span className="block text-center text-xs text-gray-500">—</span>;
   }
 
   // Locate the listIdx where the inline pending ghost should appear, when
@@ -6009,7 +6007,7 @@ function AttendeeFlow({
     return (
       <li
         key={key}
-        className="basis-full text-start font-semibold text-[#0B1E3F]/90 mt-1.5 mb-0.5"
+        className="basis-full text-center font-semibold text-[#0B1E3F]/90 mt-1.5 mb-0.5"
         data-testid={`em-add-subheading-pending-${addType}`}
       >
         <EditableCell
@@ -6124,7 +6122,7 @@ function AttendeeFlow({
   };
 
   return (
-    <ul className={`flex flex-wrap justify-start items-baseline gap-x-4 gap-y-0.5 text-[#0B1E3F] leading-snug`}>
+    <ul className={`flex flex-wrap justify-center items-baseline gap-x-4 gap-y-0.5 text-[#0B1E3F] leading-snug`}>
       {items.flatMap(({ a, i }, listIdx) => {
         const isSub = (a.kind ?? "person") === "subheading";
         const nodes: ReactNode[] = [];
@@ -6150,7 +6148,7 @@ function AttendeeFlow({
               key={a.id ?? `sub-${i}`}
               data-testid={`em-attendee-subheading-${i}`}
               data-attendee-kind="subheading"
-              className="basis-full text-start font-semibold text-[#0B1E3F]/90 mt-1.5 mb-0.5 leading-snug"
+              className="basis-full text-center font-semibold text-[#0B1E3F]/90 mt-1.5 mb-0.5 leading-snug"
             >
               {editable ? (
                 <EditableCell