From 5edd424462a777b73c1bd273f43f0c01918beb0f Mon Sep 17 00:00:00 2001
From: Michael Matloka <michal@matloka.com>
Date: Mon, 11 Dec 2023 23:04:07 +0100
Subject: [PATCH 1/3] Don't show keyboard shortcuts on mobile

---
 .../navigation-3000/components/KeyboardShortcut.tsx    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.tsx b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.tsx
index d6d5b42d7a91d..c29662766c884 100644
--- a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.tsx
+++ b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.tsx
@@ -1,7 +1,7 @@
 import './KeyboardShortcut.scss'
 
 import clsx from 'clsx'
-import { isMac } from 'lib/utils'
+import { isMac, isMobile } from 'lib/utils'
 
 import { HotKeyOrModifier } from '~/types'
 
@@ -28,7 +28,13 @@ export interface KeyboardShortcutProps extends Partial<Record<HotKeyOrModifier,
     muted?: boolean
 }
 
-export function KeyboardShortcut({ muted, ...keys }: KeyboardShortcutProps): JSX.Element {
+export function KeyboardShortcut({ muted, ...keys }: KeyboardShortcutProps): JSX.Element | null {
+    if (isMobile()) {
+        // If the user agent says we're on mobile, then it's unlikely - though not impossible - that there's
+        // a physical keyboard
+        return null
+    }
+
     const sortedKeys = Object.keys(keys).sort(
         (a, b) =>
             (-MODIFIER_PRIORITY.indexOf(a as HotKeyOrModifier) || 0) -

From 5254fec0a5f32eba6903913121c256f3807fd208 Mon Sep 17 00:00:00 2001
From: Michael Matloka <michal@matloka.com>
Date: Mon, 11 Dec 2023 23:21:20 +0100
Subject: [PATCH 2/3] Fix overflow handling in some places for mobile

---
 frontend/src/layout/navigation-3000/Navigation.scss | 13 ++++++++++---
 .../layout/navigation-3000/components/TopBar.scss   |  1 +
 .../properties/PropertyDefinitionsTable.tsx         |  2 +-
 frontend/src/scenes/experiments/Experiments.tsx     |  2 +-
 frontend/src/scenes/feature-flags/FeatureFlags.tsx  |  2 +-
 frontend/src/scenes/persons/RelatedFeatureFlags.tsx |  2 +-
 .../src/scenes/saved-insights/SavedInsights.tsx     |  2 +-
 frontend/src/scenes/surveys/Surveys.tsx             |  2 +-
 8 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/frontend/src/layout/navigation-3000/Navigation.scss b/frontend/src/layout/navigation-3000/Navigation.scss
index 68787fb5643a0..5c7e9dd1e29b5 100644
--- a/frontend/src/layout/navigation-3000/Navigation.scss
+++ b/frontend/src/layout/navigation-3000/Navigation.scss
@@ -73,7 +73,6 @@
         flex: 1;
         flex-direction: column;
         justify-content: space-between;
-        padding: 0 0.375rem;
         overflow-y: auto;
         background: var(--accent-3000);
 
@@ -81,6 +80,10 @@
             --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;
     }
 }
 
diff --git a/frontend/src/layout/navigation-3000/components/TopBar.scss b/frontend/src/layout/navigation-3000/components/TopBar.scss
index 240d91607f908..4268b95d7d28c 100644
--- a/frontend/src/layout/navigation-3000/components/TopBar.scss
+++ b/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 {
diff --git a/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.tsx b/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.tsx
index 74396c36e63f7..1c5c75897b9b2 100644
--- a/frontend/src/scenes/data-management/properties/PropertyDefinitionsTable.tsx
+++ b/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"
diff --git a/frontend/src/scenes/experiments/Experiments.tsx b/frontend/src/scenes/experiments/Experiments.tsx
index 1a912cb6b240d..453e72ea4f2ea 100644
--- a/frontend/src/scenes/experiments/Experiments.tsx
+++ b/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"
diff --git a/frontend/src/scenes/feature-flags/FeatureFlags.tsx b/frontend/src/scenes/feature-flags/FeatureFlags.tsx
index 5eff9ffc7b491..5d9733aec817e 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlags.tsx
+++ b/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"
diff --git a/frontend/src/scenes/persons/RelatedFeatureFlags.tsx b/frontend/src/scenes/persons/RelatedFeatureFlags.tsx
index 7a18f33ca931f..b0d73e786b74f 100644
--- a/frontend/src/scenes/persons/RelatedFeatureFlags.tsx
+++ b/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"
diff --git a/frontend/src/scenes/saved-insights/SavedInsights.tsx b/frontend/src/scenes/saved-insights/SavedInsights.tsx
index da45be1bfb44a..1f7a7ada109b8 100644
--- a/frontend/src/scenes/saved-insights/SavedInsights.tsx
+++ b/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${
diff --git a/frontend/src/scenes/surveys/Surveys.tsx b/frontend/src/scenes/surveys/Surveys.tsx
index d295dcfdc5114..52b79940c00b8 100644
--- a/frontend/src/scenes/surveys/Surveys.tsx
+++ b/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"

From bf41d275ec797455938591a877a7981e35d489c3 Mon Sep 17 00:00:00 2001
From: Michael Matloka <michal@matloka.com>
Date: Mon, 11 Dec 2023 23:28:29 +0100
Subject: [PATCH 3/3] Reduce scope of keyboard shortcut mobile check

---
 .../navigation-3000/components/KeyboardShortcut.tsx    | 10 ++--------
 .../layout/navigation-3000/components/NavbarButton.tsx |  5 ++++-
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.tsx b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.tsx
index c29662766c884..d6d5b42d7a91d 100644
--- a/frontend/src/layout/navigation-3000/components/KeyboardShortcut.tsx
+++ b/frontend/src/layout/navigation-3000/components/KeyboardShortcut.tsx
@@ -1,7 +1,7 @@
 import './KeyboardShortcut.scss'
 
 import clsx from 'clsx'
-import { isMac, isMobile } from 'lib/utils'
+import { isMac } from 'lib/utils'
 
 import { HotKeyOrModifier } from '~/types'
 
@@ -28,13 +28,7 @@ export interface KeyboardShortcutProps extends Partial<Record<HotKeyOrModifier,
     muted?: boolean
 }
 
-export function KeyboardShortcut({ muted, ...keys }: KeyboardShortcutProps): JSX.Element | null {
-    if (isMobile()) {
-        // If the user agent says we're on mobile, then it's unlikely - though not impossible - that there's
-        // a physical keyboard
-        return null
-    }
-
+export function KeyboardShortcut({ muted, ...keys }: KeyboardShortcutProps): JSX.Element {
     const sortedKeys = Object.keys(keys).sort(
         (a, b) =>
             (-MODIFIER_PRIORITY.indexOf(a as HotKeyOrModifier) || 0) -
diff --git a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
index 25f2b0c10d073..f1dd5b6adbb17 100644
--- a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
+++ b/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} />