assets-32: break long titles so the edit button is not hidden. same f…

…or the search result in order to display the entire title (#44)
swisstopo · Mar 13, 2024 · 918174a · 918174a
1 parent c3fbc62
commit 918174a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/apps/client-asset-sg/src/styles.scss b/apps/client-asset-sg/src/styles.scss
@@ -877,3 +877,7 @@ input {
 .ellipsis {
     @include mixins.text-ellipsis;
 }
+
+.break-word {
+  word-break: break-all;
+}
diff --git a/libs/asset-viewer/src/lib/components/asset-search-detail/asset-search-detail.component.html b/libs/asset-viewer/src/lib/components/asset-search-detail/asset-search-detail.component.html
@@ -16,7 +16,7 @@
         <ng-container *rxLet="rdAssetDetail$ | push; let rdAssetDetail">
             <ng-container *ngIf="rdAssetDetail._tag === 'RemoteSuccess'">
                 <div class="flex flex-row justify-between mb-4">
-                    <div class="text-dark-red font-bold mt-2.5" [innerHTML]="rdAssetDetail.value.titlePublic"></div>
+                    <div class="text-dark-red break-word font-bold mt-2.5" [innerHTML]="rdAssetDetail.value.titlePublic"></div>
                     <a
                         *ngIf="null | isEditor"
                         asset-sg-icon-button

diff --git a/.../asset-viewer/src/lib/components/asset-search-results/asset-search-results.component.html b/.../asset-viewer/src/lib/components/asset-search-results/asset-search-results.component.html
@@ -50,7 +50,7 @@
                             [routerLink]="['.']"
                             [queryParams]="{ assetId: asset.assetId }"
                             queryParamsHandling="merge"
-                            class="asset-title-public"
+                            class="asset-title-public break-word"
                             [class.active]="currentAssetId._tag === 'Some' && asset.assetId === currentAssetId.value"
                             [innerHTML]="asset.titlePublic"></a>
                         <div class="asset-kind-format">