From 94a7b710c5800fa73d4fbf1d6d30a5ac2f0ccfcc Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 22 Nov 2023 11:04:52 +0900
Subject: [PATCH] Fix truncated hidden text layout flow bug

---
 .../components/truncate/truncate.component.html   |  2 +-
 .../components/truncate/truncate.component.scss   | 15 ++++++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/shared/components/truncate/truncate.component.html b/frontend/src/app/shared/components/truncate/truncate.component.html
index 0ec579dad..335c35212 100644
--- a/frontend/src/app/shared/components/truncate/truncate.component.html
+++ b/frontend/src/app/shared/components/truncate/truncate.component.html
@@ -1,5 +1,5 @@
 <span class="truncate" [style.max-width]="maxWidth ? maxWidth + 'px' : null" [style.justify-content]="textAlign" [class.inline]="inline">
-  <div class="hidden">{{ text }}</div>
+  <div class="hidden-content">{{ text }}</div>
     <ng-container *ngIf="link">
       <a [routerLink]="link" class="truncate-link">
         <ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>
diff --git a/frontend/src/app/shared/components/truncate/truncate.component.scss b/frontend/src/app/shared/components/truncate/truncate.component.scss
index c5179384f..7f79eb043 100644
--- a/frontend/src/app/shared/components/truncate/truncate.component.scss
+++ b/frontend/src/app/shared/components/truncate/truncate.component.scss
@@ -3,6 +3,7 @@
   display: flex;
   flex-direction: row;
   align-items: baseline;
+  position: relative;
 
   .truncate-link {
     display: flex;
@@ -27,17 +28,17 @@
   &.inline {
     display: inline-flex;
   }
-}
 
-.hidden { 
-  color: transparent;
-  position: absolute;
-  max-width: 300px;
-  overflow: hidden;
+  .hidden-content {
+    color: transparent;
+    position: absolute;
+    max-width: 300px;
+    overflow: hidden;
+  }
 }
 
 @media (max-width: 567px) {
-  .hidden {
+  .hidden-content {
     max-width: 150px;
   }
 }