fix: on demand search squishing

asfadmin · Apr 9, 2024 · 2c335ca · 2c335ca
1 parent 7b40faf
commit 2c335ca
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/app/components/results-menu/scenes-list/scene/scene.component.html b/src/app/components/results-menu/scenes-list/scene/scene.component.html
@@ -21,7 +21,9 @@
 
   <div [ngClass]="{
     'baseline-flex': searchType === SearchTypes.BASELINE && breakpoint > breakpoints.SMALL,
-    'div-flex': searchType !== SearchTypes.BASELINE || breakpoint <= breakpoints.SMALL }">
+    'div-flex': searchType !== SearchTypes.BASELINE || breakpoint <= breakpoints.SMALL }"
+    class="detail-bar"
+    >
     <div class="div-flex-column">
       <div class="div-flex"
            [title]="scene.metadata.fileName || scene.name"
@@ -48,7 +50,7 @@
       </div>
     </div>
 
-    <div class="div-flex date-time" matLine>
+    <div class="date-time" matLine>
       <ng-container *ngIf="scene.metadata.job">
         {{ scene.metadata.job.job_type }}
         <br *ngIf="breakpoint === breakpoints.MOBILE && searchType === SearchTypes.CUSTOM_PRODUCTS"> -
@@ -62,13 +64,13 @@
             {{ scene.metadata.opera.validityStartDate | fullDate }}
         </ng-container>
 
-        <ng-container *ngIf="
+        <span *ngIf="
           breakpoint > breakpoints.MOBILE &&
           searchType !== SearchTypes.BASELINE &&
           !scene.metadata?.opera?.validityStartDate"
           matTooltip="{{'SCENE_START_TIME' | translate}}">
             {{ scene.metadata.date | fullDate }}
-        </ng-container>
+      </span>
 
         <ng-container *ngIf="
           breakpoint === breakpoints.MOBILE ||

diff --git a/src/app/components/results-menu/scenes-list/scene/scene.component.scss b/src/app/components/results-menu/scenes-list/scene/scene.component.scss
@@ -15,4 +15,7 @@
 }
 .div-flex {
   line-height: initial;
+}
+.detail-bar {
+  min-width: 0;
 }
diff --git a/src/app/components/results-menu/scenes-list/scenes-list.component.scss b/src/app/components/results-menu/scenes-list/scenes-list.component.scss
@@ -64,6 +64,9 @@
 
 .date-time {
   font-size: 14px !important;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .mobile-size .mat-mdc-list-base .mat-mdc-list-item {