From 86fe6a802b2bb069cd32bdb62f079fad961e90de Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Wed, 15 Nov 2023 15:07:14 +0900
Subject: [PATCH] Fixing mobile overflow

---
 .../shared/components/truncate/truncate.component.html |  4 ++--
 .../shared/components/truncate/truncate.component.scss | 10 +++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/shared/components/truncate/truncate.component.html b/frontend/src/app/shared/components/truncate/truncate.component.html
index d75b683f2..0ec579dad 100644
--- a/frontend/src/app/shared/components/truncate/truncate.component.html
+++ b/frontend/src/app/shared/components/truncate/truncate.component.html
@@ -1,4 +1,5 @@
 <span class="truncate" [style.max-width]="maxWidth ? maxWidth + 'px' : null" [style.justify-content]="textAlign" [class.inline]="inline">
+  <div class="hidden">{{ text }}</div>
     <ng-container *ngIf="link">
       <a [routerLink]="link" class="truncate-link">
         <ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>
@@ -11,11 +12,10 @@
 </span>
 
 <ng-template #ltrTruncated>
-  <div class="hidden">{{ text }}</div>
+
   <span class="first">{{text.slice(0,-lastChars)}}</span><span class="last-four">{{text.slice(-lastChars)}}</span>
 </ng-template>
 
 <ng-template #rtlTruncated>
-  <div class="hidden">{{ text }}</div>
   <span class="first">{{text.slice(lastChars)}}</span><span class="last-four">{{text.slice(0,lastChars)}}</span>
 </ng-template>
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/truncate/truncate.component.scss b/frontend/src/app/shared/components/truncate/truncate.component.scss
index 97233e5d6..c5179384f 100644
--- a/frontend/src/app/shared/components/truncate/truncate.component.scss
+++ b/frontend/src/app/shared/components/truncate/truncate.component.scss
@@ -32,4 +32,12 @@
 .hidden { 
   color: transparent;
   position: absolute;
-}
\ No newline at end of file
+  max-width: 300px;
+  overflow: hidden;
+}
+
+@media (max-width: 567px) {
+  .hidden {
+    max-width: 150px;
+  }
+}