diff --git a/apps/temp-docs/components/layouts/Layout.tsx b/apps/temp-docs/components/layouts/Layout.tsx
index 48c5a4152c6..12ef773b83a 100644
--- a/apps/temp-docs/components/layouts/Layout.tsx
+++ b/apps/temp-docs/components/layouts/Layout.tsx
@@ -25,7 +25,9 @@ const Layout = ({
       </Head>
       <main>
         <NavBar currentPage={currentPage} />
-        <article className="text-scale-1200 mx-4 md:mx-8 xl:mx-auto xl:max-w-7xl">{children}</article>
+        <article className="text-scale-1200 mx-4 md:mx-8 xl:mx-auto xl:max-w-7xl">
+          {children}
+        </article>
         <Footer />
       </main>
     </>
diff --git a/apps/temp-docs/pages/discussions/index.tsx b/apps/temp-docs/pages/discussions/index.tsx
index 43f2987cbbe..8d711072e03 100644
--- a/apps/temp-docs/pages/discussions/index.tsx
+++ b/apps/temp-docs/pages/discussions/index.tsx
@@ -149,23 +149,23 @@ const discussions = ({ data }: any) => {
   return (
     <Layout meta={{ title: meta_title, description: meta_description }} currentPage={'Discussions'}>
       <div className="mb-16 space-y-8">
-        <div className="flex items-center justify-between mt-4">
+        <div className="mt-4 flex items-center justify-between">
           <h2 className="text-3xl md:text-4xl">Discussions</h2>
           <Link href="https://github.com/supabase/supabase/discussions/new">
             <a
               target="_blank"
-              className="rounded-lg bg-[#34b17b] px-4 py-2 text-xs md:text-sm text-white transition duration-150 hover:bg-[#40cf8e]"
+              className="rounded-lg bg-[#34b17b] px-4 py-2 text-xs text-white transition duration-150 hover:bg-[#40cf8e] md:text-sm"
             >
               New Discussion
             </a>
           </Link>
         </div>
-        <div className="md:flex justify-around space-y-4 md:space-y-0 md:space-x-4">
+        <div className="justify-around space-y-4 md:flex md:space-y-0 md:space-x-4">
           {data.repository.pinnedDiscussions.edges.map((discussion: any) => {
             const item = discussion.node
             return (
               <div
-                className="border-scale-600 bg-scale-400 md:w-1/3 rounded-xl border px-4 py-4"
+                className="border-scale-600 bg-scale-400 rounded-xl border px-4 py-4 md:w-1/3"
                 key={item.id}
               >
                 <Link href={`/discussions/${item.discussion.number}`}>
@@ -201,10 +201,10 @@ const discussions = ({ data }: any) => {
             return (
               <div className="border-scale-600 border-b pb-6 md:pb-0" key={discussion.id}>
                 <Link href={`/discussions/${discussion.number}`}>
-                  <a className="md:mx-6 mb-6 md:flex items-center justify-between">
+                  <a className="mb-6 items-center justify-between md:mx-6 md:flex">
                     <div className="flex items-center">
                       <div className="item-center flex items-center md:space-x-6">
-                        <div className="hidden item-center bg-scale-400 border-scale-600 md:flex h-fit items-center space-x-1 rounded-xl border py-1 pl-1 pr-2">
+                        <div className="item-center bg-scale-400 border-scale-600 hidden h-fit items-center space-x-1 rounded-xl border py-1 pl-1 pr-2 md:flex">
                           <IconArrowUp className="stroke-2" height={15} />
                           <span>{discussion.upvoteCount}</span>
                         </div>
@@ -213,7 +213,9 @@ const discussions = ({ data }: any) => {
                         </div>
                       </div>
                       <div className="ml-6">
-                        <h2 className="text-base md:text-lg font-semibold md:max-w-sm lg:max-w-4xl">{discussion.title}</h2>
+                        <h2 className="text-base font-semibold md:max-w-sm md:text-lg lg:max-w-4xl">
+                          {discussion.title}
+                        </h2>
                         <span className="text-scale-1000 text-xs">
                           <Link href={discussion.author.url}>
                             <a>{discussion.author.login}</a>
@@ -225,7 +227,7 @@ const discussions = ({ data }: any) => {
                         </span>
                       </div>
                     </div>
-                    <div className="flex items-center space-x-2 ml-16 mt-2 md:ml-0 md:mt-0">
+                    <div className="ml-16 mt-2 flex items-center space-x-2 md:ml-0 md:mt-0">
                       <div className="flex items-center -space-x-2">
                         {/* TODO: this is a hack because I couldn't find a participant query for graphql. could be replaced with a proper solution. */}
                         {discussion.comments.totalCount === 0 ? (