Final Styling Touches to the Autocomplete Enabled Engine

Adding a microphone icon

Let’s add the little microphone icon.

Changelist #

• Microphone
  • Since the text shouldn’t extend to the icon, we added extra padding to the text field
    • Since we’ve introduced a dependency between two elements, we should make that clear in the code. So I took the width of the microphone as a variable, and the padding is calced to that width along with the default width (0.6rem).
  • We’re using absolute positioning so that it always sticks to the right side of the input bar, and since absolute positioning is relative to the first parent that has a non-static (default) position, we’re setting the search bar position relative.
    • This

...