chore(edit-content): remove type column and display thumbnail in title column (dotCMS#32170)

### Proposed Changes

This pull request includes a variety of changes to improve the styling,
layout, and user experience of the `dot-edit-content-relationship-field`
component and its related elements. Key updates include adjustments to
table and paginator styles, improvements to the HTML structure for
better responsiveness, and updates to localization messages.

### Styling and Layout Improvements:
* Adjusted the `scrollHeight` of the table to `36rem` for better content
visibility (`dot-select-existing-content.component.html`,
`dot-select-existing-content.component.scss`).
[[1]](diffhunk://#diff-ba794904cc95635d9efca07b7e2bfeb948b5b0bb0c8e1e97c777c615398ba011L30-R30)
[[2]](diffhunk://#diff-778cca685214b49b5445efc5613609b68214a24052f4ed77408caeb0c9e6ffb2L7-R7)
* Added styles for paginator buttons and current page display to ensure
consistent height and width
(`dot-select-existing-content.component.scss`).
* Introduced new utility classes (`min-w-12rem`, `min-w-8rem`) for
consistent column width across the table
(`dot-edit-content-relationship-field.component.scss`).

### HTML Structure Enhancements:
* Updated table header and cell structure to dynamically adjust column
widths based on content presence
(`dot-edit-content-relationship-field.component.html`).
[[1]](diffhunk://#diff-f396a55538f81f083a55fe6a0a7d94cff418103cb29da292746fe029264f433dL22-R30)
[[2]](diffhunk://#diff-f396a55538f81f083a55fe6a0a7d94cff418103cb29da292746fe029264f433dL65-R73)
* Removed unnecessary thumbnail border logic and simplified the
thumbnail container structure
(`dot-select-existing-content.component.html`).

### Localization Updates:
* Changed the title and placeholder for the search dialog to improve
clarity and usability (`Language.properties`).
* Updated the placeholder text in the search input field to match the
new localization key (`search.component.html`).

### Checklist
- [x] Tests
- [x] Translations
- [x] Security Implications Contemplated (add notes if applicable)


### Screenshots

| Expected | Current |
|--------|--------|
|
![Image](https://github.com/user-attachments/assets/4a95300c-880c-4ade-a047-64141043c55b)
|
![Image](https://github.com/user-attachments/assets/68e72326-48e7-4e67-a685-ed5e7af53940)
|

Author: nicobytes

core-web/libs/dotcms-scss/angular/dotcms-theme/components/_table.scss

@@ -186,11 +186,7 @@ $dot-table-cell-height: 1.25rem;
                     max-height: 3rem;
                     overflow: hidden;
                     position: relative;
-                    border-radius: $border-radius-md;
                     padding: $spacing-0;
-                    border-color: $color-palette-gray-300;
-                    border-style: solid;
-                    border-width: 0px;
                 }
 
                 .p-row-toggler,
@@ -254,7 +250,6 @@ $dot-table-cell-height: 1.25rem;
             }
 
             &:not(.p-highlight):hover {
-                background: inherit;
                 color: $text-color-hover;
                 transition: background-color ease-in $basic-speed;
                 cursor: default;

core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/header/header.component.html

@@ -1,4 +1,4 @@
-<div class="flex items-center justify-center gap-2">
+<div class="flex items-center justify-center mb-2">
     <span class="p-dialog-title">
         {{ 'dot.file.relationship.dialog.search.title' | dm }}
     </span>

core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/components/search/search.component.html

@@ -5,7 +5,7 @@
             type="text"
             class="w-26rem h-auto"
             (keydown.enter)="doSearch()"
-            [placeholder]="'dot.file.relationship.dialog.search.title' | dm"
+            [placeholder]="'dot.file.relationship.dialog.search.placeholder' | dm"
             formControlName="query" />
         <p-button
             (onClick)="popover.toggle($event, formElement)"

core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html

@@ -27,7 +27,7 @@
             currentPageReportTemplate="{first} - {last} of {totalRecords}"
             [showPageLinks]="false"
             [showFirstLastIcon]="false"
-            scrollHeight="34rem"
+            scrollHeight="36rem"
             styleClass="dotTable p-datatable-existing-content w-full">
             <ng-template pTemplate="header" styleClass="relative" let-columns>
                 <tr>
@@ -41,10 +41,7 @@
                             <p-tableHeaderCheckbox />
                         }
                     </th>
-                    <th scope="col" class="column-thumbnail">
-                        {{ 'dot.file.relationship.dialog.table.type' | dm }}
-                    </th>
-                    <th scope="col" class="max-w-11rem" [pSortableColumn]="'title'">
+                    <th scope="col" [colSpan]="2" class="max-w-11rem" [pSortableColumn]="'title'">
                         <span class="capitalize">
                             {{ 'dot.file.relationship.dialog.table.title' | dm }}
                         </span>
@@ -94,7 +91,7 @@
                         }
                     </td>
                     <td class="column-thumbnail">
-                        <div class="container-thumbnail" [class.border-1]="item.hasTitleImage">
+                        <div class="container-thumbnail">
                             <dot-contentlet-thumbnail
                                 [iconSize]="'30px'"
                                 [contentlet]="item"

core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.scss

@@ -4,7 +4,7 @@
     p-table {
         .dotTable.p-datatable.p-datatable-existing-content {
             .p-datatable-wrapper {
-                height: 34rem;
+                height: 36rem;
             }
             .p-datatable-header {
                 background-color: $white;
@@ -31,6 +31,18 @@
                 max-width: 4.5rem;
                 min-width: 4.5rem;
             }
+
+            .p-paginator .p-paginator-current {
+                height: 2rem;
+                min-height: 2rem;
+            }
+            .p-paginator .p-paginator-prev,
+            .p-paginator .p-paginator-next {
+                height: 2rem;
+                min-height: 2rem;
+                width: 2rem;
+                min-width: 2rem;
+            }
         }
     }
 }

core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/dot-edit-content-relationship-field.component.html

@@ -4,6 +4,7 @@
 @let data = store.data();
 @let hitText = attributes.hitText;
 @let isDisabled = $isDisabled();
+@let isEmpty = data.length === 0;
 
 <p-table
     [value]="data"
@@ -19,14 +20,14 @@
         <p-menu #menu [model]="$menuItems()" [popup]="true" appendTo="body" />
 
         <tr class="relationship-field__table_header">
-            <th scope="col" class="w-3rem"></th>
-            <th scope="col" class="max-w-12rem" style="min-width: 13rem">
+            <th scope="col" class="min-w-3rem"></th>
+            <th scope="col" [class.min-w-12rem]="!isEmpty">
                 {{ 'dot.file.relationship.field.table.title' | dm }}
             </th>
-            <th style="min-width: 8rem">
+            <th scope="col" [class.min-w-8rem]="!isEmpty">
                 {{ 'dot.file.relationship.field.table.language' | dm }}
             </th>
-            <th style="min-width: 8rem">
+            <th scope="col" [class.min-w-8rem]="!isEmpty">
                 {{ 'dot.file.relationship.field.table.status' | dm }}
             </th>
             <th scope="col" class="w-1rem" alignFrozen="right" pFrozenColumn [frozen]="true">
@@ -61,16 +62,13 @@
                     <span class="pi pi-bars text-gray-500 cursor-not-allowed"></span>
                 }
             </td>
-            <td
-                class="max-w-12rem"
-                style="min-width: 13rem"
-                [class.cursor-not-allowed]="isDisabled">
+            <td class="min-w-12rem" [class.cursor-not-allowed]="isDisabled">
                 <p class="truncate-text">{{ item.title }}</p>
             </td>
-            <td style="min-width: 8rem" [class.cursor-not-allowed]="isDisabled">
+            <td class="min-w-8rem" [class.cursor-not-allowed]="isDisabled">
                 {{ item.language | language }}
             </td>
-            <td style="min-width: 8rem" [class.cursor-not-allowed]="isDisabled">
+            <td class="min-w-8rem" [class.cursor-not-allowed]="isDisabled">
                 @let status = item | contentletStatus;
                 <p-chip [styleClass]="'p-chip-sm ' + status.classes" [label]="status.label" />
             </td>

core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/dot-edit-content-relationship-field.component.scss

@@ -37,3 +37,16 @@
         background-color: $color-palette-gray-100;
     }
 }
+.min-w-12rem {
+    min-width: 12rem;
+    width: 12rem;
+    max-width: 12rem;
+}
+.min-w-8rem {
+    min-width: 8rem;
+    width: 8rem;
+    max-width: 8rem;
+}
+.min-w-3rem {
+    min-width: 3rem;
+}

dotCMS/src/main/webapp/WEB-INF/messages/Language.properties

@@ -1230,7 +1230,8 @@ dot.file.relationship.field.table.language=Language
 dot.file.relationship.field.table.status=Status
 dot.file.relationship.field.table.existing.content=Existing Content
 dot.file.relationship.field.table.new.content=New Content
-dot.file.relationship.dialog.search.title=Search
+dot.file.relationship.dialog.search.title=Relationship
+dot.file.relationship.dialog.search.placeholder=Search
 dot.file.relationship.dialog.search.empty.content=No related content available
 dot.file.relationship.dialog.search.btn.clear=Clear All
 dot.file.relationship.dialog.search.btn.search=Search