Improve shape generation on small desktop screens

components/ShapesBackground.tsx

@@ -187,7 +187,7 @@ export const defaultGetShapesConfig = ((pageWidth, pageHeight) => {
 
   const defaultConfig: ShapesConfig = {};
   const gap = 20;
-  const boxWidth = Math.max(300, (pageWidth - 800 - 2 * gap) / 2);
+  const boxWidth = Math.max(150, (pageWidth - 800 - 2 * gap) / 2);
   const boxHeight = 400;
 
   for (let y = 0; y + boxHeight <= pageHeight; y += gap + boxHeight) {
@@ -196,7 +196,10 @@ export const defaultGetShapesConfig = ((pageWidth, pageHeight) => {
         continue;
       }
 
-      const size = y == 0 || y + 2 * boxHeight > pageHeight ? "big" : "small";
+      const size =
+        boxWidth > 150 && (y == 0 || y + 2 * boxHeight > pageHeight)
+          ? "big"
+          : "small";
       const shape: ShapeType = getRandomShape(size);
       const verticalOffset = getVerticalOffset(boxHeight, shape);
       const horizontalOffset = getHorizontalOffset(boxWidth - 2 * gap, shape);