[Uptime] Improve responsiveness details page (elastic#67034)

shahzad31 · May 26, 2020 · fead9c3 · fead9c3
1 parent 711d920
commit fead9c3
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 18 deletions.
diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx
@@ -33,7 +33,7 @@ export const MonitorDurationComponent = ({
 }: DurationChartProps) => {
   return (
     <EuiPanel paddingSize="m">
-      <EuiFlexGroup>
+      <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
         <EuiFlexItem>
           <EuiTitle size="xs">
             <h4>

diff --git a/...ublic/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/...ublic/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list_header.tsx
@@ -16,9 +16,25 @@ const TitleStyle = styled(EuiTitle)`
   margin-left: auto;
 `;
 
+const FlexGroupContainer = styled(EuiFlexGroup)`
+  && {
+    @media only screen and (max-width: 768px) {
+      > :first-child {
+        flex-basis: 40% !important;
+      }
+      > :nth-child(2) {
+        order: 3;
+      }
+      > :nth-child(3) {
+        flex-basis: 60% !important;
+      }
+    }
+  }
+`;
+
 export const MonitorListHeader: React.FC = () => {
   return (
-    <EuiFlexGroup alignItems="center">
+    <FlexGroupContainer alignItems="center">
       <EuiFlexItem grow={false}>
         <EuiTitle size="xs">
           <h5>
@@ -44,6 +60,6 @@ export const MonitorListHeader: React.FC = () => {
           </h5>
         </TitleStyle>
       </EuiFlexItem>
-    </EuiFlexGroup>
+    </FlexGroupContainer>
   );
 };