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