add mobile view to blog list

src/app/actions/emailActions.ts

@@ -1,6 +1,6 @@
 'use server';
 
-import { sendEmailSchema, SendEmailSchema } from '@/components/emailForm/schema';
+import { sendEmailSchema, SendEmailSchema } from '@/components/EmailForm/schema';
 import { validateData } from '@/utils/validateData';
 import { transporter } from '../../lib/nodemailer';
 import { getSubscribersEmails } from '@/utils/getSubscribers';

src/app/admin/page.tsx

@@ -1,4 +1,4 @@
-import EmailForm from '@/components/emailForm';
+import EmailForm from '@/components/EmailForm';
 import SubscribersList from '@/components/Subscribers/SubscribersList';
 import { getSubscribers } from '@/utils/getSubscribers';
 import { routes, userRole } from '@/utils/enums';

src/app/blog/layout.tsx

@@ -24,11 +24,14 @@ const Layout = async ({ children }: { children: ReactNode }) => {
             href={`${routes.blog}/${id}`}
             className="block border-b-1 first-of-type:border-t-1 border-gray-400 py-1 hover:bg-gray-100"
           >
-            <li className="flex justify-between">
+            <li className="flex justify-between flex-col xs:flex-row">
               <div>{title}</div>
               <div>
                 {categories.map((category) => (
-                  <span className="bg-gray-300 rounded ml-2 text-[0.6rem] px-2 py-1" key={category}>
+                  <span
+                    className="inline-block bg-gray-300 rounded mr-2 my-1 text-[0.6rem] px-2 py-1"
+                    key={category}
+                  >
                     {category}
                   </span>
                 ))}

tailwind.config.js

@@ -14,6 +14,9 @@ module.exports = {
       borderWidth: {
         1: '1px',
       },
+      screens: {
+        xs: '440px',
+      },
     },
   },
   plugins: [],