Style still WIP but much better now

src/lib/AccountComponent.svelte

@@ -1,49 +1,48 @@
 <script lang="ts">
-    import type { AccountMetadata } from "./pdsfetch";
-    const { account }: { account: AccountMetadata } = $props();
-    import { Config } from "../../config";
+  import type { AccountMetadata } from "./pdsfetch";
+  const { account }: { account: AccountMetadata } = $props();
+  import { Config } from "../../config";
 </script>
 
 <a id="link" href="{Config.FRONTEND_URL}/profile/{account.did}">
-    <div id="accountContainer">
-        {#if account.avatarCid}
-            <img
-                id="avatar"
-                alt="avatar of {account.displayName}"
-                src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
-            />
-        {/if}
-        <div id="accountName">
-            {account.displayName || account.handle || account.did}
-        </div>
+  <div id="accountContainer">
+    {#if account.avatarCid}
+      <img
+        id="avatar"
+        alt="avatar of {account.displayName}"
+        src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
+      />
+    {/if}
+    <div id="accountName">
+      {account.displayName || account.handle || account.did}
     </div>
+  </div>
 </a>
 
 <style>
-    #accountContainer {
-        display: flex;
-        text-align: start;
-        align-items: center;
-        background-color: #0d0620;
-        padding: 4%;
-        margin: 10px;
+  #accountContainer {
+    display: flex;
+    text-align: start;
+    align-items: center;
+    background-color: #12082b;
+    padding: 0px;
+    margin-bottom: 15px;
+    border: 1px solid #8054f0;
+  }
+  #accountName {
+    margin-left: 10px;
+    font-size: 0.9em;
 
-        /* round corners */
-        border-radius: 10px;
-    }
-    #accountName {
-        margin-left: 10px;
-        font-size: 0.9em;
-
-        /* replace overflow with ellipsis */
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width: 80%;
-    }
-    #avatar {
-        width: 50px;
-        height: 50px;
-        border-radius: 50%;
-    }
+    /* replace overflow with ellipsis */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 80%;
+  }
+  #avatar {
+    width: 50px;
+    height: 50px;
+    margin: 0px;
+    border-right: #8054f0 1px solid;
+  }
 </style>

src/lib/PostComponent.svelte

@@ -25,18 +25,17 @@
   </div>
   <div id="postContent">
     {#if post.replyingUri}
-      <a
-        id="replyingText"
-        href="https://deer.social/profile/{post.replyingUri.repo}/post/{post
-          .replyingUri.rkey}">replying to {post.replyingUri.repo}</a
-      >
+    <a
+      id="replyingText"
+      href="{Config.FRONTEND_URL}/profile/{post.replyingUri.repo}/post/{post
+        .replyingUri.rkey}">replying to {post.replyingUri.repo}</a
+    >
     {/if}
-    <p>{post.text}</p>
-
+    <div id="postText">{post.text}</div>
     {#if post.quotingUri}
       <a
         id="quotingText"
-        href="https://deer.social/profile/{post.quotingUri.repo}/post/{post
+        href="{Config.FRONTEND_URL}/profile/{post.quotingUri.repo}/post/{post
           .quotingUri.rkey}">quoting {post.quotingUri.repo}</a
       >
     {/if}
@@ -66,7 +65,8 @@
     flex-direction: column;
     border: 1px solid #8054f0;
     background-color: black;
-    margin-bottom: -1px;
+    margin-bottom: 15px;
+    overflow-wrap: break-word;
   }
   #postHeader {
     display: flex;
@@ -78,6 +78,7 @@
     height: fit-content;
     border-bottom: 1px solid #8054f0;
     font-weight: bold;
+    overflow-wrap: break-word;
   }
   #postContent {
     display: flex;
@@ -86,22 +87,25 @@
     padding: 10px;
     background-color: #0d0620;
     color: white;
+    overflow-wrap: break-word;
   }
   #replyingText {
     font-size: 0.7em;
-    color: white;
     margin: 0;
-    margin-bottom: 10px;
     padding: 0;
+    padding-bottom: 5px;
   }
   #postText {
     margin: 0;
+    margin-bottom: 5px;
     padding: 0;
   }
   #headerText {
     margin-left: 10px;
     font-size: 0.9em;
     text-align: start;
+    overflow-wrap: break-word;
+    overflow: hidden;
   }
   #avatar {
     width: 50px;

src/lib/pdsfetch.ts

@@ -164,7 +164,7 @@ const fetchPosts = async (did: string) => {
       params: {
         repo: did as At.Identifier,
         collection: "app.bsky.feed.post",
-        limit: 5,
+        limit: Config.MAX_POSTS_PER_USER,
       },
     });
     return {