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
This commit is contained in:
Replit Agent
2026-06-04 08:02:19 +00:00
parent 4ac864b520
commit 0451d45110
@@ -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