Update UI for mobile view

frontend/components/PostCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 type Post = {
     title: String
-    description: String | null | undefined
+    description: String
 }
 
 const props = defineProps<Post>()

frontend/components/modal/CreatePost.vue

@@ -26,7 +26,7 @@ const submitPost = async () => {
     closeModal()
 }
 
-onClickOutside(modal, (event) => {
+onClickOutside(modal, () => {
     closeModal()
 })
 
@@ -41,7 +41,7 @@ watch(
 <template>
     <div class="fixed top-0 flex h-screen w-screen justify-center">
         <div ref="modal"
-            class="relative mt-20 flex h-fit max-h-[1000px] min-h-[500px] w-2/3 flex-col items-center border border-lightgray bg-secondary p-4">
+            class="relative mx-4 mt-20 flex h-96 w-full max-w-3xl flex-col items-center border border-lightgray bg-secondary p-4">
             <label class="mt-2 w-full"> Title </label>
             <input type="text" v-model="newPost.title" class="mt-2 w-full rounded-md" />
 

frontend/pages/index.vue

@@ -3,8 +3,6 @@ definePageMeta({
     middleware: ['auth'],
 })
 
-import { z } from 'zod'
-
 const posts = usePosts()
 const openCreatePostModal = ref<Boolean>(false)
 
@@ -12,11 +10,6 @@ const getPosts = async () => {
     await fetchPosts()
 }
 
-const logout = async () => {
-    await userLogout()
-    useRouter().push('/login')
-}
-
 const toggleCreatePostModal = () => {
     openCreatePostModal.value = !openCreatePostModal.value
 }
@@ -34,8 +27,7 @@ onMounted(() => {
     <div>
         <Header />
         <div class="mt-16 flex w-full items-center justify-center">
-            <div class="flex w-1/2 flex-col gap-4 px-4 pb-10 pt-4 2xl:w-1/3">
+            <div class="flex w-full max-w-2xl flex-col gap-4 px-4 pb-10 pt-4">
-                <button @click="getUserPosts()"> User Posts </button>
                 <div v-if="posts" v-for="post in posts">
                     <PostCard :title="post.title" :description="post.description" />
                 </div>
@@ -43,7 +35,7 @@ onMounted(() => {
             </div>
         </div>
         <button @click="createPost()"
-            class="fixed bottom-12 right-12 flex items-center justify-center gap-2 rounded-full bg-blue-500 p-4">
+            class="fixed bottom-6 right-6 flex items-center justify-center gap-2 rounded-full bg-blue-500 p-4">
             <Icon name="plus" />
             Create Post
         </button>

frontend/pages/login/index.vue

@@ -53,7 +53,7 @@ watch(
 </script>
 
 <template>
-    <div class="absolute flex h-screen w-screen items-center justify-center">
+    <div class="absolute flex h-screen w-screen items-center justify-center p-4">
         <div
             class="flex w-96 flex-col items-center justify-center gap-2 rounded-xl border border-lightgray bg-secondary p-6">
             <label v-if="isSignUp" class="mt-2 w-full">