fix(3000): Look reasonable on mobile

frontend/src/layout/navigation-3000/Navigation.scss

@@ -73,14 +73,17 @@
         flex: 1;
         flex-direction: column;
         justify-content: space-between;
-        padding: 0 0.375rem;
         overflow-y: auto;
         background: var(--accent-3000);
 
         .LemonButton__chrome {
             --lemon-button-padding-horizontal: 0.25rem !important;
         }
 
+        > * {
+            padding: 0 0.375rem;
+        }
+
         ul {
             padding: 0.5rem 0;
         }
@@ -91,6 +94,10 @@
     }
 }
 
+.Navbar3000__top {
+    overflow: auto;
+}
+
 .Navbar3000__overlay {
     position: fixed;
     z-index: var(--z-mobile-nav-overlay);
@@ -99,12 +106,12 @@
     background-color: var(--modal-backdrop-color);
     backdrop-filter: blur(var(--modal-backdrop-blur));
     opacity: 1;
-    transition: background-color 100ms ease-out, backdrop-filter 100ms ease-out;
+    transition: opacity 100ms ease-out, backdrop-filter 100ms ease-out;
 
     &.Navbar3000--hidden {
         pointer-events: none;
-        background-color: transparent;
         backdrop-filter: blur(0);
+        opacity: 0;
     }
 }
 

frontend/src/layout/navigation-3000/components/NavbarButton.tsx

@@ -4,6 +4,7 @@ import { useActions, useValues } from 'kea'
 import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
 import { Tooltip } from 'lib/lemon-ui/Tooltip'
+import { isMobile } from 'lib/utils'
 import React, { FunctionComponent, ReactElement, useState } from 'react'
 import { sceneLogic } from 'scenes/sceneLogic'
 
@@ -68,7 +69,9 @@ export const NavbarButton: FunctionComponent<NavbarButtonProps> = React.forwardR
                     'data-attr': `menu-item-${sideAction.identifier.toLowerCase()}`,
                 }
                 buttonProps.sideIcon = null
-            } else if (keyboardShortcut) {
+            } else if (keyboardShortcut && !isMobile()) {
+                // If the user agent says we're on mobile, then it's unlikely - but not impossible -
+                // that there's a physical keyboard. Hence in that case we don't show the keyboard shortcut
                 buttonProps.sideIcon = (
                     <span className="text-xs">
                         <KeyboardShortcut {...keyboardShortcut} />

frontend/src/layout/navigation-3000/components/TopBar.scss

@@ -38,6 +38,7 @@
     flex-grow: 1;
     flex-shrink: 1;
     min-width: 0;
+    overflow: hidden;
 }
 
 .TopBar3000__trail {

frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.tsx

@@ -78,7 +78,7 @@ export function PropertyDefinitionsTable(): JSX.Element {
                     Click here!
                 </Link>
             </LemonBanner>
-            <div className="flex justify-between mb-4">
+            <div className="flex justify-between mb-4 gap-2 flex-wrap">
                 <LemonInput
                     type="search"
                     placeholder="Search for properties"

frontend/src/scenes/experiments/Experiments.tsx

@@ -204,7 +204,7 @@ export function Experiments(): JSX.Element {
                         ))}
                     {!shouldShowEmptyState && (
                         <>
-                            <div className="flex justify-between mb-4">
+                            <div className="flex justify-between mb-4 gap-2 flex-wrap">
                                 <LemonInput
                                     type="search"
                                     placeholder="Search experiments"

frontend/src/scenes/feature-flags/FeatureFlags.tsx

@@ -258,7 +258,7 @@ export function OverViewTab({
             {!shouldShowEmptyState && (
                 <>
                     <div>
-                        <div className="flex justify-between mb-4">
+                        <div className="flex justify-between mb-4 gap-2 flex-wrap">
                             <LemonInput
                                 className="w-60"
                                 type="search"

frontend/src/scenes/persons/RelatedFeatureFlags.tsx

@@ -131,7 +131,7 @@ export function RelatedFeatureFlags({ distinctId, groups }: Props): JSX.Element
 
     return (
         <>
-            <div className="flex justify-between mb-4">
+            <div className="flex justify-between mb-4 gap-2 flex-wrap">
                 <LemonInput
                     type="search"
                     placeholder="Search for feature flags"

frontend/src/scenes/saved-insights/SavedInsights.tsx

@@ -555,7 +555,7 @@ export function SavedInsights(): JSX.Element {
                 <>
                     <SavedInsightsFilters />
                     <LemonDivider className="my-4" />
-                    <div className="flex justify-between mb-4 mt-2 items-center">
+                    <div className="flex justify-between mb-4 gap-2 flex-wrap mt-2 items-center">
                         <span className="text-muted-alt">
                             {count
                                 ? `${startCount}${endCount - startCount > 1 ? '-' + endCount : ''} of ${count} insight${

frontend/src/scenes/surveys/Surveys.tsx

@@ -154,7 +154,7 @@ export function Surveys(): JSX.Element {
                 {!shouldShowEmptyState && (
                     <>
                         <div>
-                            <div className="flex justify-between mb-4">
+                            <div className="flex justify-between mb-4 gap-2 flex-wrap">
                                 <LemonInput
                                     type="search"
                                     placeholder="Search for surveys"