fix unresponsive chart containers (#317)

Recidiviz · Jan 26, 2021 · da30f83 · da30f83
1 parent 082676d
commit da30f83
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/spotlight-client/src/SystemNarrativePage/Section.tsx b/spotlight-client/src/SystemNarrativePage/Section.tsx
@@ -33,19 +33,19 @@ const COPY_WIDTH = 408;
 const Container = styled.section`
   border-bottom: 1px solid ${colors.rule};
   display: flex;
-  min-height: 100vh;
+  min-height: calc(100vh - ${rem(NAV_BAR_HEIGHT)});
   padding-right: ${rem(X_PADDING)};
 `;
 
 const SectionCopy = styled.div`
   display: flex;
-  flex: 0 0 auto;
+  flex: 0 1 30%;
   flex-direction: column;
   height: calc(100vh - ${rem(NAV_BAR_HEIGHT)});
   justify-content: center;
+  max-width: ${rem(COPY_WIDTH)};
   position: sticky;
   top: ${rem(NAV_BAR_HEIGHT)};
-  width: ${rem(COPY_WIDTH)};
 `;
 
 const SectionTitle = styled.h2`
@@ -61,9 +61,15 @@ const SectionBody = styled.div`
 `;
 
 const VizContainer = styled.div`
-  margin-left: ${rem(176)};
+  display: flex;
   flex: 1 1 auto;
-  padding: ${rem(240)} 0;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 8%;
+  min-height: calc(100vh - ${rem(NAV_BAR_HEIGHT)});
+  /* min-width cannot be auto or children will not shrink when viewport does */
+  min-width: ${rem(320)};
+  padding: ${rem(32)} 0;
 `;
 
 const SectionViz: React.FC<{ metric: Metric<MetricRecord> }> = ({ metric }) => {

diff --git a/spotlight-client/src/SystemNarrativePage/SystemNarrativePage.tsx b/spotlight-client/src/SystemNarrativePage/SystemNarrativePage.tsx
@@ -86,6 +86,8 @@ const ScrollIndicator = styled.div`
 
 const SectionsContainer = styled.div`
   flex: 1 1 auto;
+  /* min-width cannot be auto or children will not shrink when viewport does */
+  min-width: 0;
 `;
 
 const SystemNarrativePage: React.FC<{

diff --git a/spotlight-client/src/VizHistoricalPopulationBreakdown/VizHistoricalPopulationBreakdown.tsx b/spotlight-client/src/VizHistoricalPopulationBreakdown/VizHistoricalPopulationBreakdown.tsx
@@ -29,6 +29,7 @@ const FilterRow = styled.div`
   background: ${colors.background};
   display: flex;
   justify-content: flex-end;
+  margin-bottom: ${rem(16)};
   padding-bottom: ${rem(16)};
   z-index: ${zIndex.control};
 `;