Merge pull request #84 from Huilensolis/81-fix-mobile-responsive-is-b…

…raking fix(app): 81 mobile responsive braking
huilensolis · Feb 3, 2024 · 3ef1d4b · 3ef1d4b
2 parents f66971a + ff3d816
commit 3ef1d4b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/app/(site)/app/components/new-post-box/index.tsx b/src/app/(site)/app/components/new-post-box/index.tsx
@@ -107,7 +107,10 @@ export function NewPostBox() {
 
   return (
     <div>
-      <form className="flex flex-col p-5" onSubmit={handleSubmit(publishPost)}>
+      <form
+        className="flex flex-col sm:p-5 p-1"
+        onSubmit={handleSubmit(publishPost)}
+      >
         <div className="flex gap-4">
           {isLoadingUserProfile ? (
             <Skeleton className="h-14 w-14 rounded-full flex-none" />
@@ -127,7 +130,7 @@ export function NewPostBox() {
               <input
                 type="text"
                 placeholder="What have you drew?"
-                className="bg-transparent h-max text-2xl max-w-full text-neutral-800 dark:text-neutral-300 font-bold placeholder:font-medium placeholder:text-neutral-600 dark:placeholder:text-neutral-500 focus:outline-none"
+                className="bg-transparent w-full h-max text-2xl max-w-full text-neutral-800 dark:text-neutral-300 font-bold placeholder:font-medium placeholder:text-neutral-600 dark:placeholder:text-neutral-500 focus:outline-none"
                 {...register("title", {
                   maxLength: {
                     value: 50,

diff --git a/src/components/feature/posts-grid/index.tsx b/src/components/feature/posts-grid/index.tsx
@@ -13,12 +13,12 @@ export function PostsGrid({
   onFetchMorePosts?: () => Database["public"]["Tables"]["posts"]["Row"][];
 }) {
   return (
-    <ul className="flex flex-wrap gap-2">
+    <ul className="grid grid-cols-2 grid-rows-[repeat(auto-fill,_minmax(1fr,_500px)] gap-2">
       {posts.length > 0 &&
         posts.map((post) => (
           <li
             key={post.id}
-            className="w-[calc(50%-5px)] h-[500px] flex rounded-md overflow-hidden"
+            className="w-full h-[500px] flex rounded-md overflow-hidden"
           >
             <Link href={`/app/post/${post.id}`} className="w-full h-full">
               <LazyImage