chore: add responsive description

Author: xichen1

src/components/Bio.tsx

@@ -48,9 +48,9 @@ const Bio = () => {
                     borderRadius: `50%`,
                 }}
             />
-            <div className="ml-3">
-                <span className="mb-3">Written by <strong>{author.name}</strong> {author.summary}<br/></span>
-                You can follow him on&nbsp;
+            <div className="ml-3 w-3/4 md:w-full">
+                <div className="mb-3">Written by <strong>{author.name}</strong> {author.summary}<br/></div>
+                <span>You can follow him on&nbsp;</span>
                 <a href={`https://twitter.com/${social.twitter}`}
                    className="underline font-bold" target="_blank">
                     Twitter

src/components/layout.tsx

@@ -5,7 +5,7 @@ import ThemeContextWrapper from "@src/components/ThemeContextWrapper";
 const Layout = ({pageTitle, children}: { pageTitle: string, children: React.ReactNode }) => {
     return (
         <ThemeContextWrapper>
-            <div className="">
+            <div className="w-full">
                 <NavBar/>
                 <main className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 relative">{children}</main>
             </div>

src/pages/index.tsx

@@ -12,16 +12,14 @@ const IndexPage: React.FC<PageProps> = () => {
         <Layout pageTitle="mainpage">
             <main>
                 <div className="divide-y divide-gray-200 dark:divide-gray-700">
-                    <div className="flex">
-                        <div className="space-y-2 pt-6 pb-8 md:space-y-5 flex-none">
+                        <div className="space-y-2 pt-6 pb-2 md:space-y-5 flex-none">
                             <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100
                 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14 pb-4">All Post</h1>
                             <Bio />
                         </div>
                     </div>
                     <BlogList/>
                     <Footer />
-                </div>
             </main>
         </Layout>
     );