Task #443: Fix notes search icon overlapping placeholder in Arabic

Problem: in the Notes page header search field, the magnifier icon is
absolutely positioned on the start side (right in RTL, left in LTR)
via inline style, but the input's reserved padding was using
`isRtl ? "pe-9" : "ps-9"`. In RTL, `pe-9` resolves to padding-LEFT —
the opposite side from the icon — so the placeholder text "ابحث في
الملاحظات" started flush to the right edge and visibly overlapped
the icon. In LTR it happened to look correct because both `ps-9` and
the icon's `left: 10` line up.

Fix: pin the padding to the start side unconditionally
(`className="ps-9"`) so it always matches the icon's start-side
placement in both directions. Added an inline comment documenting
the invariant ("icon on start side ⇒ padding on start side") so a
future edit doesn't re-introduce the asymmetry.

Files:
- artifacts/tx-os/src/pages/notes.tsx (search input around line 304-321)

No behavioural changes to LTR rendering, no other search inputs
affected (only this one bound the padding to `isRtl`). Verified with
`pnpm exec tsc --noEmit` (clean). The pre-existing failing `test`
workflow stems from unrelated api-server tsc errors in
executive-meetings.ts and is out of scope for this task.
This commit is contained in:
Riyadh
2026-05-08 11:03:26 +00:00
parent 64e7d8a55e
commit b4f0c913fc
+7 -1
View File
@@ -304,11 +304,17 @@ export default function NotesPage() {
className="absolute top-1/2 -translate-y-1/2 text-muted-foreground"
style={isRtl ? { right: 10 } : { left: 10 }}
/>
{/* The icon sits on the start side in both directions
(right in RTL, left in LTR), so the input's reserved
padding must also be on the start side — using `ps-9`
here unconditionally. The previous `pe-9` in RTL put
the padding on the left while the icon was on the
right, which let the placeholder overlap the icon. */}
<Input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder={t("notes.searchPlaceholder", "Search notes")}
className={isRtl ? "pe-9" : "ps-9"}
className="ps-9"
/>
</div>