Horizontal UI mobile tweaks (#4245)

Co-authored-by: Paolo D'Amico <paolodamico@users.noreply.github.com>

frontend/src/lib/components/CompareFilter/CompareFilter.tsx

@@ -15,7 +15,7 @@ export function CompareFilter(): JSX.Element {
             style={{ marginLeft: 8, marginRight: 6 }}
             disabled={disabled}
         >
-            Compare previous
+            Compare<span className="hide-lte-md"> previous</span>
         </Checkbox>
     )
 }

frontend/src/scenes/insights/InsightTabs/InsightDisplayConfig.tsx

@@ -140,8 +140,10 @@ function HorizontalDefaultInsightDisplayConfig({
     const dateFilterDisabled = activeView === ViewType.FUNNELS && isFunnelEmpty(allFilters)
 
     return (
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-            <TZIndicator style={{ float: 'left' }} />
+        <div className="display-config-inner">
+            <span className="hide-lte-md">
+                <TZIndicator style={{ float: 'left' }} />
+            </span>
             <div style={{ width: '100%', textAlign: 'right' }}>
                 {showComparePrevious[activeView] && <CompareFilter />}
                 {showChartFilter(activeView, featureFlags) && (

frontend/src/scenes/insights/InsightTabs/TrendTab/TrendTabHorizontal.tsx

@@ -16,6 +16,7 @@ import { preflightLogic } from 'scenes/PreflightCheck/logic'
 import './TrendTab.scss'
 import { SaveToDashboard } from 'lib/components/SaveToDashboard/SaveToDashboard'
 import { TrendTabProps } from './TrendTab'
+import useBreakpoint from 'antd/lib/grid/hooks/useBreakpoint'
 
 export function TrendTabHorizontal({ view, annotationsToCreate }: TrendTabProps): JSX.Element {
     const { filters, filtersLoading } = useValues(trendsLogic({ dashboardItemId: null, view }))
@@ -30,11 +31,13 @@ export function TrendTabHorizontal({ view, annotationsToCreate }: TrendTabProps)
         { name: 'returning', tooltip: 'Users who consistently use the product.' },
         { name: 'dormant', tooltip: 'Users who are inactive.' },
     ]
+    const screens = useBreakpoint()
+    const isSmallScreen = screens.xs || (screens.sm && !screens.md)
 
     return (
         <>
             <Row gutter={16}>
-                <Col md={16}>
+                <Col md={16} xs={24}>
                     <h3 className="l3" style={{ display: 'flex', alignItems: 'center' }}>
                         Unsaved query{' '}
                         <SaveToDashboard
@@ -62,7 +65,7 @@ export function TrendTabHorizontal({ view, annotationsToCreate }: TrendTabProps)
                         />
                     )}
                 </Col>
-                <Col md={8}>
+                <Col md={8} xs={24} style={{ marginTop: isSmallScreen ? '2rem' : 0 }}>
                     {filters.insight === ViewType.LIFECYCLE && (
                         <>
                             <h4 className="secondary">Lifecycle Toggles</h4>

frontend/src/scenes/insights/Insights.scss

@@ -59,10 +59,23 @@
                 border: 1px solid $border_light;
                 padding-right: $default_spacing / 4;
 
+                @media screen and (max-width: $md) {
+                    padding-left: $default_spacing / 4;
+                }
+
                 .ant-card-head-title {
                     padding: $default_spacing / 2 0;
                 }
             }
+
+            .display-config-inner {
+                display: flex;
+                align-items: center;
+
+                @media screen and (max-width: $md) {
+                    overflow-x: auto;
+                }
+            }
         }
     }
 }