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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user