Fixed weird issue on database page

src/components/questListing.astro

@@ -33,30 +33,6 @@ const render_date = questReleaseDate.toLocaleDateString(
   .circle {
     display: none;
   }
-  @media (min-width: 900px) {
-    .circle {
-      margin: 1rem 1rem 1rem 0rem;
-      position: relative;
-      display: flex;
-      visibility: visible;
-      height: 1.5rem;
-      width: 1.5rem;
-      border-radius: 40%;
-      background-color: var(--c-darkpurple);
-      transition: transform var(--speed) var(--ease);
-    }
-
-    a:hover > .circle {
-      height: 1.75rem;
-      width: 1.75rem;
-      translate: -0.125rem;
-      margin-right: 0.825rem;
-    }
-
-    article {
-      margin-left: 0.5rem;
-    }
-  }
 
   a {
     align-items: center;
@@ -92,8 +68,8 @@ const render_date = questReleaseDate.toLocaleDateString(
     flex: 1;
     flex-wrap: wrap;
     flex-direction: column;
-    align-items: flex-start;
-    align-content: flex-start;
+    align-items: center;
+    align-content: center;
     justify-content: center;
     background-color: var(--c-darkergray);
     padding: 10px;
@@ -102,7 +78,35 @@ const render_date = questReleaseDate.toLocaleDateString(
     min-height: 100%;
     border-radius: 1.25rem;
   }
+
   a:hover > article {
     transform: scaleY(102.5%) scaleX(101%);
   }
+
+  @media (min-width: 900px) {
+    .circle {
+      margin: 1rem 0.5rem 1rem 0.5rem;
+      position: relative;
+      display: flex;
+      visibility: visible;
+      height: 1.5rem;
+      width: 1.5rem;
+      border-radius: 40%;
+      background-color: var(--c-darkpurple);
+      transition: transform var(--speed) var(--ease);
+    }
+
+    a:hover > .circle {
+      height: 1.75rem;
+      width: 1.75rem;
+      translate: -0.125rem;
+      margin-right: 0.825rem;
+    }
+
+    article {
+      align-items: flex-start;
+      align-content: flex-start;
+      margin-left: 0.5rem;
+    }
+  }
 </style>

src/layouts/databaseSection.astro

@@ -46,7 +46,6 @@ const { title } = Astro.props
     z-index: -1;
   }
   h1 {
-    font-size: 40px;
     line-height: 48px;
     letter-spacing: -1px;
     color: white;
@@ -55,21 +54,22 @@ const { title } = Astro.props
     margin-bottom: 0;
     margin-left: auto;
     margin-right: auto;
-    padding: 0.25rem 0.75rem;
     max-width: max-content;
     background-color: var(--c-darkgray);
     padding: 0.25rem 1.5rem;
     border-radius: 0.5rem;
     padding-bottom: 0.5rem;
+    justify-self: center;
   }
   .wrapper {
-    margin: 2rem 3rem 0.5rem 3rem;
+    margin: 2rem 2rem 0.5rem 2rem;
     display: flex;
     flex-flow: column wrap;
     row-gap: 1em;
     column-gap: 1em;
     align-self: center;
     align-items: stretch;
+    align-content: center;
     justify-content: space-around;
     padding: 1em;
     color: white;

src/layouts/taShowcaseLayout.astro

@@ -5,11 +5,11 @@ import TACard from '../components/taCard.astro'
 import { plsLoadTAEntry } from '../utils/tools'
 
 export interface Props {
-  datafile: string
+  collectionKey: string
 }
 
-const { datafile } = Astro.props
-const taEntry = await plsLoadTAEntry(datafile)
+const { collectionKey } = Astro.props
+const taEntry = await plsLoadTAEntry(collectionKey)
 const pagetitle = `${taEntry.info.title} - FGO TA`
 taEntry.data.sort((a, b) => b.date.valueOf() - a.date.valueOf()  )
 ---

src/pages/database/[slug].astro

@@ -10,4 +10,4 @@ export async function getStaticPaths() {
 const { slug } = Astro.params
 ---
 
-<TaShowcaseLayout datafile={slug} />
+<TaShowcaseLayout collectionKey={slug} />