From 102ffe2fe34a105cd91801a82f3db5bf74729dc1 Mon Sep 17 00:00:00 2001
From: PandaDEV <70103896+0PandaDEV@users.noreply.github.com>
Date: Sat, 15 Mar 2025 01:35:16 +0100
Subject: [PATCH] fix: content overflow in width

---
 assets/css/index.scss | 10 ++++++----
 pages/index.vue       |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/assets/css/index.scss b/assets/css/index.scss
index 8970654..0cfac92 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -82,11 +82,9 @@ main {
   letter-spacing: 1;
   border-radius: 10px;
   width: 100%;
-  white-space: pre-wrap;
-  word-wrap: break-word;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   overflow: hidden;
   z-index: 2;
   color: $text;
@@ -95,8 +93,12 @@ main {
     padding: 8px;
   }
 
-  span {
+  span.content-text {
     font-family: CommitMono !important;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    word-break: break-word;
+    max-width: 100%;
   }
 
   .image {
diff --git a/pages/index.vue b/pages/index.vue
index 7b44826..fc4c925 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -47,7 +47,7 @@
           <img :src="pageOgImage" alt="Image" class="image" />
         </div>
         <OverlayScrollbarsComponent v-else class="content">
-          <span>{{ selectedItem?.content || "" }}</span>
+          <span class="content-text">{{ selectedItem?.content || "" }}</span>
         </OverlayScrollbarsComponent>
         <OverlayScrollbarsComponent
           class="information"