Prevent search misses via input's placeholder/tooltip

1. Reduce search input font size and use a more concrete value for the placeholder. 2. Add a tooltip
tldr-pages · Sep 1, 2021 · e2ef532 · e2ef532
1 parent b955214
commit e2ef532
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/components/Nav.js b/src/components/Nav.js
@@ -38,7 +38,8 @@ export default ({ navigate, version }: NavigateProps) => (
           tabIndex="100"
           type="text"
           onChange={({ target: { value } }) => navigate(value)}
-          placeholder="Command name"
+          placeholder="i.e. man, linux/du, osx/say..."
+          title="Command optionally prefixed by the platform and a slash (supported platforms: android, common, linux, osx, sunos and windows)."
         />
       </section>
       <section className="github-stars">

diff --git a/styles/navigation.sass b/styles/navigation.sass
@@ -56,13 +56,13 @@ nav
     +adaptive("margin-left", 5px, 30px, 30px)
 
     height: 38px
-    +adaptive("width", 165px, 220px, 220px)
+    +adaptive("width", 165px, 250px, 250px)
     +adaptive("max-width", 165px, 60%, 60%)
 
     border: 1px solid $outline
     border-radius: 0px
 
-    font-size: 16pt
+    font-size: 11pt
     +adaptive("padding", 0px 6px, 0px 12px, 0px 12px)
 
     &:focus