[RZB-250021]: fixed common header and hide title for small screens

Author: xkeshav

.vscode/dictionaries/project-words.txt

@@ -39,6 +39,7 @@ jsonify
 Jyeshtha
 Kartika
 kmeans
+letterpad
 linalg
 lucide
 LXXX

src/assets/styles/tile.css

@@ -1,3 +1,8 @@
+.container__page {
+  container-type: inline-size;
+  container-name: letterpad;
+}
+
 .page__header {
   display: flex;
   align-items: center;
@@ -40,21 +45,19 @@
   padding: 1rem;
   height: calc(100vh - 5rem);
   overflow-y: auto;
-  container-type: inline-size;
+
 
   .page__grid {
     display: grid;
     gap: 1.25rem;
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
     justify-content: center;
     margin-top: 1rem;
   }
+}
 
-  @container (min-width: 600px) {
-    .page__grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
-      gap: 1.5rem;
-    }
+@container letterpad (max-width: 700px) {
+  .page__title {
+    display: none;
   }
-}
+}

src/pages/glossary/[item].astro

@@ -4,6 +4,7 @@ import BackButton from "@/components/BackButton.astro";
 import LetterCard from "@/components/LetterCard.astro";
 import glossaryData from "@/data/glossary.json";
 import BaseLayout from "@/layouts/Base";
+import type { AlphabetEntry } from "@/types/alphabet";
 
 export async function getStaticPaths() {
   return Object.keys(glossaryData).map((value) => ({
@@ -20,16 +21,16 @@ if (!categoryData) {
 }
 ---
 
-<BaseLayout meta={{ title: title ?? item }}>
-  <BackButton href="/glossary" />
+<BaseLayout meta={{ title: title }}>
   <div class="container__page">
     <div class="page__header">
-      <h2 class="page__title">{title ?? item}</h2>
+      <BackButton href="/glossary" />
+      <h2 class="page__title">{title}</h2>
       <button id="flip-all-button" class="btn__flip__all">Flip All Cards</button>
     </div>
     <div class="page__content">
       <div class="page__grid">
-        {data && data.map((entry: any) => <LetterCard item={entry} category={category ?? item} />)}
+        {data.map((entry: AlphabetEntry) => <LetterCard item={entry} category={category} />)}
       </div>
     </div>
   </div>