Navbar tweaks (#10605)

* Navbar small screen friendly. And dirty-fix WriteSQL tooltip.

* Simplify

frontend/src/metabase/nav/containers/Navbar.jsx

@@ -72,7 +72,7 @@ const SearchWrapper = Flex.extend`
   background-color: ${props =>
     props.active ? ActiveSearchColor : DefaultSearchColor};
   border-radius: 6px;
-  flex: 1 0 auto;
+  flex: 1 1 auto;
   max-width: 50em;
   align-items: center;
   color: white;
@@ -84,6 +84,7 @@ const SearchWrapper = Flex.extend`
 
 const SearchInput = styled.input`
   ${space} background-color: transparent;
+  width: 100%;
   border: none;
   color: white;
   font-size: 1em;
@@ -359,16 +360,15 @@ export default class Navbar extends Component {
             ]}
           />
           {hasNativeWrite && (
-            <Link
-              to={this.props.plainNativeQuery.question().getUrl()}
-              mx={1}
-              className="hide sm-show flex-no-shrink"
-              data-metabase-event={`NavBar;SQL`}
-            >
-              <IconWrapper>
-                <Icon size={19} name="sql" tooltip={t`Write SQL`} />
-              </IconWrapper>
-            </Link>
+            <IconWrapper className="relative hide sm-show mr1 overflow-hidden">
+              <Link
+                to={this.props.plainNativeQuery.question().getUrl()}
+                className="flex align-center"
+                data-metabase-event={`NavBar;SQL`}
+              >
+                <Icon size={18} p={"11px"} name="sql" tooltip={t`Write SQL`} />
+              </Link>
+            </IconWrapper>
           )}
           <ProfileLink {...this.props} />
         </Flex>