From a495f724b9f0d21ce725ae9c886e351f96c50057 Mon Sep 17 00:00:00 2001
From: Astra <me@astrra.space>
Date: Sat, 10 May 2025 09:14:50 +0000
Subject: [PATCH] CSS text overflow and infinite loading fixes (#4)

Reviewed-on: https://git.witchcraft.systems/scientific-witchery/pds-dash/pulls/4
---
 src/App.svelte                  |  6 +++---
 src/app.css                     |  5 +++++
 src/lib/AccountComponent.svelte |  3 ++-
 src/lib/PostComponent.svelte    | 12 ++++++++++--
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 733320e..fef3804 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -52,12 +52,12 @@
       <p>Error: {error.message}</p>
     {/await}
 
-    <div id="Feed">
+    <div id="Feed" property="infinite-wrapper">
       <div id="spacer"></div>
       {#each posts as postObject}
         <PostComponent post={postObject as Post} />
       {/each}
-      <InfiniteLoading on:infinite={onInfinite} distance={3000} />
+      <InfiniteLoading on:infinite={onInfinite} distance={3000} forceUseInfiniteWrapper=true />
       <div id="spacer"></div>
     </div>
   </div>
@@ -129,7 +129,7 @@
       margin-top: 5%;
     }
     #Account {
-      width: auto;
+      width: 85%;
       padding-left: 5%;
       padding-right: 5%;
       margin-bottom: 20px;
diff --git a/src/app.css b/src/app.css
index 4c343e2..50da734 100644
--- a/src/app.css
+++ b/src/app.css
@@ -66,6 +66,10 @@ body {
   font-size: 24px;
   color: var(--text-color);
   border-color: var(--border-color);
+  overflow-wrap: break-word;
+  word-wrap: normal;
+  word-break: break-word;
+  hyphens: none;
 }
 
 h1 {
@@ -75,6 +79,7 @@ h1 {
 
 #app {
   max-width: 1400px;
+  width: 100%;
   margin: 0;
   padding: 0;
   margin-left: auto;
diff --git a/src/lib/AccountComponent.svelte b/src/lib/AccountComponent.svelte
index e324393..880db3f 100644
--- a/src/lib/AccountComponent.svelte
+++ b/src/lib/AccountComponent.svelte
@@ -32,17 +32,18 @@
   #accountName {
     margin-left: 10px;
     font-size: 0.9em;
+    max-width: 80%;
 
     /* replace overflow with ellipsis */
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 80%;
   }
   #avatar {
     width: 50px;
     height: 50px;
     margin: 0px;
+    object-fit: cover;
     border-right: var(--border-color) 1px solid;
   }
 </style>
diff --git a/src/lib/PostComponent.svelte b/src/lib/PostComponent.svelte
index dc0b874..d140180 100644
--- a/src/lib/PostComponent.svelte
+++ b/src/lib/PostComponent.svelte
@@ -222,13 +222,21 @@
     margin-left: 10px;
     font-size: 0.9em;
     text-align: start;
-    overflow-wrap: break-word;
+    word-break: break-word;
+    max-width: 80%;
+    max-height: 95%;
     overflow: hidden;
+    align-self: flex-start;
+    margin-top: auto;
+    margin-bottom: auto;
   }
   #avatar {
-    height: 100%;
+    height: 60px;
+    width: 60px;
     margin: 0px;
     margin-left: 0px;
+    overflow: hidden;
+    object-fit: cover;
     border-right: var(--border-color) 1px solid;
   }
   #carouselContainer {