fix: linting & suspense wrap

Signed-off-by: james-a-morris <[email protected]>

src/app/(routes)/blog/_components/filter.tsx

@@ -7,7 +7,7 @@ export default function Filter() {
   const { text, handleTextChange } = useFilter();
 
   return (
-    <div className="z-10 sticky top-14 flex w-full justify-center border-b border-white-translucent bg-grey-dark py-6">
+    <div className="sticky top-14 z-10 flex w-full justify-center border-b border-white-translucent bg-grey-dark py-6">
       <div className="flex h-10 items-center gap-2 rounded-full border border-white-translucent bg-[#ffffff08] px-4">
         <SearchIcon />
         <input

src/app/(routes)/blog/page.tsx

@@ -8,6 +8,7 @@ import {
 } from "@/app/_lib/contentful";
 import ArticleFullCard from "./_components/article-full-card";
 import ArticleSnippetCard from "./_components/article-snippet-card";
+import { Suspense } from "react";
 
 export default async function BlogHomePage() {
   const recentArticleSlugs = await retrieveContentfulPublishedSlugs({
@@ -29,12 +30,14 @@ export default async function BlogHomePage() {
         <Text variant="heading-2" className="-mb-6 lg:-mb-8">
           Across Protocol
         </Text>
-        <Filter />
+        <Suspense>
+          <Filter />
+        </Suspense>
         <div className="flex w-full flex-col gap-4">
           <Text variant="body" className="text-grey-400">
             Get started with Across
           </Text>
-          <div className="scrollbar-hide w-full overflow-x-scroll">
+          <div className="w-full overflow-x-scroll scrollbar-hide">
             <div className="grid w-[1024px] grid-cols-3 gap-5 md:w-full">
               {getStartedSnippets.slice(0, 3).map((snippet) => (
                 <div className="w-full" key={snippet?.fields.slug}>