Fix mobile issue with quotationCarousel

components/QuotationCarousel.tsx

@@ -6,7 +6,7 @@ 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. */
@@ -24,12 +24,13 @@ 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 actualWidth = width < minWidth ? minWidth : width;
   const [activeIdx, setActiveIdx] = useState(0);
 
   function showNextCard() {
@@ -45,7 +46,10 @@ export function QuotationCarousel(props: QuotationCarouselProps) {
       className={
         className ? `${className} ${styles.carousel}` : styles.carousel
       }
-      style={{ width: `${width / 16}rem`, minHeight: `${height / 16}rem` }}
+      style={{
+        width: `${actualWidth / 16}rem`,
+        minHeight: `${height / 16}rem`,
+      }}
     >
       <Circle className={styles.circle} diameter={circleDiameter} />
       <Circle