hotfix: layout

Author: jimmylee

app/concept-2/page.tsx

@@ -15,7 +15,7 @@ export const dynamic = 'force-static';
 // NOTE(jimmylee)
 // https://nextjs.org/docs/app/api-reference/functions/generate-metadata
 export async function generateMetadata({ params, searchParams }) {
-  const title = `${Package.name}: Concept I`;
+  const title = `${Package.name}: Concept II`;
   const description = Package.description;
   const url = 'https://sacred.computer/conept-2';
   const handle = '@internetxstudio';

components/examples/PageConceptTwo.module.scss

@@ -50,6 +50,10 @@
   width: 100%;
   display: flex;
   justify-content: space-between;
+
+  @media (max-width: 960px) {
+    display: block;
+  }
 }
 
 .left {
@@ -70,9 +74,17 @@
 .col {
   width: 20%;
   padding: calc(var(--theme-line-height-base) * 1rem) 2ch calc(var(--theme-line-height-base) * 1rem) 2ch;
+
+  @media (max-width: 960px) {
+    width: 100%;
+  }
 }
 
 .col3 {
   width: 60%;
   padding: calc(var(--theme-line-height-base) * 1rem) 2ch calc(var(--theme-line-height-base) * 1rem) 2ch;
+
+  @media (max-width: 960px) {
+    width: 100%;
+  }
 }

components/examples/PageConceptTwo.tsx

@@ -118,6 +118,8 @@ const PageConceptTwo = (props) => {
                 ['DATA 23', 'DATA 24'],
                 ['DATA 25', 'DATA 26'],
                 ['DATA 27', 'DATA 28'],
+                ['DATA 29', 'DATA 30'],
+                ['DATA 31', 'DATA 32'],
               ]}
             />
           </Card>
@@ -154,6 +156,8 @@ const PageConceptTwo = (props) => {
                 ['DATA 23', 'DATA 24'],
                 ['DATA 25', 'DATA 26'],
                 ['DATA 27', 'DATA 28'],
+                ['DATA 29', 'DATA 30'],
+                ['DATA 31', 'DATA 32'],
               ]}
             />
           </Card>