All feed elements same width

social-protocols · Dec 3, 2023 · 007f473 · 007f473
1 parent 27c696c
commit 007f473
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/app/components/ui/feed.tsx b/app/components/ui/feed.tsx
@@ -3,13 +3,17 @@ import { type Post } from '#app/db/types.ts'
 
 export function Feed({ posts }: Post[]) {
   return (
-    <ul>
-      {posts.map((post) => (
-        <li>
-          <PostTeaser post={ post as Post} />
-        </li>
-      ))}
-    </ul>
+    <div className='flex w-10/12 max-w-3/5'>
+      <ul>
+        {posts.map((post) => (
+          <li>
+            <div className='flex-1'>
+              <PostTeaser post={ post as Post} />
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 }
 

diff --git a/app/components/ui/post.tsx b/app/components/ui/post.tsx
@@ -25,9 +25,9 @@ export function PostDetails({ post, note }: PostProps) {
 
 export function PostTeaser({ post }: Post) {
   return (
-    <div className='flex justify-center'>
+    <div className='justify-center'>
       <Link to={`/posts/${post.id}`}>
-        <div className="bg-primary-foreground rounded-lg p-5 m-5 w-full">
+        <div className="bg-primary-foreground rounded-lg p-5 m-5">
           <p className="mb-5">{post.content}</p>
         </div>
       </Link>
@@ -47,9 +47,9 @@ export function NoteAttachment({ note }: { note: Post }) {
 
 export function VoteButtons() {
   return (
-    <div className='flex justify-stretch'>
-      <Button className='mr-5'>Upvote</Button>
-      <Button>Downvote</Button>
+    <div>
+      <Button variant='destructive' size='lg'>Upvote</Button>
+      <Button variant='destructive' size='lg'>Downvote</Button>
     </div>
   )
 }