fix: in react ui, render M layout 4-column

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/view/masonry/Masonry.css

@@ -78,8 +78,7 @@
     }
   }
   &[data-padding="m"] {
-    div {
-      font-size: 0.875rem !important;
-    }
+    max-height: 30em;
+    font-size: 0.875rem !important;
   }
 }

pdl-live-react/src/view/masonry/Masonry.tsx

@@ -12,10 +12,12 @@ type Props = import("react").PropsWithChildren<{
 
 const col1 = { 10000: 1 }
 const col3 = { 500: 1, 950: 2, 1400: 3 }
+const col4 = { 500: 2, 950: 3, 1400: 4 }
 const col6 = { 500: 4, 950: 5, 1400: 6 }
 
 export default function Masonry({ as, sml, model, children }: Props) {
-  const breakpoints = as === "grid" ? (sml === "s" ? col6 : col3) : col1
+  const breakpoints =
+    as === "grid" ? (sml === "s" ? col6 : sml === "m" ? col4 : col3) : col1
 
   // gutterBreakpoints={{350: "12px", 750: "16px", 900: "24px"}}
   return (