Fix visual bug in metric config - boxes should not take up the entire…

… height (#126) Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>
Recidiviz · Oct 31, 2022 · e6cb934 · e6cb934
1 parent 9d663bb
commit e6cb934
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/publisher/src/components/MetricConfiguration/MetricConfiguration.styles.tsx b/publisher/src/components/MetricConfiguration/MetricConfiguration.styles.tsx
@@ -76,9 +76,8 @@ export const PanelContainerRight = styled.div`
 
 export const MetricBoxBottomPaddingContainer = styled.div`
   height: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  padding-bottom: 100px;
+  width: 100%;
+  padding-bottom: 150px;
   overflow-y: scroll;
 `;
 
@@ -111,6 +110,11 @@ export const MetricBoxContainer = styled.div<MetricBoxContainerProps>`
   }
 `;
 
+export const MetricBoxContainerWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+
 export const MetricViewBoxContainer = styled(MetricBoxContainer)<{
   selected?: boolean;
 }>`

diff --git a/publisher/src/components/MetricConfiguration/MetricConfiguration.tsx b/publisher/src/components/MetricConfiguration/MetricConfiguration.tsx
@@ -41,6 +41,7 @@ import {
   Metric,
   MetricBox,
   MetricBoxBottomPaddingContainer,
+  MetricBoxContainerWrapper,
   MetricConfigurationDisplay,
   MetricConfigurationWrapper,
   MetricDefinitions,
@@ -525,17 +526,19 @@ export const MetricConfiguration: React.FC<{
           {/* List Of Metrics */}
           {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}
-                />
-              ))}
+              <MetricBoxContainerWrapper>
+                {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}
+                  />
+                ))}
+              </MetricBoxContainerWrapper>
             </MetricBoxBottomPaddingContainer>
           )}