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:
@@ -304,11 +304,17 @@ export default function NotesPage() {
|
|||||||
className="absolute top-1/2 -translate-y-1/2 text-muted-foreground"
|
className="absolute top-1/2 -translate-y-1/2 text-muted-foreground"
|
||||||
style={isRtl ? { right: 10 } : { left: 10 }}
|
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
|
<Input
|
||||||
value={search}
|
value={search}
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
onChange={(e) => setSearch(e.target.value)}
|
||||||
placeholder={t("notes.searchPlaceholder", "Search notes")}
|
placeholder={t("notes.searchPlaceholder", "Search notes")}
|
||||||
className={isRtl ? "pe-9" : "ps-9"}
|
className="ps-9"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user