feat: centered full height layout with tip

src/components/Layout/Layout.css

@@ -1,12 +1,19 @@
 locator-layout {
-  display: block;
+  display: grid;
+  grid-template-areas:
+    'header'
+    'main'
+    'aside';
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto 1fr;
+  height: 100%;
 
   @container (width > 768px) {
-    display: grid;
     grid-template-areas:
       'header aside'
       'main aside';
     grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto 1fr;
   }
 
   &::part(header) {
@@ -23,5 +30,6 @@ locator-layout {
 
   &::part(aside) {
     grid-area: aside;
+    height: 100%;
   }
 }

src/components/Layout/Layout.tsx

@@ -12,9 +12,9 @@ export default function Layout({
 }>) {
   return (
     <>
-      <div part="header">{header}</div>
+      <header part="header">{header}</header>
       <div part="main">{main}</div>
-      <div part="aside">{aside}</div>
+      <aside part="aside">{aside}</aside>
     </>
   );
 }

src/components/Tip/Tip.css

@@ -1,10 +1,9 @@
 locator-tip {
-  align-items: center;
   background: var(--theme-background-accent);
   color: var(--theme-color-accent);
   display: grid;
+  grid-template-columns: min(100%, 20em);
   height: 100%;
-  justify-content: center;
   padding: var(--diamond-spacing);
   place-content: center;
 

src/pages/Start.tsx

@@ -9,9 +9,7 @@ export default function StartPage() {
 
   return (
     <locator-layout>
-      <header slot="header">
-        <locator-logo></locator-logo>
-      </header>
+      <locator-logo slot="header"></locator-logo>
       <div slot="main">
         <h2>{t('start.title')}</h2>
         <form>
@@ -20,17 +18,15 @@ export default function StartPage() {
           <button type="submit">Get started</button>
         </form>
       </div>
-      <aside slot="aside">
-        <locator-tip>
-          <p>Use this service to:</p>
-          <ul>
-            <li>see your nearest places to recycle</li>
-            <li>find out how to recycle a specific item</li>
-            <li>check what you can recycle at home</li>
-          </ul>
-          <img src="/images/recycling-technology.webp" alt="" />
-        </locator-tip>
-      </aside>
+      <locator-tip slot="aside">
+        <p>Use this service to:</p>
+        <ul>
+          <li>see your nearest places to recycle</li>
+          <li>find out how to recycle a specific item</li>
+          <li>check what you can recycle at home</li>
+        </ul>
+        <img src="/images/recycling-technology.webp" alt="" />
+      </locator-tip>
     </locator-layout>
   );
 }

tsconfig.json

@@ -10,5 +10,5 @@
     "jsxImportSource": "preact",
     "experimentalDecorators": true
   },
-  "include": ["node_modules/vite/client.d.ts", "src/**/*.tsx", "src/**/*.ts"],
+  "include": ["node_modules/vite/client.d.ts", "**/*"],
 }