Search bar layout issue

Open
#9 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
1/5
Estimated time
1-3 hours
Newbie friendliness
55/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
design, frontend

Research direction

Start by locating the header search bar described in the issue and inspect its input text and surrounding spacing. Done means the placeholder reads “Search Document” and the added padding fixes the reported layout without disrupting the header; verify the result against the provided before-and-after images.

Written by the indexing model from the issue text.

Description

Currently, the search bar (i.e. Search documentation ...), which is displayed on the header, has some layout issue which I think would struct to the developer cause they would use this library.

Issue Image

Image

I explored the codebase and the solution is simple, first change the input from Search Documentation... to Search Document, cause the dots cause the issue and this looks much cleaner and then add a bit padding, and done.

After the changes

Image

@mikecao I have implemented the changes, if you approve, I will create it's PR. Would love to contribute more to this repo.

Dominant language
TypeScript
Stars
58
Forks
9
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from umami-software/zen

All issues in umami-software/zen

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.