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] 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;