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