Task #392: Center the clock in Executive Meetings header

Moved the live HeaderClock from the actions cluster (next to the Export
PDF button) to the geometric center of the top header row.

Implementation:
- Made the header row container `relative`.
- Removed `<HeaderClock />` from the trailing actions `<div>`.
- Added an absolutely-positioned overlay (`absolute inset-x-0 top-0
  bottom-0 flex items-center justify-center pointer-events-none`)
  containing the clock, with the inner wrapper restoring
  `pointer-events-auto`. This keeps the clock visually centered
  regardless of whether the title or actions on either side are wider.
- Kept all #391 behaviors: `hidden sm:flex`, `print:hidden`, 1s tick,
  ar/en locale formatting, palette text-[#0B1E3F], tabular-nums,
  data-testid="em-header-clock".

No deviation from plan. tx-os typecheck passes.
This commit is contained in:
riyadhafraa
2026-05-05 09:52:54 +00:00
parent ca7af08999
commit 20ab1babfe
@@ -888,7 +888,7 @@ function ExecutiveMeetingsPageInner() {
data-testid="em-page-header"
className="sticky top-0 z-40 bg-white border-b border-gray-200 shadow-sm print:static print:shadow-none print:hidden"
>
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 py-3 flex items-center gap-3 sm:gap-4 flex-wrap">
<div className="relative max-w-screen-2xl mx-auto px-4 sm:px-6 py-3 flex items-center gap-3 sm:gap-4 flex-wrap">
<Button
variant="ghost"
size="icon"
@@ -912,8 +912,16 @@ function ExecutiveMeetingsPageInner() {
<div className="flex-1" />
<div
className="hidden sm:flex pointer-events-none absolute inset-x-0 top-0 bottom-0 items-center justify-center print:hidden"
aria-hidden="false"
>
<div className="pointer-events-auto">
<HeaderClock lang={lang} />
</div>
</div>
<div className="flex items-center gap-2">
<HeaderClock lang={lang} />
<Button
variant="outline"
size="sm"