From 99c40b645ada1234a55a33d4b8c1b7b88fb89b41 Mon Sep 17 00:00:00 2001
From: Astra <me@astrra.space>
Date: Sat, 10 May 2025 17:25:56 +0900
Subject: [PATCH 1/3] Fix names overflowing on mobile

---
 src/App.svelte                  | 2 +-
 src/app.css                     | 5 +++++
 src/lib/AccountComponent.svelte | 1 -
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 733320e..45a4b10 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -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..b455100 100644
--- a/src/lib/AccountComponent.svelte
+++ b/src/lib/AccountComponent.svelte
@@ -37,7 +37,6 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 80%;
   }
   #avatar {
     width: 50px;
-- 
2.47.2


From 8e1a46d81be7409e85a27035a31ec2226213377f Mon Sep 17 00:00:00 2001
From: Astra <me@astrra.space>
Date: Sat, 10 May 2025 17:51:13 +0900
Subject: [PATCH 2/3] Properly square avatars and misc overflow fixes

---
 src/lib/AccountComponent.svelte |  2 ++
 src/lib/PostComponent.svelte    | 12 ++++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/lib/AccountComponent.svelte b/src/lib/AccountComponent.svelte
index b455100..880db3f 100644
--- a/src/lib/AccountComponent.svelte
+++ b/src/lib/AccountComponent.svelte
@@ -32,6 +32,7 @@
   #accountName {
     margin-left: 10px;
     font-size: 0.9em;
+    max-width: 80%;
 
     /* replace overflow with ellipsis */
     overflow: hidden;
@@ -42,6 +43,7 @@
     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 {
-- 
2.47.2


From 7caf5b7b8ace8326b8eabf20c67474eb4f58b9d8 Mon Sep 17 00:00:00 2001
From: Astra <me@astrra.space>
Date: Sat, 10 May 2025 18:13:09 +0900
Subject: [PATCH 3/3] Fix the infinite scroll DDOSing everyone involved

---
 src/App.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 45a4b10..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>
-- 
2.47.2