Fix layout glitches

vercel · Sep 3, 2022 · 86373e4 · 86373e4
1 parent 2f33fe2
commit 86373e4
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/examples/image-component/components/layout.module.css b/examples/image-component/components/layout.module.css
@@ -5,6 +5,7 @@
   border-radius: 8px;
   padding: 2rem;
   margin: 0 auto;
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
 .svg {

diff --git a/examples/image-component/components/layout.tsx b/examples/image-component/components/layout.tsx
@@ -19,15 +19,15 @@ export default function Layout({ children }: PropsWithChildren) {
           title="View Source"
           href={`https://github.com/vercel/next.js/tree/canary/examples/image-component${pagePath}`}
         >
-          <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff" />
+          <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#ffffffba" />
           <path
             className={styles.arm}
             d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
           />
           <path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
         </a>
       </svg>
-      <div className={styles.card}>{children}</div>
+      <main className={styles.card}>{children}</main>
     </>
   )
 }
diff --git a/examples/image-component/pages/background.tsx b/examples/image-component/pages/background.tsx
@@ -29,7 +29,6 @@ export default function BackgroundPage() {
           fontSize: '2rem',
           lineHeight: '3rem',
           textAlign: 'center',
-          paddingTop: '40vh',
           textShadow: '1px 1px 1px #3c5c5e',
         }}
       >