Fix responsive problem with quotationCarousels

components/QuotationCarousel.tsx

@@ -6,12 +6,14 @@ import styles from "./QuotationCarousel.module.css";
 interface QuotationCarouselProps {
   data: string[];
   /** Width of the entire carousel including the buttons, in px. */
-  width?: number;
+  width: number;
   /** Minimum height of the carousel, in px. */
   height?: number;
   /** Diameter of the background circles, in px. Set to 0 for no circles. */
   circleDiameter?: number;
   className?: string;
+  /** Minimum width of the graph. */
+  minWidth?: number;
 }
 
 interface CarouselButtonProps {
@@ -22,12 +24,12 @@ interface CarouselButtonProps {
 export function QuotationCarousel(props: QuotationCarouselProps) {
   const {
     data,
-    width = 600,
     height = 100,
     circleDiameter = 120,
+    minWidth = 600,
     className,
   } = props;
-
+  const width = props.width < minWidth ? minWidth : props.width;
   const [activeIdx, setActiveIdx] = useState(0);
 
   function showNextCard() {

pages/intimacy-and-drugs.tsx

@@ -91,7 +91,11 @@ export default function Demographics() {
         heading="How many committed relationships have you been in during university?"
         bodyText="Our respondents most commonly have been in either 0 or 1 committed relationship during their undergrad. On the other end, 5 is the most number of committed relationships indicated."
       >
-        <BarGraphVertical data={I3} {...barGraphProps(isMobile, pageWidth)} />
+        <BarGraphVertical
+          data={I3}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
       </ComponentWrapper>
 
       <ComponentWrapper
@@ -100,7 +104,11 @@ export default function Demographics() {
         align="left"
         noBackground
       >
-        <BarGraphVertical data={I4} {...barGraphProps(isMobile, pageWidth)} />
+        <BarGraphVertical
+          data={I4}
+          {...barGraphProps(isMobile, pageWidth)}
+          lowerLabelDy="0"
+        />
       </ComponentWrapper>
 
       <ComponentWrapper
@@ -160,7 +168,7 @@ export default function Demographics() {
           data={I8i}
           width={barGraphWidth(isMobile, pageWidth)}
           height={DefaultProp.graphHeight}
-          margin={{ ...barGraphMargin, ...{ left: 220 } }}
+          margin={{ ...barGraphMargin, ...{ left: 100 } }}
         />
       </ComponentWrapper>
 
@@ -170,7 +178,7 @@ export default function Demographics() {
             data={I9}
             circleDiameter={0}
             width={barGraphWidth(isMobile, pageWidth)}
-            height={400}
+            height={isMobile ? 600 : 500}
           />
         </div>
       </ComponentWrapper>
@@ -184,7 +192,7 @@ export default function Demographics() {
             data={I10}
             circleDiameter={0}
             width={barGraphWidth(isMobile, pageWidth)}
-            height={400}
+            height={600}
           />
         </div>
       </ComponentWrapper>