Adaptivity for slides

.eslintrc.json

@@ -79,9 +79,7 @@
       }
     ],
     "@typescript-eslint/no-var-requires": "error",
-    "react/jsx-props-no-spreading": ["error", {
-      "html": "ignore"
-    }],
+    "react/jsx-props-no-spreading": "off",
     "no-implicit-coercion": ["error", {"boolean": false}],
     "no-param-reassign": ["error", {"props":  true}],
     "no-process-env": "error"

src/components/Event/EventListItem.scss

@@ -62,14 +62,6 @@
   .event-list-item {
     flex-flow: wrap-reverse;
 
-    &__mint {
-      & > div {
-        .btn:first-of-type {
-          margin-top: 0;
-        }
-      }
-    }
-
     .image-placeholder {
       height: 565px;
     }
@@ -78,8 +70,14 @@
       display: flex;
       width: 100%;
       flex-wrap: wrap;
-      margin-top: 20px;
+      margin-top: 12px;
+      padding-left: 24px;
+      padding-right: 24px;
       justify-content: center;
+      max-height: 100%;
+      top: 0;
+      right: 0;
+      overflow: scroll;
 
       h1 {
         width: 100%;

src/components/Grid/index.tsx

@@ -9,9 +9,31 @@ const Grid: FunctionComponent<
 		row?: boolean
 		className?: string
 		Component?: keyof JSX.IntrinsicElements
+		innerRef?: (node: HTMLDivElement) => void
+		minHeight?: string
 	}>
-> = ({children, size, row, className, Component = "div"}) => (
-	<Component className={`${row ? "row " : `col-${size} `}${className ?? ""}`}>{children}</Component>
-)
+> = ({children, innerRef, size, row, className, Component = "div", minHeight}) => {
+	const baseProps = {
+		className: `${row ? "row " : `col-${size} `}${className ?? ""}`,
+		style: {
+			minHeight
+		}
+	}
+
+	if (Component === "div") {
+		return (
+			<div {...baseProps} ref={innerRef}>
+				{children}
+			</div>
+		)
+	} else if (Component === "section") {
+		return (
+			<section {...baseProps} ref={innerRef}>
+				{children}
+			</section>
+		)
+	}
+	return <Component {...baseProps}>{children}</Component>
+}
 
 export default Grid

src/components/Header/index.scss

@@ -6,6 +6,7 @@
   background-color: $white;
   justify-content: space-between;
   display: flex;
+  flex-wrap: wrap;
 
   &__logo-container {
     &:hover {
@@ -17,6 +18,8 @@
     ul {
       list-style: none;
       display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
       align-items: center;
       margin-top: 0;
       margin-bottom: 0;

src/pages/Home/hooks/index.ts

@@ -173,4 +173,14 @@ const useHomePage = (): HomePageState => {
 	}
 }
 
+export const useClientRect = (): [DOMRect | undefined, (node: HTMLDivElement) => void] => {
+	const [rect, setRect] = useState<DOMRect>()
+	const ref = useCallback((node: HTMLDivElement) => {
+		if (node) {
+			setRect(node.getBoundingClientRect())
+		}
+	}, [])
+	return [rect, ref]
+}
+
 export default useHomePage

src/pages/Home/index.scss

@@ -427,10 +427,10 @@
 @media (max-width: 1040px) {
   .home-page {
     .charity {
-      flex-flow: wrap-reverse;
-
       &__mint {
         & > div {
+          flex-wrap: nowrap;
+
           .btn:first-of-type {
             margin-top: 0;
           }
@@ -439,16 +439,14 @@
 
       &__content {
         display: flex;
-        width: 100%;
         flex-wrap: wrap;
-        margin-top: 20px;
         justify-content: center;
-
-        &:last-of-type,
-        &:first-of-type {
-          margin-left: 0;
-          margin-right: 0;
-        }
+        top: 0;
+        width: 100%;
+        max-height: 100%;
+        padding: 24px;
+        padding-bottom: 112px;
+        overflow: scroll;
 
         h1 {
           width: 100%;