Merge pull request #234 from caktus/fix-traffic-stops-pie-chart-overflow

Fix pie chart overflowing by allowing chart legend to wrap in container
caktus · Oct 4, 2023 · 86d50d9 · 86d50d9
2 parents 854c730 + 9812b29
commit 86d50d9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 17 deletions.
diff --git a/frontend/src/Components/Charts/ChartSections/Legend/Legend.styled.js b/frontend/src/Components/Charts/ChartSections/Legend/Legend.styled.js
@@ -25,10 +25,10 @@ export const KeysList = styled.ul`
  list-style: none;
  padding: 0;
  margin: 0;
+ flex-wrap: wrap;
 
  @media (${smallerThanDesktop}) {
  flex-direction: row;
- flex-wrap: wrap;
  justify-content: space-between;
  }
 `;

diff --git a/frontend/src/Components/Charts/TrafficStops/TrafficStops.js b/frontend/src/Components/Charts/TrafficStops/TrafficStops.js
@@ -585,14 +585,12 @@ function TrafficStops(props) {
  yAxisLabel={(val) => `${val}%`}
  />
  </S.LineWrapper>
- <S.LegendBeside>
- <Legend
- heading="Show on graph:"
- keys={percentageEthnicGroups}
- onKeySelect={handlePercentageKeySelected}
- showNonHispanic
- />
- </S.LegendBeside>
+ <Legend
+ heading="Show on graph:"
+ keys={percentageEthnicGroups}
+ onKeySelect={handlePercentageKeySelected}
+ showNonHispanic
+ />
  </S.LineSection>
  <ChartModal
  tableHeader="Traffic Stops By Percentage"

diff --git a/frontend/src/Components/Charts/UseOfForce/UseOfForce.js b/frontend/src/Components/Charts/UseOfForce/UseOfForce.js
@@ -161,14 +161,12 @@ function UseOfForce(props) {
  }}
  />
  </S.LineWrapper>
- <S.LegendBelow>
- <Legend
- heading="Show on graph:"
- keys={ethnicGroupKeys}
- onKeySelect={handleGroupKeySelected}
- showNonHispanic
- />
- </S.LegendBelow>
+ <Legend
+ heading="Show on graph:"
+ keys={ethnicGroupKeys}
+ onKeySelect={handleGroupKeySelected}
+ showNonHispanic
+ />
  </S.LineSection>
  <S.PieSection>
  <S.PieWrapper>