CSS: Animated Resizing of .panelContents when Window Size is less than 768 pixels.

src/pages/MainLayout.module.css

@@ -18,7 +18,9 @@
 }
 
 .exampleList {
-  padding: 0
+  padding: 0;
+  margin-block-start: 16px;
+  margin-block-end: 16px;
 }
 
 .exampleList li {
@@ -40,6 +42,13 @@
   background-size: cover;
 }
 
+.panel .panelContents {
+  display: block;
+  transition: max-height 0s;
+  overflow: none;
+  max-height: 100vh;
+}
+
 @media only screen and (max-width: 768px) {
   /* More padding on mobile for easier touch screen use */
   .exampleLink {
@@ -55,12 +64,19 @@
     height: auto;
   }
 
-  .panel[data-expanded=false] .panelContents {
-    display: none;
+  .panel .panelContents {
+    display: block;
+    transition: max-height 0.3s ease-out;
+    overflow: hidden;
+    max-height: 0px;
+  }
+
+  .panel[data-expanded='false'] .panelContents {
+    max-height: 0vh;
   }
 
-  .panel[data-expanded=true] .panelContents {
-    display: block;
+  .panel[data-expanded='true'] .panelContents {
+    max-height: 100vh;
   }
 
   .expand {

src/pages/_app.tsx

@@ -2,7 +2,7 @@ import Head from 'next/head';
 import { AppProps } from 'next/app';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { useState } from 'react';
+import { useMemo, memo, useState } from 'react';
 
 import './styles.css';
 import styles from './MainLayout.module.css';
@@ -21,9 +21,12 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
 }) => {
   const router = useRouter();
   const samplesNames = Object.keys(pages);
-
   const [listExpanded, setListExpanded] = useState<boolean>(false);
 
+  const ComponentMemo = useMemo(() => {
+    return memo(Component);
+  }, [Component]);
+
   const oldPathSyntaxMatch = router.asPath.match(/(\?wgsl=[01])#(\S+)/);
   if (oldPathSyntaxMatch) {
     const slug = oldPathSyntaxMatch[2];
@@ -107,7 +110,7 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
             </ul>
           </div>
         </nav>
-        <Component {...pageProps} />
+        <ComponentMemo {...pageProps} />
       </div>
     </>
   );