Skip to content

bug: Search input label overlaps with the input field in the search modal #2151

@Riya922003

Description

@Riya922003

Provide environment information

System:
OS: Windows 11 10.0.26100
CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
Memory: 982.15 MB / 7.79 GB

Binaries:
Node: 23.11.0 - C:\Users\rajee\node_modules.bin\node.CMD
npm: 11.6.1 - C:\Program Files\nodejs\npm.CMD

Describe the bug

Description
There is a UI layout bug in the search modal where the "Search" text label overlaps with the "Search docs" placeholder text inside the input field. This creates a visually cluttered and unprofessional appearance.

Reproduction repo

This bug is visible on the project's live documentation website. You can reproduce it by simply opening the search modal on the main page.

To reproduce

Steps to reproduce the behavior:

  • Navigate to the main page of the application.
  • Click on the "Search" icon or button to open the search modal.
  • Observe the search input field at the top of the modal.
  • See that the "Search" label to the left of the input box is overlapping with the text inside the input box.

Additional information

Expected behavior
The "Search" label and the input field should be properly aligned with adequate spacing between them. The label should be positioned to the left of the input field, and there should be no visual overlap between the label's text and the input field's placeholder text.
Screenshots

Image

This is a low-priority but highly visible UI bug. The issue is likely caused by a lack of sufficient padding or margin on the left side of the search input field, or incorrect alignment properties on the parent container that holds both the label and the input. It's a CSS issue that should have a straightforward fix.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions