make uptime filters responsive (#46560) (#46698)

elastic · Sep 27, 2019 · 48ebe3d · 48ebe3d
1 parent 604a989
commit 48ebe3d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/typeahead/suggestion.js b/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/typeahead/suggestion.js
@@ -62,6 +62,10 @@ const ListItem = styled.li`
       background: ${props =>
     props.selected ? theme.euiColorEmptyShade : theme.euiColorLightestShade};
     }
+    @media only screen and (max-width: ${theme.euiBreakpoints.s}) {
+      margin-left: auto;
+      text-align: end;
+    }
   }
 `;
 
@@ -76,9 +80,16 @@ const Icon = styled.div`
 `;
 
 const TextValue = styled.div`
-  flex: 0 0 ${px(unit * 16)};
+  flex: 0 0 ${px(unit * 12)};
   color: ${theme.euiColorDarkestShade};
   padding: 0 ${px(units.half)};
+
+  @media only screen and (max-width: ${theme.euiBreakpoints.s}) {
+    flex: 0 0 ${px(unit * 8)};
+  }
+  @media only screen and (min-width: 1300px) {
+    flex: 0 0 ${px(unit * 16)};
+  }
 `;
 
 function getEuiIconType(type) {

diff --git a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx
@@ -8,6 +8,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { fromKueryExpression, toElasticsearchQuery } from '@kbn/es-query';
 import React, { Fragment, useContext, useEffect, useState } from 'react';
+import styled from 'styled-components';
 import { getOverviewPageBreadcrumbs } from '../breadcrumbs';
 import {
   EmptyState,
@@ -44,6 +45,15 @@ export type UptimeSearchBarQueryChangeHandler = (queryChangedEvent: {
   queryText?: string;
 }) => void;
 
+const EuiFlexItemStyled = styled(EuiFlexItem)`
+  && {
+    min-width: 598px;
+    @media only screen and (max-width: 630px) {
+      min-width: initial;
+    }
+  }
+`;
+
 export const OverviewPage = ({ basePath, logOverviewPageLoad, setBreadcrumbs }: Props) => {
   const { colors, setHeadingText } = useContext(UptimeSettingsContext);
   const [getUrlParams, updateUrl] = useUrlParams();
@@ -118,11 +128,11 @@ export const OverviewPage = ({ basePath, logOverviewPageLoad, setBreadcrumbs }:
   return (
     <Fragment>
       <EmptyState basePath={basePath} implementsCustomErrorState={true} variables={{}}>
-        <EuiFlexGroup gutterSize="xs">
-          <EuiFlexItem>
+        <EuiFlexGroup gutterSize="xs" wrap responsive>
+          <EuiFlexItem grow={1} style={{ flexBasis: 500 }}>
             <KueryBar />
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
+          <EuiFlexItemStyled grow={true}>
             <FilterGroup
               currentFilter={urlFilters}
               onFilterUpdate={(filtersKuery: string) => {
@@ -132,7 +142,7 @@ export const OverviewPage = ({ basePath, logOverviewPageLoad, setBreadcrumbs }:
               }}
               variables={sharedProps}
             />
-          </EuiFlexItem>
+          </EuiFlexItemStyled>
           {error && <OverviewPageParsingErrorCallout error={error} />}
         </EuiFlexGroup>
         <EuiSpacer size="s" />

diff --git a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx
@@ -150,7 +150,7 @@ const Application = (props: UptimeAppProps) => {
                             justifyContent="spaceBetween"
                             gutterSize="s"
                           >
-                            <EuiFlexItem grow={false}>
+                            <EuiFlexItem>
                               <EuiTitle>
                                 <h1>{headingText}</h1>
                               </EuiTitle>