geonetwork-ui 2.6.0-dev.186d57931 → 2.6.0-dev.34911f182

package/src/libs/feature/dataviz/src/lib/table-view/table-view.component.html

@@ -4,6 +4,7 @@
       *ngIf="tableData$ | async as dataset"
       class="overflow-auto grow"
       [dataset]="dataset"
+      [featureAttributes]="featureAttributes"
       (selected)="onTableSelect($event)"
     ></gn-ui-data-table>
     <gn-ui-loading-mask

package/src/libs/feature/dataviz/src/lib/table-view/table-view.component.ts

@@ -6,11 +6,15 @@ import {
   shareReplay,
   startWith,
   switchMap,
+  tap,
 } from 'rxjs/operators'
 import { BaseReader, FetchError } from '../../../../../../libs/util/data-fetcher/src'
 import { DataService } from '../service/data.service'
 import { DataTableComponent } from '../../../../../../libs/ui/dataviz/src'
-import { DatasetOnlineResource } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  DatasetFeatureCatalog,
+  DatasetOnlineResource,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import {
   LoadingMaskComponent,
@@ -33,6 +37,8 @@ import { CommonModule } from '@angular/common'
   standalone: true,
 })
 export class TableViewComponent {
+  featureAttributes = []
+  @Input() featureCatalog: DatasetFeatureCatalog
   @Input() cacheActive = true
   @Input() set link(value: DatasetOnlineResource) {
     this.currentLink$.next(value)
@@ -52,6 +58,7 @@ export class TableViewComponent {
       }
       this.loading = true
       return this.getDatasetReader(link).pipe(
+        tap((dataset: BaseReader) => this.setProperties(dataset)),
         catchError((error) => {
           this.handleError(error)
           return of(undefined)
@@ -96,4 +103,23 @@ export class TableViewComponent {
     }
     this.loading = false
   }
+
+  setProperties(dataset: BaseReader) {
+    dataset.properties.then((properties) => {
+      const updatedProperties = properties.map((p) => {
+        let label = p.name
+        if (this.featureCatalog) {
+          const attributes = this.featureCatalog.featureTypes[0].attributes
+          const matchingAttribute = attributes.find(
+            (attr) => attr.name === p.name
+          )
+          if (matchingAttribute && matchingAttribute.code) {
+            label = matchingAttribute.code
+          }
+        }
+        return { value: p.name, label }
+      })
+      this.featureAttributes = updatedProperties
+    })
+  }
 }

package/src/libs/feature/editor/src/index.ts

@@ -11,3 +11,4 @@ export * from './lib/components/wizard/wizard.component'
 export * from './lib/components/wizard-field/wizard-field.component'
 export * from './lib/components/wizard-summarize/wizard-summarize.component'
 export * from './lib/components/record-form/form-field'
+export * from './lib/components/multilingual-panel/multilingual-panel.component'

package/src/libs/feature/editor/src/lib/components/multilingual-panel/multilingual-panel.component.html

@@ -0,0 +1,14 @@
+<div
+  class="flex flex-col h-full w-[302px] bg-neutral-100 border-l border-gray-300 py-9 px-3 gap-8"
+>
+  <span class="text-3xl font-title text-black/80 px-2" translate
+    >editor.record.form.multilingual.title</span
+  >
+  <gn-ui-check-toggle
+    class="p-2"
+    [label]="'editor.record.form.multilingual.enable' | translate"
+    [color]="'primary'"
+    [value]="translationsEnabled"
+    (toggled)="translationsEnabled = $event"
+  ></gn-ui-check-toggle>
+</div>

package/src/libs/feature/editor/src/lib/components/multilingual-panel/multilingual-panel.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { CheckToggleComponent } from '../../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-multilingual-panel',
+  standalone: true,
+  imports: [CommonModule, CheckToggleComponent, TranslateModule],
+  templateUrl: './multilingual-panel.component.html',
+  styleUrl: './multilingual-panel.component.css',
+})
+export class MultilingualPanelComponent {
+  translationsEnabled = false
+}

package/src/libs/feature/record/src/lib/data-view/data-view.component.html

@@ -1,13 +1,17 @@
-<div class="w-full h-full flex flex-col p-1">
-  <gn-ui-dropdown-selector
-    *ngIf="dropdownChoices$ | async as choices"
-    [ngClass]="{ hidden: !displaySource }"
-    [title]="'table.select.data' | translate"
-    class="truncate p-1 -mx-1 self-end mb-1"
-    extraBtnClass="!text-primary font-sans font-medium"
-    [choices]="choices"
-    (selectValue)="selectLink($event)"
-  ></gn-ui-dropdown-selector>
+<div class="w-full h-full flex flex-col gap-[13px]">
+  <div
+    class="w-full py-4 px-5 bg-white border border-color-border rounded-lg mt-6"
+  >
+    <gn-ui-dropdown-selector
+      *ngIf="dropdownChoices$ | async as choices"
+      [ngClass]="{ hidden: !displaySource }"
+      [title]="'table.select.data' | translate"
+      class="h-[44px] w-full"
+      extraBtnClass="font-sans font-bold"
+      [choices]="choices"
+      (selectValue)="selectLink($event)"
+    ></gn-ui-dropdown-selector>
+  </div>
   <ng-container *ngIf="hidePreview; else dataView">
     <gn-ui-popup-alert
       type="warning"
@@ -23,12 +27,14 @@
         *ngIf="mode === 'table'"
         [cacheActive]="cacheActive$ | async"
         [link]="selectedLink$ | async"
+        [featureCatalog]="mdViewFacade.featureCatalog$ | async"
       ></gn-ui-table-view>
       <gn-ui-chart-view
         *ngIf="mode === 'chart'"
         (chartConfig$)="setChartConfig($event)"
         [cacheActive]="cacheActive$ | async"
         [link]="selectedLink$ | async"
+        [featureCatalog]="mdViewFacade.featureCatalog$ | async"
       ></gn-ui-chart-view>
     </div>
   </ng-template>

package/src/libs/feature/record/src/lib/data-view-share/data-view-share.component.html

@@ -1,4 +1,4 @@
-<div class="px-5 my-1">
+<div>
   <mat-tab-group
     [selectedIndex]="0"
     animationDuration="0ms"

package/src/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.html

@@ -1,9 +1,9 @@
 <gn-ui-button
   *ngIf="externalViewer"
   (buttonClick)="openInExternalViewer()"
-  type="secondary"
+  type="primary"
   [title]="'record.externalViewer.open' | translate"
-  extraClass="ms-2 !rounded-lg"
+  [extraClass]="extraClass + 'bg-primary ms-2 !rounded-lg'"
 >
   <ng-icon name="matOpenInNew"></ng-icon>
 </gn-ui-button>

package/src/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.ts

@@ -36,6 +36,7 @@ export const EXTERNAL_VIEWER_OPEN_NEW_TAB = new InjectionToken<boolean>(
 })
 export class ExternalViewerButtonComponent {
   @Input() link: DatasetOnlineResource
+  @Input() extraClass = ''
 
   get externalViewer() {
     return !!this.urlTemplate && !!this.supportedLinkLayerType

package/src/libs/feature/record/src/lib/map-view/map-view.component.html

@@ -1,18 +1,24 @@
-<div class="w-full h-full flex flex-col p-1">
-  <div class="w-full flex justify-end">
-    <gn-ui-dropdown-selector
-      [ngClass]="{ hidden: !displaySource }"
-      class="truncate p-1 -mx-1 mb-1"
-      extraBtnClass="!text-primary font-sans font-medium"
-      [title]="'map.select.layer' | translate"
-      [choices]="dropdownChoices$ | async"
-      (selectValue)="selectLinkToDisplay($event)"
-    ></gn-ui-dropdown-selector>
-    <gn-ui-external-viewer-button
-      class="shrink-0 py-1 place-self-end"
-      [link]="selectedLink$ | async"
-    >
-    </gn-ui-external-viewer-button>
+<div class="w-full h-full flex flex-col gap-[13px]">
+  <div
+    class="flex py-4 px-5 bg-white border border-color-border rounded-lg mt-6"
+  >
+    <div class="grow min-w-0">
+      <gn-ui-dropdown-selector
+        [ngClass]="{ hidden: !displaySource }"
+        class="w-full"
+        extraBtnClass="font-sans font-bold"
+        [title]="'map.select.layer' | translate"
+        [choices]="dropdownChoices$ | async"
+        (selectValue)="selectLinkToDisplay($event)"
+      ></gn-ui-dropdown-selector>
+    </div>
+    <div class="self-end">
+      <gn-ui-external-viewer-button
+        extraClass="w-[44px] h-[44px]"
+        [link]="selectedLink$ | async"
+      >
+      </gn-ui-external-viewer-button>
+    </div>
   </div>
   <ng-container *ngIf="hidePreview; else mapView">
     <gn-ui-popup-alert
@@ -49,7 +55,10 @@
         >
           <ng-icon name="matClose" class="align-middle text-sm"></ng-icon>
         </gn-ui-button>
-        <gn-ui-feature-detail [feature]="selection"></gn-ui-feature-detail>
+        <gn-ui-feature-detail
+          [featureCatalog]="mdViewFacade.featureCatalog$ | async"
+          [feature]="selection"
+        ></gn-ui-feature-detail>
       </div>
 
       <div

package/src/libs/feature/search/src/index.ts

@@ -17,7 +17,7 @@ export * from './lib/facets/facets.module'
 export * from './lib/facets/facets-container/facets-container.component'
 export * from './lib/records-metrics/records-metrics.component'
 export * from './lib/favorites/favorite-star/favorite-star.component'
-export * from './lib/results-hits-number/results-hits.container.component'
+export * from './lib/results-hits/results-hits.container.component'
 export * from './lib/results-layout/results-layout.component'
 export * from './lib/sort-by/sort-by.component'
 export * from './lib/state/container/search-state.container.directive'

package/src/libs/feature/search/src/lib/feature-search.module.ts

@@ -4,6 +4,7 @@ import { UiSearchModule } from '../../../../../libs/ui/search/src'
 import { EffectsModule } from '@ngrx/effects'
 import { StoreModule } from '@ngrx/store'
 import { TranslateModule } from '@ngx-translate/core'
+import { NgIconsModule } from '@ng-icons/core'
 import { FacetsModule } from './facets/facets.module'
 import { FuzzySearchComponent } from './fuzzy-search/fuzzy-search.component'
 import { RecordsMetricsComponent } from './records-metrics/records-metrics.component'
@@ -12,7 +13,7 @@ import { ResultsListContainerComponent } from './results-list/results-list.conta
 import { SortByComponent } from './sort-by/sort-by.component'
 import { SearchEffects } from './state/effects'
 import { initialState, reducer, SEARCH_FEATURE_KEY } from './state/reducer'
-import { ResultsHitsContainerComponent } from './results-hits-number/results-hits.container.component'
+import { ResultsHitsContainerComponent } from './results-hits/results-hits.container.component'
 import { SearchStateContainerDirective } from './state/container/search-state.container.directive'
 import {
   AutocompleteComponent,
@@ -20,7 +21,11 @@ import {
   UiInputsModule,
 } from '../../../../../libs/ui/inputs/src'
 import { NgModule } from '@angular/core'
-import { ErrorComponent, UiElementsModule } from '../../../../../libs/ui/elements/src'
+import {
+  ErrorComponent,
+  KindBadgeComponent,
+  UiElementsModule,
+} from '../../../../../libs/ui/elements/src'
 import { FilterDropdownComponent } from './filter-dropdown/filter-dropdown.component'
 import {
   SpinningLoaderComponent,
@@ -58,6 +63,8 @@ import { FavoriteStarComponent } from './favorites/favorite-star/favorite-star.c
     ErrorComponent,
     FavoriteStarComponent,
     DateRangeDropdownComponent,
+    NgIconsModule,
+    KindBadgeComponent,
   ],
   exports: [
     SortByComponent,

package/src/libs/feature/search/src/lib/results-hits/results-hits.container.component.html

@@ -0,0 +1,16 @@
+<div
+  class="flex flex-col gap-3 sm:flex-row justify-between"
+  [ngClass]="{
+    'sm:items-center': (searchFacade.resultsHits$ | async) !== 0,
+  }"
+>
+  <gn-ui-results-hits-number
+    [loading]="searchFacade.isLoading$ | async"
+    [hits]="searchFacade.resultsHits$ | async"
+  ></gn-ui-results-hits-number>
+  <gn-ui-results-hits-search-kind
+    (selectionChanged)="onSelectionChanged($event)"
+    [choices]="filterChoices$ | async"
+    [selected]="selected$ | async"
+  ></gn-ui-results-hits-search-kind>
+</div>

package/src/libs/feature/search/src/lib/results-hits/results-hits.container.component.ts

@@ -0,0 +1,59 @@
+import {
+  catchError,
+  filter,
+  map,
+  Observable,
+  of,
+  startWith,
+  switchMap,
+} from 'rxjs'
+import { Component, OnInit } from '@angular/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { SearchFacade } from '../state/search.facade'
+import { FieldAvailableValue, FieldValue } from '../utils/service/fields'
+import { SearchService } from '../utils/service/search.service'
+import { FieldsService } from '../utils/service/fields.service'
+
+marker('search.filters.recordKind.all')
+marker('search.filters.recordKind.dataset')
+marker('search.filters.recordKind.service')
+marker('search.filters.recordKind.reuse')
+
+@Component({
+  selector: 'gn-ui-results-hits',
+  templateUrl: './results-hits.container.component.html',
+  styleUrls: ['./results-hits.container.component.css'],
+})
+export class ResultsHitsContainerComponent implements OnInit {
+  fieldName = 'recordKind'
+  filterChoices$: Observable<FieldAvailableValue[]>
+  selected$: Observable<FieldValue[]>
+
+  constructor(
+    protected searchFacade: SearchFacade,
+    private searchService: SearchService,
+    private fieldsService: FieldsService
+  ) {}
+
+  ngOnInit() {
+    this.selected$ = this.searchFacade.searchFilters$.pipe(
+      switchMap((filters) =>
+        this.fieldsService.readFieldValuesFromFilters(filters)
+      ),
+      map((fieldValues) => fieldValues[this.fieldName]),
+      filter((selected) => !!selected),
+      startWith([]),
+      catchError(() => of([]))
+    ) as Observable<FieldValue[]>
+
+    this.filterChoices$ = <Observable<FieldAvailableValue[]>>(
+      this.fieldsService.getAvailableValues(this.fieldName)
+    )
+  }
+
+  onSelectionChanged(values: string[]) {
+    this.fieldsService
+      .buildFiltersFromFieldValues({ [this.fieldName]: values })
+      .subscribe((filters) => this.searchService.updateFilters(filters))
+  }
+}

package/src/libs/feature/search/src/lib/utils/service/fields.service.ts

@@ -10,8 +10,10 @@ import {
   MultilingualSearchField,
   OrganizationSearchField,
   OwnerSearchField,
+  ResourceTypeLegacyField,
   SimpleSearchField,
   TranslatedSearchField,
+  RecordKindField,
   UserSearchField,
 } from './fields'
 import { forkJoin, Observable, of } from 'rxjs'
@@ -47,11 +49,8 @@ export class FieldsService {
   protected fields = {
     organization: new OrganizationSearchField(this.injector),
     format: new SimpleSearchField('format', this.injector, 'asc'),
-    resourceType: new TranslatedSearchField(
-      'resourceType',
-      this.injector,
-      'asc'
-    ),
+    resourceType: new ResourceTypeLegacyField(this.injector), // Deprecated, use `recordKind` instead
+    recordKind: new RecordKindField(this.injector),
     representationType: new TranslatedSearchField(
       'cl_spatialRepresentationType.key',
       this.injector,

package/src/libs/feature/search/src/lib/utils/service/fields.ts

@@ -22,6 +22,7 @@ import {
 } from '../../../../../../../libs/api/repository/src'
 import { LangService } from '../../../../../../../libs/util/i18n/src'
 import { formatUserInfo } from '../../../../../../../libs/util/shared/src'
+import { PossibleResourceTypes } from '../../../../../../../libs/api/metadata-converter/src'
 
 export type FieldType = 'values' | 'dateRange'
 
@@ -29,6 +30,7 @@ export type FieldValue = string | number
 export interface FieldAvailableValue {
   value: FieldValue
   label: string
+  count?: number
 }
 
 export abstract class AbstractSearchField {
@@ -80,6 +82,7 @@ export class SimpleSearchField implements AbstractSearchField {
         const bucketPromises = buckets.map(async (bucket) => ({
           label: `${await this.getBucketLabel(bucket)} (${bucket.count})`,
           value: bucket.term.toString(),
+          count: bucket.count,
         }))
         return Promise.all(bucketPromises)
       })
@@ -480,3 +483,99 @@ export class AvailableServicesField extends SimpleSearchField {
     return of(values)
   }
 }
+
+/**
+ * This class is meant to be used with the legacy filter on `resourceType` (now deprecated, the use of `recordKind` field is recommended).
+ * Since creating filters on the same ES field is not possible, in order to make the resource type filter still working,
+ * we create an ES on the fly: `resourceTypeLegacy` that references the `resourceType` under the hood.
+ * @deprecated Use `recordKind` field instead.
+ */
+export class ResourceTypeLegacyField extends TranslatedSearchField {
+  constructor(injector: Injector) {
+    super('resourceTypeLegacy', injector, 'asc')
+
+    // Ask ES to create a field on the fly: 'resourceTypeLegacy' that is in fact, 'resourceType'
+    this.esService.registerRuntimeField(
+      'resourceTypeLegacy',
+      `for (resourceType in doc.resourceType) { emit(resourceType) }`
+    )
+  }
+}
+
+export class RecordKindField extends SimpleSearchField {
+  TYPE_MAPPING = {
+    dataset: ['dataset', 'series', 'featureCatalog'],
+    service: ['service'],
+    reuse: Object.entries(PossibleResourceTypes)
+      .filter(([_, v]) => v === 'reuse')
+      .map(([k]) => k), // = ['application', 'map', 'staticMap', 'interactiveMap', ...]
+  }
+
+  constructor(injector: Injector) {
+    super('resourceType', injector, 'asc')
+  }
+
+  getAvailableValues(): Observable<FieldAvailableValue[]> {
+    return this.repository.aggregate(this.getAggregations()).pipe(
+      map(
+        (response) =>
+          (response[this.esFieldName] as AggregationBuckets).buckets || []
+      ),
+      map((buckets: TermBucket[]) => {
+        const counts = buckets.reduce(
+          (acc, { term, count }) => {
+            const value = term.toString()
+            const key = this.TYPE_MAPPING.reuse.includes(value)
+              ? 'reuse'
+              : this.TYPE_MAPPING.dataset.includes(value)
+                ? 'dataset'
+                : value
+
+            acc[key] = (acc[key] || 0) + count
+            return acc
+          },
+          {} as Record<string, number>
+        )
+
+        return Object.keys(this.TYPE_MAPPING).map((type) => ({
+          label: type,
+          value: type,
+          count: counts[type] ?? 0,
+        }))
+      })
+    )
+  }
+
+  getFiltersForValues(values: FieldValue[]): Observable<FieldFilters> {
+    const filters = {
+      [this.esFieldName]: values.reduce((acc, value) => {
+        if (value === '') return { ...acc, [value]: true }
+
+        const keysToAdd = this.TYPE_MAPPING[value] || [value]
+        keysToAdd.forEach((key: string) => (acc[key] = true))
+
+        return acc
+      }, {}),
+    }
+
+    return of(filters)
+  }
+
+  getValuesForFilter(filters: FieldFilters): Observable<FieldValue[]> {
+    const filter = filters[this.esFieldName]
+    if (!filter) return of([])
+
+    const activeValues = Object.keys(filter).filter((v) => filter[v])
+    const activeTypes = Object.keys(this.TYPE_MAPPING).filter((type) =>
+      this.TYPE_MAPPING[type].every((t: string) => activeValues.includes(t))
+    )
+
+    // Allow unknown values eg. 'type=somethingnotexist' (for UI to select none)
+    const allTypes = [].concat(...Object.values(this.TYPE_MAPPING))
+    const unknownValues = activeValues.filter(
+      (value) => !allTypes.includes(value)
+    )
+
+    return of([...activeTypes, ...unknownValues])
+  }
+}

package/src/libs/ui/dataviz/src/lib/chart/chart.component.ts

@@ -57,6 +57,7 @@ export class ChartComponent implements OnChanges, AfterViewInit {
     this.dataRaw = value
   }
   @Input() labelProperty: string
+  @Input() prettyLabel: string
   @Input() valueProperty: string
   @Input() secondaryValueProperty: string
   @Input() type: InputChartType = 'bar'
@@ -95,7 +96,7 @@ export class ChartComponent implements OnChanges, AfterViewInit {
       labels: this.getDataProxy(this.labelProperty) as string[],
       datasets: [
         {
-          label: this.valueProperty,
+          label: this.prettyLabel,
           data,
         },
       ],

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.html

@@ -8,21 +8,24 @@
       [matSortDisableClear]="true"
       *ngrxLet="properties$ as properties"
     >
-      <ng-container *ngFor="let prop of properties" [matColumnDef]="prop">
+      <ng-container
+        *ngFor="let attr of _featureAttributes"
+        [matColumnDef]="attr.value"
+      >
         <th
           mat-header-cell
           *matHeaderCellDef
           mat-sort-header
           class="text-sm text-black bg-white"
         >
-          {{ prop }}
+          {{ attr.label }}
         </th>
         <td
           mat-cell
           *matCellDef="let element"
           class="whitespace-nowrap pr-1 truncate"
         >
-          {{ element[prop] }}
+          {{ element[attr.value] }}
         </td>
       </ng-container>
 

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.ts

@@ -61,13 +61,14 @@ export interface TableItemModel {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
+  _featureAttributes = []
+  @Input() set featureAttributes(value: { value: string; label: string }[]) {
+    this._featureAttributes = value
+    this.properties$.next(value.map((attr) => attr.value))
+  }
   @Input() set dataset(value: BaseReader) {
-    this.properties$.next(null)
     this.dataset_ = value
     this.dataset_.load()
-    this.dataset_.properties.then((properties) =>
-      this.properties$.next(properties.map((p) => p.name))
-    )
     this.dataset_.info.then((info) => (this.count = info.itemsCount))
   }
   @Input() activeId: TableItemId

package/src/libs/ui/elements/src/index.ts

@@ -7,6 +7,7 @@ export * from './lib/downloads-list/downloads-list.component'
 export * from './lib/error/error.component'
 export * from './lib/image-input/image-input.component'
 export * from './lib/image-overlay-preview/image-overlay-preview.component'
+export * from './lib/kind-badge/kind-badge.component'
 export * from './lib/link-card/link-card.component'
 export * from './lib/markdown-editor/markdown-editor.component'
 export * from './lib/markdown-parser/markdown-parser.component'

package/src/libs/ui/elements/src/lib/api-card/api-card.component.html

@@ -1,12 +1,12 @@
 <div
-  class="group flex justify-between rounded filter overflow-hidden"
+  class="group flex justify-between rounded filter overflow-hidden card-shadow"
   [ngClass]="cardClass"
 >
   <ng-container *ngIf="size !== 'S'">
-    <div>
+    <div class="flex-1 min-w-0">
       <ng-container *ngTemplateOutlet="content"></ng-container>
     </div>
-    <div class="flex items-center">
+    <div class="flex items-center min-w-[32px]">
       <ng-container *ngTemplateOutlet="buttons"></ng-container>
     </div>
   </ng-container>
@@ -51,7 +51,7 @@
 </ng-template>
 
 <ng-template #content>
-  <div>
+  <div class="flex-1 min-w-0">
     <div class="gn-ui-card-title">
       {{ link.description || link.name }}
     </div>

package/src/libs/ui/elements/src/lib/download-item/download-item.component.html

@@ -1,20 +1,20 @@
 <a
   href="{{ link.url }}"
   target="_blank"
-  class="group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden"
+  class="group flex flex-row justify-between card-shadow cursor-pointer rounded overflow-hidden w-full"
   rel="noopener"
   [ngClass]="cardClass"
 >
-  <div class="flex flex-col justify-between">
+  <div class="flex flex-col flex-1 justify-between min-w-0">
     <div class="gn-ui-card-title" [title]="link.description || link.name">
       {{ link.description || link.name }}
     </div>
     <div class="gn-ui-card-detail">
       {{ link.name }}
     </div>
-    <div class="flex flex-row gap-2 items-center pt-1">
+    <div class="flex flex-row gap-2 items-center pt-1 min-w-0">
       <span
-        class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100"
+        class="inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100 whitespace-nowrap"
         [style.background-color]="color"
         data-cy="download-format"
         >{{ format || ('downloads.format.unknown' | translate) }}</span
@@ -24,7 +24,10 @@
       >
     </div>
   </div>
-  <div class="flex" [ngClass]="size === 'S' ? 'items-end' : 'items-center'">
+  <div
+    class="flex min-w-[32px] flex-shrink-0"
+    [ngClass]="size === 'S' ? 'items-end' : 'items-center'"
+  >
     <div class="gn-ui-card-icon">
       <ng-icon
         class="inline-block card-icon align-middle"