fix: filters in smaller viewport (#23362)

PostHog · Jul 1, 2024 · 3ff87c1 · 3ff87c1
1 parent 1bb8ccf
commit 3ff87c1
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/frontend/src/scenes/error-tracking/ErrorTrackingFilters.tsx b/frontend/src/scenes/error-tracking/ErrorTrackingFilters.tsx
@@ -31,8 +31,8 @@ export const ErrorTrackingFilters = ({ showOrder = true }: { showOrder?: boolean
                     <RecordingsUniversalFilterGroup />
                     <UniversalFilters.AddFilterButton type="secondary" size="small" />
                 </div>
-                <div className="flex space-x-1 justify-between px-2 py-1.5">
-                    <div className="flex space-x-1">
+                <div className="flex justify-between px-2 py-1.5 flex-wrap gap-1">
+                    <div className="flex flex-wrap gap-2">
                         <DateFilter
                             dateFrom={dateRange.date_from}
                             dateTo={dateRange.date_to}
@@ -74,11 +74,11 @@ export const ErrorTrackingFilters = ({ showOrder = true }: { showOrder?: boolean
                     </div>
                     <div>
                         <TestAccountFilter
+                            size="small"
                             filters={{ filter_test_accounts: filterTestAccounts }}
                             onChange={({ filter_test_accounts }) => {
                                 setFilterTestAccounts(filter_test_accounts || false)
                             }}
-                            size="small"
                         />
                     </div>
                 </div>

diff --git a/frontend/src/scenes/insights/filters/TestAccountFilter/TestAccountFilter.tsx b/frontend/src/scenes/insights/filters/TestAccountFilter/TestAccountFilter.tsx
@@ -33,7 +33,7 @@ export function TestAccountFilter({
             id="test-account-filter"
             bordered
             label={
-                <div className="flex items-center">
+                <div className="flex items-center whitespace-nowrap">
                     <span>Filter out internal and test users</span>
                     <LemonButton
                         icon={<IconGear />}

diff --git a/frontend/src/scenes/session-recordings/filters/RecordingsUniversalFilters.tsx b/frontend/src/scenes/session-recordings/filters/RecordingsUniversalFilters.tsx
@@ -23,8 +23,8 @@ export const RecordingsUniversalFilters = (): JSX.Element => {
 
     return (
         <div className="divide-y bg-bg-light rounded border">
-            <div className="flex justify-between px-2 py-1.5">
-                <div className="flex space-x-2">
+            <div className="flex justify-between px-2 py-1.5 flex-wrap gap-1">
+                <div className="flex flex-wrap gap-2">
                     <DateFilter
                         dateFrom={universalFilters.date_from ?? '-3d'}
                         dateTo={universalFilters.date_to}
@@ -57,17 +57,20 @@ export const RecordingsUniversalFilters = (): JSX.Element => {
                         durationTypeFilter={durationFilter.key}
                         pageKey="session-recordings"
                     />
-                    <TestAccountFilter
-                        filters={universalFilters}
-                        onChange={(testFilters) =>
-                            setUniversalFilters({
-                                ...universalFilters,
-                                filter_test_accounts: testFilters.filter_test_accounts,
-                            })
-                        }
-                    />
+                    <div>
+                        <TestAccountFilter
+                            size="small"
+                            filters={universalFilters}
+                            onChange={(testFilters) =>
+                                setUniversalFilters({
+                                    ...universalFilters,
+                                    filter_test_accounts: testFilters.filter_test_accounts,
+                                })
+                            }
+                        />
+                    </div>
                 </div>
-                <div>
+                <div className="flex items-center">
                     <AndOrFilterSelect
                         value={universalFilters.filter_group.type}
                         onChange={(type) => {