Merge pull request #4401 from mempool/mononaut/menu-footer-align-bug

Fix truncated hidden text layout flow bug

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>

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 { 
+  .hidden-content {
     color: transparent;
     position: absolute;
     max-width: 300px;
     overflow: hidden;
+  }
 }
 
 @media (max-width: 567px) {
-  .hidden {
+  .hidden-content {
     max-width: 150px;
   }
 }