User report: after #505 the admin "لوحة التحكم" header looked pinned
at the top of the page, but disappeared as soon as the user scrolled
down. Same bug silently affected every page wrapped in `.os-bg`.
Root cause (artifacts/tx-os/src/index.css, lines 190-193):
.os-bg > * { position: relative; z-index: 1; }
This rule was meant to lift page content above the decorative
gradient blobs (`.os-bg::before/::after`, position:fixed z-index:0).
But by setting `position: relative` on every direct child it also
overrode any `position: sticky` declared via Tailwind utilities on
those children — equal-specificity class selectors, with index.css
loaded after Tailwind utilities, so .os-bg won source-order. The
"sticky" headers therefore behaved as plain in-flow elements and
scrolled away with the rest of the content.
Fix (one CSS rule):
- Replace `position: relative; z-index: 1` with `isolation: isolate`.
- `isolation: isolate` creates a new stacking context (so children
still paint above the z-index:0 blobs) without forcing them to
position:relative — sticky/fixed children now work as written.
No markup changes anywhere. Followed Option A in the task plan
exactly. Implication: every sticky header across the app (admin,
home, chat, services, notifications) is now actually pinned on
scroll. Decorative blobs continue to sit behind page content
because the new stacking context still paints over the parent's
z-index 0 background layer.
No tests were modified; existing tx-os tests are presentation-
agnostic and unaffected.
Task #477. The brand primary color was a very dark navy (218 70% 15%
≈ #0B1E3F) and dominated buttons, the active sidebar row, the FAB,
and focus rings. User asked to lighten it while keeping the same blue
family.
Change: in `artifacts/tx-os/src/index.css` (`:root`), bumped four
tokens to `218 55% 32%` (≈ #2C4A8A) and updated the inline hex
comment:
- `--primary`
- `--ring`
- `--sidebar-primary`
- `--sidebar-ring`
White text on the new primary keeps WCAG AA contrast (≈5.3:1), so the
existing `--primary-foreground: 0 0% 100%` is preserved.
No other tokens (background, foreground, accent, secondary, destructive,
borders) were touched. No component-level overrides were modified.
Followup to #459. After that fix, Notes/Home no longer had
overflow-hidden, but the user reported the URL bar still didn't
collapse on Notes (when few notes), Services, or Notifications.
Root cause: iOS Safari only collapses its URL bar when the document
is actually scrollable. Services (small grid), Notifications (short
list), and Notes-when-empty all fit within the viewport on iPad, so
there's no scroll trigger. Executive Meetings worked only because
its schedule list always overflows.
Fix (touch-only, single CSS rule in index.css @layer base):
@media (hover: none) and (pointer: coarse) {
html, body { min-height: calc(100svh + 1px); }
}
Why 100svh: it's the viewport-with-URL-bar-visible height, so the
+1px gap stays constant regardless of whether the bar is shown or
hidden — no oscillation. Why touch-only media query: keeps desktop
browsers from showing a stray scrollbar on short pages. Universal
fix — applies to every page automatically, no per-page edits.
Out of scope (per task): no PWA install meta, no per-page changes,
no styling changes. Pre-existing `test` workflow failure on
unrelated executive-meetings.ts type errors is not addressed here.
After Task #449 the sticky Notes header was still scrolling away.
Root cause: `overflow-x: hidden` on `html, body` makes both
elements scroll containers. Body sized itself to its content
(no internal scroll happens), so a `position: sticky` descendant
got scoped to a non-scrolling container and rode off-screen with
the page.
`overflow-x: clip` clips overflowing content the same visual way
`hidden` does, but it does NOT establish a scroll container, so
sticky descendants continue to resolve against the viewport and
pin correctly.
Changed only `artifacts/tx-os/src/index.css` (the `html, body`
rule added in #449). All other rules untouched. `overflow: clip`
is supported in Chrome 90+, Firefox 81+, Safari 16+.
After Task #448 switched the Notes header to `sticky top-0`, it
still scrolled away with the page. Root cause was in
`artifacts/tx-os/src/index.css`: the shared `.os-bg` class set
`overflow-x: hidden`, which per CSS spec turns the element into a
scroll container. Since the Notes page wrapper carries `os-bg` and
also has `min-h-screen`, the wrapper expanded to fit content
(never scrolled internally) while the document body scrolled —
which meant the sticky header was scoped to a non-scrolling
container and rode along with the page.
Fix:
- Removed `overflow-x: hidden` from `.os-bg`.
- Added `html, body { overflow-x: hidden; }` inside the existing
`@layer base` block so the horizontal-clip protection still
exists at the document level (which does not break sticky in
descendants).
No other changes. Notes page header now actually pins to the top
during scroll across all tabs / folder views, and other pages that
use `.os-bg` (home, services, executive-meetings, etc.) keep their
horizontal-overflow protection via the body-level rule.
Update font configurations to exclusively use DIN Next LT Arabic, preload necessary font files, and implement eager font loading to prevent display issues during printing.
Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 814df7a0-9300-4efe-a4b5-b5e474e8c99f
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/Ow4s0aa
Replit-Helium-Checkpoint-Created: true
Four UI changes requested by an Arabic-speaking user on the floating
"اجتماع يبدأ قريباً" popup:
1. Time window LTR — wrap the header `alert-time-window` span in
`dir="ltr"` so the start time always appears on the left and the
end on the right, even inside the Arabic RTL UI. Prevents the
"م 3:20 – م 3:10" reversal seen in the user's screenshot.
2. Drop the duplicate "Time" row inside DetailsPanel — the same
start/end window is already shown in the header strip. Removed
the `if (timeWindow) rows.push({ key: "time", ... })` block; the
`timeWindow` local was deleted along with it. Header is now the
single source of truth.
3. Remove the labelled "تجاهل التنبيه" footer button. The X close
button in the header still calls `handleDismiss`, so users can
still dismiss; the action bar is now just Done / Postpone /
Details. `handleDismiss`, `dismissToast`, and the i18n keys are
left intact for the X button.
4. Make the "يبدأ خلال N دقائق" / "يبدأ الآن" countdown blink red.
Added a dedicated `@keyframes em-blink` (1s, opacity 1 → 0.15 →
1) and `.em-blink` class in `src/index.css`, with a
`prefers-reduced-motion` override that pins it at full opacity.
Countdown span uses `text-red-600 em-blink font-semibold`. The
previously-used `accentText` local had no remaining consumers,
so it was removed (replaced with an explanatory comment).
Files:
- artifacts/tx-os/src/components/executive-meetings/upcoming-meeting-alert.tsx
- artifacts/tx-os/src/index.css
Verification: `pnpm -C artifacts/tx-os exec tsc --noEmit` clean.
Architect review APPROVED (PASS). No tests referenced the removed
`alert-dismiss` / `alert-details-time` testids.
Pre-existing failures (unrelated): api-server workflow and the
combined `test` workflow continue to fail with the same upstream
issues observed in #342/#343 trajectory; this change does not
touch the API server or e2e test infrastructure.
User report: "the dropdown for changing the site font does not work."
Root cause: FontSettingsSection listed Cairo / Tajawal / Noto Naskh
Arabic / Amiri, but only Tajawal had been registered with @font-face.
Picking the others was a no-op. Site default body font was also not
DIN Next LT Arabic as designed.
Changes:
- artifacts/tx-os/src/index.css: --app-font-sans now starts with
"DIN Next LT Arabic"; dropped IBM Plex Mono.
- artifacts/tx-os/index.html: removed Google Fonts <link> + preconnect.
- artifacts/tx-os/src/pages/executive-meetings.tsx: FontSettingsSection
dropdown replaced with the 5 actually-bundled families + system.
- artifacts/api-server/src/routes/executive-meetings.ts: FONT_FAMILIES
Zod allowlist updated to match.
- artifacts/api-server/src/lib/sanitize.ts: FONT_NAME_PART regex now
allows the new families (kept IBM Plex Sans Arabic for backward
compat). Fixes a latent bug from #301 where the rich-text sanitizer
silently stripped attendee font picks on save.
- artifacts/api-server/src/lib/pdf-renderer.ts: FAMILY_MAP and
ARABIC_FONT_NAMES updated. Sans-style families map to the bundled
NotoSansArabic; Naskh-style families to NotoNaskhArabic.
- artifacts/api-server/tests/executive-meetings.test.mjs: PDF
sans-vs-naskh assertion updated from Cairo/Noto Naskh Arabic to
DIN Next LT Arabic/Majalla, preserving its semantics. Other
Cairo/Noto Naskh Arabic occurrences swapped to the new names.
- replit.md: documented site default font + lockstep allowlist rule.
Deviations from plan: kept DEFAULT_FONT.fontFamily = "system" on the
frontend (and the backend Zod default) instead of changing it to
"DIN Next LT Arabic". "system" semantically means "no override → use
the CSS default", which is now DIN Next LT Arabic — same end result
without forcing a migration on existing rows. The sanitizer change
was not in the original plan but was required to make the picker
actually persist.
Verification:
- Frontend tsc clean.
- Backend tsc shows the same pre-existing unrelated errors as before
(isHighlighted boolean/number; Drizzle scope typing).
- E2E browser test verified all 7 assertions: site default font,
no Google Fonts requests, exactly 6 dropdown options, font picker
applies + reverts correctly, attendee font picks persist after save.
- Code review verdict: PASS.
Curated 22 font files from the user's uploaded zip into
artifacts/tx-os/public/fonts/ and exposed five families in the
in-place editor's font dropdown:
- DIN Next LT Arabic (5 weights)
- Tajawal (7 weights)
- Helvetica Neue LT Arabic (3 weights)
- Helvetica Neue (5 weights)
- Majalla (2 weights)
Declared via @font-face in artifacts/tx-os/src/custom-fonts.css with
font-display: swap so weights are only fetched on demand. Each
<option> in the toolbar dropdown now previews itself in its own
family.
Tab quick-add: pressing Tab inside an attendee name's EditableCell
commits the current value and immediately opens a new pending
attendee row right after it, so users can type names continuously
without mousing. Implemented via:
- new optional `onTabNext` prop on EditableCell, captured into a
ref so the handler (created once via useEditor with [] deps)
always fires the latest callback;
- new `chainStartAdd` shared prop on AttendeeFlow that bypasses
the parent's `hasAnyPending` UI gate (the state-level guard in
`setPendingAttendee(prev => prev ? prev : new)` still prevents
truly overlapping pendings);
- wiring on both existing-attendee and pending-attendee cells.
Drift from plan:
- The plan also mentioned Shift+Tab to focus the previous person.
Scoped out — focus-from-outside isn't supported by EditableCell
today, and the user only asked for forward Tab. Shift+Tab now
falls through to default browser focus behaviour.
E2E test (testing skill) passed for both features. Architect review
returned a Pass with one minor note that IBM Plex Sans Arabic has
no @font-face entry in custom-fonts.css — that family is already
loaded via the existing Google Fonts <link> in index.html (it is
the app's default --app-font-sans), so the dropdown option works
as expected.
Pre-existing api-server test failures are unrelated and predate
this task.
Original task:
After Task #125 enabled pinch-zoom app-wide, iOS Safari's default
behavior of auto-zooming when the user taps into any input/textarea/
select with computed font-size < 16px became very noticeable — the
page zooms in on focus and stays there.
Fix:
Added a single iOS-scoped CSS block to artifacts/tx-os/src/index.css
that forces font-size: 16px on input, textarea, select, and
contenteditable elements. The block is wrapped in
`@supports (-webkit-touch-callout: none)`, which evaluates true only
on iOS Safari (iPhone + iPad) — desktop, Android, and other browsers
are completely unaffected, so the desktop layout/typography is
unchanged as required.
`!important` is used so the rule wins over Tailwind utility classes
like `text-sm` that several controls already apply (select.tsx,
command.tsx, input-otp.tsx, input-group.tsx). Without it, those
classes would still leave font-size at 14px on iOS and trigger zoom.
Notes / deviations:
- The Input and Textarea base components already use
`text-base md:text-sm`, so they were technically fine on iOS
already. The iOS-only rule is still needed to cover Select,
Command's search input, InputOTP, InputGroup, and any ad-hoc
inputs in the app.
- Did not modify input.tsx or textarea.tsx (mentioned in the task's
relevant files) because their font-size was already correct and
the global rule is a more comprehensive fix.
Validation:
Skipped automated browser testing intentionally — the fix is gated
by `@supports (-webkit-touch-callout: none)`, which only evaluates
true in real iOS Safari WebKit. Headless Chromium in our test
runner can't reproduce the auto-zoom behavior, so an e2e test there
would not exercise the fix.
Files touched:
- artifacts/tx-os/src/index.css
Replit-Task-Id: 7ea95cb8-620c-4217-bfa4-b2c0878ecab8
Changed the shadcn `--accent` token in tx-os from violet-500 (the
shadcn default leftover) to slate-100, matching `--sidebar-accent`
so dropdown / select / context-menu / calendar / popover hover and
focus states now share one cohesive soft-slate look with the
sidebar instead of clashing with the navy header and primary blue.
Files:
- artifacts/tx-os/src/index.css
- --accent: 262 83% 66% → 210 40% 96% (slate-100)
- --accent-foreground: 0 0% 100% → 222 47% 11% (slate-900)
Cascade: every shadcn primitive that consumes bg-accent /
focus:bg-accent / data-[state=open]:bg-accent picks this up
automatically — no per-component edits needed (verified
DropdownMenu, ContextMenu, NavigationMenu, Menubar, Command,
Calendar, Select, Popover, plus the executive-meetings MergeMenu).
Out of scope (intentionally left): decorative login-page violet
gradients, user-pickable violet color options in the cell/row
color pickers, the violet Bell icon on the notifications page,
and the animated login art.
Pre-existing TS errors in use-notifications-socket.ts and
admin.tsx (missing exports from @workspace/api-client-react) are
codegen drift from the recently merged tasks #109/#110 and are
unrelated to this CSS-only change.
riyadhafraa