m/paliad
1
0
Fork 0
Code Issues 146 Pull Requests 8 Actions 1 Packages Projects Releases Wiki Activity

Search inputs: magnifying-glass icon overlaps placeholder text (Fristenrechner 'Akte suchen' + audit other search fields) #112

New Issue
Open
opened 2026-05-25 14:41:10 +00:00 by mAi · 1 comment
mAi commented 2026-05-25 14:41:10 +00:00
Collaborator
Copy Link

m's report (2026-05-25 16:40)

In the search field in the Fristenrechner search Field (help text is 'Akte suchen' - there is the magnifying glass icon at the beginning of the field. But it overlaps with the text. A common bug, I bet. Can you have someone fix it low-key?

Scope

Search inputs with an absolute-positioned magnifying-glass icon at the left often need a corresponding padding-left on the <input> element to make room for the icon. Without it, the placeholder + typed text starts at x=0 and overlaps the icon.

Fix the Fristenrechner 'Akte suchen' field first; audit other search fields in paliad with the same pattern + fix in the same commit.

Likely affected places to check:

  • Fristenrechner project picker (m's report)
  • /projects index search
  • /events search
  • Custom-View filter-bar search
  • Event-type modal search (artemis #82 Part 1)
  • /submissions index search
  • Admin pages (users, project_event_choices, etc. — newer surfaces)

What to do

  1. Search the frontend for inputs with a leading magnifying-glass icon — likely a shared class like .search-input or .input-with-icon plus .icon--left / .icon--search.
  2. For each, add padding-left: 2.25rem (or whatever offset matches the icon's width + spacing) so the text starts after the icon.
  3. Don't fix one-off — find the shared CSS class and patch THAT so every search field benefits.
  4. Verify across all the surfaces listed above.
  5. Keep RTL languages in mind (not in scope but: use padding-inline-start instead of padding-left if other rules already do).

Files most likely touched

  • frontend/src/styles/global.css — shared search-input class
  • Possibly individual page files if any define their own search-input style

Hard rules

  • Low-key change. Don't redesign the icon or the input.
  • Don't break placeholder colour / focus ring / disabled state.
  • go build ./... && go test ./internal/... && cd frontend && bun run build clean.
  • Branch: mai/<worker>/search-input-icon-padding.

Out of scope

  • Right-aligned icons (clear-X button) — they have their own pattern.
  • Adding new search inputs.

Reporting

mai report completed with branch + SHAs + list of every search input fixed in this pass.

## m's report (2026-05-25 16:40) > In the search field in the Fristenrechner search Field (help text is 'Akte suchen' - there is the magnifying glass icon at the beginning of the field. But it overlaps with the text. A common bug, I bet. Can you have someone fix it low-key? ## Scope Search inputs with an absolute-positioned magnifying-glass icon at the left often need a corresponding `padding-left` on the `<input>` element to make room for the icon. Without it, the placeholder + typed text starts at x=0 and overlaps the icon. Fix the Fristenrechner 'Akte suchen' field first; **audit other search fields** in paliad with the same pattern + fix in the same commit. Likely affected places to check: - Fristenrechner project picker (m's report) - /projects index search - /events search - Custom-View filter-bar search - Event-type modal search (artemis #82 Part 1) - /submissions index search - Admin pages (users, project_event_choices, etc. — newer surfaces) ## What to do 1. Search the frontend for inputs with a leading magnifying-glass icon — likely a shared class like `.search-input` or `.input-with-icon` plus `.icon--left` / `.icon--search`. 2. For each, add `padding-left: 2.25rem` (or whatever offset matches the icon's width + spacing) so the text starts after the icon. 3. **Don't fix one-off** — find the shared CSS class and patch THAT so every search field benefits. 4. Verify across all the surfaces listed above. 5. Keep RTL languages in mind (not in scope but: use `padding-inline-start` instead of `padding-left` if other rules already do). ## Files most likely touched - `frontend/src/styles/global.css` — shared search-input class - Possibly individual page files if any define their own search-input style ## Hard rules - Low-key change. Don't redesign the icon or the input. - Don't break placeholder colour / focus ring / disabled state. - `go build ./... && go test ./internal/... && cd frontend && bun run build` clean. - Branch: `mai/<worker>/search-input-icon-padding`. ## Out of scope - Right-aligned icons (clear-X button) — they have their own pattern. - Adding new search inputs. ## Reporting `mai report completed` with branch + SHAs + list of every search input fixed in this pass.
mAi self-assigned this 2026-05-25 14:41:10 +00:00
mAi commented 2026-05-25 14:50:38 +00:00
Author
Collaborator
Copy Link

Fixed — Fristenrechner Akte-Picker icon overlap

Root cause (.fristen-step1-search-row in frontend/src/styles/global.css):

The Step-1 Akte picker wraps its magnifying-glass icon + input in a flexbox row with gap: 0.5rem, expecting the icon to participate in the flex layout. But the shared .fristen-search-icon rule (used by the B2 search input on the same page) sets position: absolute; left: 0.875rem;. The step1-scoped override only tweaked color + flex-shrink: 0 — it never reset position. So the icon was absolutely-positioned out of the flex flow and overlapped the input text (since .fristen-akte-search has no padding-left).

Fix — one-line CSS, surgical:

.fristen-step1-search-row .fristen-search-icon {
+   position: static;
    color: var(--color-muted, #666);
    flex-shrink: 0;
}

This lets flexbox + gap handle icon-to-input spacing naturally — same pattern as .fristen-row-search-panel-input-wrap, which already worked.

Audit of every other search input in paliad

Went through every search input with a leading magnifying-glass icon and confirmed they were either already correct or have no icon to overlap. No other surface is affected.

Surface Class(es) Status
Fristenrechner — Akte picker (Step 1) .fristen-step1-search-row + .fristen-akte-search fixed in this commit
Fristenrechner — B2 forum search .fristen-search-row + .fristen-search-input OK — wrap is position: relative, input has padding: 0.75rem 2.5rem 0.75rem 2.6rem
Fristenrechner — row-search panel .fristen-row-search-panel-input-wrap + .fristen-row-search-panel-input OK — pure flex layout with gap, icon non-positioned
/projects index .projects-search-wrap + .projects-search-input OK — position: relative, input has padding: 0.5rem 0.75rem 0.5rem 2.4rem
/glossar .glossar-search-wrap + .glossar-search OK — input has padding: 0.65rem 4.5rem 0.65rem 2.5rem
/courts .glossar-search-wrap + .glossar-search OK (same shared class)
/links .glossar-search-wrap + .glossar-search OK (same shared class)
/team .glossar-search-wrap + .glossar-search OK (same shared class)
/admin/team .glossar-search-wrap + .glossar-search OK (same shared class)
/admin/event-types .glossar-search-wrap + .glossar-search OK (same shared class)
Sidebar global search .sidebar-search + .sidebar-search-input OK — pure flex layout, icon non-positioned
/events trigger-event picker (Fristenrechner mode-event) .event-search-input N/A — no leading icon
Event-type modal/picker (in client/event-types.ts) .event-type-search N/A — no leading icon
/submissions/new search + project picker .entity-form-input N/A — no leading icon
/submissions index (no icon) N/A

The .glossar-search class is the de-facto shared search-input class for the knowledge-platform pages, and it's already correctly set up. Nothing to consolidate further — the Fristenrechner Akte picker just had a stray inherited rule.

RTL note

In scope of the audit per the issue: the existing rules use padding-left / left: (not padding-inline-start / inset-inline-start:). Out of scope to refactor here, but worth flagging for a future i18n/RTL pass — every search input in the table above would need both axes flipped.

Verification

  • cd frontend && bun run build → clean (Build complete → dist/, i18n codegen: 2890 keys (unchanged))
  • go build ./... → clean (no output)
  • go test ./internal/... → all green

Branch: mai/orpheus/gitster-search-input
Commit: https://mgit.msbls.de/m/paliad/commit/5348cb5

— mAi (orpheus)

## Fixed — Fristenrechner Akte-Picker icon overlap **Root cause** (`.fristen-step1-search-row` in `frontend/src/styles/global.css`): The Step-1 Akte picker wraps its magnifying-glass icon + input in a flexbox row with `gap: 0.5rem`, expecting the icon to participate in the flex layout. But the shared `.fristen-search-icon` rule (used by the B2 search input on the same page) sets `position: absolute; left: 0.875rem;`. The step1-scoped override only tweaked `color` + `flex-shrink: 0` — it never reset `position`. So the icon was absolutely-positioned out of the flex flow and overlapped the input text (since `.fristen-akte-search` has no `padding-left`). **Fix** — one-line CSS, surgical: ```css .fristen-step1-search-row .fristen-search-icon { + position: static; color: var(--color-muted, #666); flex-shrink: 0; } ``` This lets flexbox + `gap` handle icon-to-input spacing naturally — same pattern as `.fristen-row-search-panel-input-wrap`, which already worked. ## Audit of every other search input in paliad Went through every search input with a leading magnifying-glass icon and confirmed they were either already correct or have no icon to overlap. **No other surface is affected.** | Surface | Class(es) | Status | |---|---|---| | Fristenrechner — Akte picker (Step 1) | `.fristen-step1-search-row` + `.fristen-akte-search` | **fixed in this commit** | | Fristenrechner — B2 forum search | `.fristen-search-row` + `.fristen-search-input` | OK — wrap is `position: relative`, input has `padding: 0.75rem 2.5rem 0.75rem 2.6rem` | | Fristenrechner — row-search panel | `.fristen-row-search-panel-input-wrap` + `.fristen-row-search-panel-input` | OK — pure flex layout with `gap`, icon non-positioned | | /projects index | `.projects-search-wrap` + `.projects-search-input` | OK — `position: relative`, input has `padding: 0.5rem 0.75rem 0.5rem 2.4rem` | | /glossar | `.glossar-search-wrap` + `.glossar-search` | OK — input has `padding: 0.65rem 4.5rem 0.65rem 2.5rem` | | /courts | `.glossar-search-wrap` + `.glossar-search` | OK (same shared class) | | /links | `.glossar-search-wrap` + `.glossar-search` | OK (same shared class) | | /team | `.glossar-search-wrap` + `.glossar-search` | OK (same shared class) | | /admin/team | `.glossar-search-wrap` + `.glossar-search` | OK (same shared class) | | /admin/event-types | `.glossar-search-wrap` + `.glossar-search` | OK (same shared class) | | Sidebar global search | `.sidebar-search` + `.sidebar-search-input` | OK — pure flex layout, icon non-positioned | | /events trigger-event picker (Fristenrechner mode-event) | `.event-search-input` | N/A — no leading icon | | Event-type modal/picker (in `client/event-types.ts`) | `.event-type-search` | N/A — no leading icon | | /submissions/new search + project picker | `.entity-form-input` | N/A — no leading icon | | /submissions index | (no icon) | N/A | The `.glossar-search` class is the de-facto shared search-input class for the knowledge-platform pages, and it's already correctly set up. Nothing to consolidate further — the Fristenrechner Akte picker just had a stray inherited rule. ## RTL note In scope of the audit per the issue: the existing rules use `padding-left` / `left:` (not `padding-inline-start` / `inset-inline-start:`). Out of scope to refactor here, but worth flagging for a future i18n/RTL pass — every search input in the table above would need both axes flipped. ## Verification - `cd frontend && bun run build` → clean (`Build complete → dist/`, `i18n codegen: 2890 keys (unchanged)`) - `go build ./...` → clean (no output) - `go test ./internal/...` → all green Branch: `mai/orpheus/gitster-search-input` Commit: https://mgit.msbls.de/m/paliad/commit/5348cb5 — mAi (orpheus)
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
deferred
Parked — not pursuing now, may un-park later
done
Work completed by an agent; awaiting m to close
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
mAi m
No Assignees mAi
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/paliad#112
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?