From f1a9b9541b3bcf38bde43dba8dd114786a727643 Mon Sep 17 00:00:00 2001
From: Mahmoud O <59492998+mxosman@users.noreply.github.com>
Date: Tue, 25 Oct 2022 18:29:55 -0500
Subject: [PATCH] Implement responsiveness per design (#117)

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>
---
 .../MetricConfiguration.styles.tsx            | 47 +++++++++++++++++--
 .../MetricConfiguration.tsx                   | 29 +++++++-----
 2 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/publisher/src/components/MetricConfiguration/MetricConfiguration.styles.tsx b/publisher/src/components/MetricConfiguration/MetricConfiguration.styles.tsx
index aa105fdf6..0bfeaf9b9 100644
--- a/publisher/src/components/MetricConfiguration/MetricConfiguration.styles.tsx
+++ b/publisher/src/components/MetricConfiguration/MetricConfiguration.styles.tsx
@@ -20,12 +20,18 @@ import styled from "styled-components/macro";
 import { BinaryRadioGroupWrapper, Button } from "../Forms";
 import { palette, typography } from "../GlobalStyles";
 
+const METRICS_VIEW_CONTAINER_BREAKPOINT = 1200;
+
 export const MetricsViewContainer = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   overflow: hidden;
+
+  @media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
+    overflow: unset;
+  }
 `;
 
 export const MetricsViewControlPanel = styled.div`
@@ -35,6 +41,12 @@ export const MetricsViewControlPanel = styled.div`
   flex-wrap: wrap;
   justify-content: space-between;
   overflow-y: scroll;
+
+  @media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: unset;
+  }
 `;
 
 export const MetricsViewControlPanelOverflowHidden = styled(
@@ -63,6 +75,13 @@ export const PanelContainerRight = styled.div`
   overflow-y: scroll;
 `;
 
+export const MetricBoxBottomPaddingContainer = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 100px;
+  overflow-y: scroll;
+`;
+
 type MetricBoxContainerProps = {
   enabled?: boolean;
 };
@@ -84,6 +103,12 @@ export const MetricBoxContainer = styled.div<MetricBoxContainerProps>`
     cursor: pointer;
     border: 1px solid ${palette.solid.blue};
   }
+
+  @media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
+    width: 100%;
+    max-width: unset;
+    flex: unset;
+  }
 `;
 
 export const MetricViewBoxContainer = styled(MetricBoxContainer)<{
@@ -169,7 +194,12 @@ export const MetricDescription = styled.div`
 export const MetricDetailsDisplay = styled.div`
   width: 100%;
   overflow-y: scroll;
-  padding: 24px 12px 24px 0;
+  padding: 24px 12px 50px 0;
+
+  @media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
+    overflow-y: unset;
+    padding: 24px 12px 10px 0;
+  }
 `;
 
 export const MetricOnOffWrapper = styled.div`
@@ -482,16 +512,25 @@ export const MetricConfigurationWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   overflow-y: hidden;
+
+  @media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
+    flex-direction: column;
+  }
 `;
 
 export const DefinitionsDisplayContainer = styled.div`
   display: flex;
   flex-direction: column;
   flex: 1 1 55%;
-  padding-top: 48px;
-  padding-right: 12px;
-  padding-left: 126px;
+  padding: 48px 12px 50px 126px;
   overflow-y: scroll;
+
+  @media only screen and (max-width: ${METRICS_VIEW_CONTAINER_BREAKPOINT}px) {
+    border-top: 1px solid ${palette.highlight.grey3};
+    padding: 30px 0 50px 0;
+    overflow-y: unset;
+    margin-right: 12px;
+  }
 `;
 
 export const DefinitionsDisplay = styled.div`
diff --git a/publisher/src/components/MetricConfiguration/MetricConfiguration.tsx b/publisher/src/components/MetricConfiguration/MetricConfiguration.tsx
index b32e30db1..c0bb68fad 100644
--- a/publisher/src/components/MetricConfiguration/MetricConfiguration.tsx
+++ b/publisher/src/components/MetricConfiguration/MetricConfiguration.tsx
@@ -40,6 +40,7 @@ import {
   Configuration,
   Metric,
   MetricBox,
+  MetricBoxBottomPaddingContainer,
   MetricConfigurationDisplay,
   MetricConfigurationWrapper,
   MetricDefinitions,
@@ -522,19 +523,21 @@ export const MetricConfiguration: React.FC<{
 
         <MetricsViewControlPanel>
           {/* List Of Metrics */}
-          {filteredMetricSettings &&
-            !activeMetricKey &&
-            Object.values(filteredMetricSettings).map((metric) => (
-              <MetricBox
-                key={metric.key}
-                metricKey={metric.key}
-                displayName={metric.display_name}
-                frequency={metric.frequency as ReportFrequency}
-                description={metric.description}
-                enabled={metric.enabled}
-                setActiveMetricKey={setActiveMetricKey}
-              />
-            ))}
+          {filteredMetricSettings && !activeMetricKey && (
+            <MetricBoxBottomPaddingContainer>
+              {Object.values(filteredMetricSettings).map((metric) => (
+                <MetricBox
+                  key={metric.key}
+                  metricKey={metric.key}
+                  displayName={metric.display_name}
+                  frequency={metric.frequency as ReportFrequency}
+                  description={metric.description}
+                  enabled={metric.enabled}
+                  setActiveMetricKey={setActiveMetricKey}
+                />
+              ))}
+            </MetricBoxBottomPaddingContainer>
+          )}
 
           {/* Metric Configuration */}
           {activeMetricKey && (