Adjust relate field styling

angular.json

@@ -27,7 +27,7 @@
             "styles": [
               "node_modules/bootstrap-css-only/css/bootstrap.min.css",
               "core/app/shell/src/themes/suite8/css/style.scss",
-              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
+              "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
               "node_modules/primeng/resources/primeng.min.css"
             ],
             "stylePreprocessorOptions": {

config/services/ui/ui.yaml

@@ -40,9 +40,9 @@ parameters:
     record_modal_max_height: 620
     inline_confirmation_loading_delay: 300
     multiselect_max_number:
-      XSmall: 2
-      Small: 2
-      Medium: 4
+      XSmall: 20
+      Small: 20
+      Medium: 20
       Large: 20
       XLarge: 20
     displayed_quick_filters:

core/app/shell/src/themes/suite8/css/abstracts/_variables.scss

@@ -97,7 +97,9 @@ $dark-purple: #be79be;
 $light-purple: #f8f4f8;
 $mild-blue: #8ab2ba;
 $light-blue: #f2f6f7;
-$border-focus-blue:#80bdff;
+$baby-blue: #80bdff;
+$border-focus-blue:$baby-blue;
+
 
 $thick-green:#83bb73;
 $lighter-green:#f1ffed;

core/app/shell/src/themes/suite8/css/fields/_relate.scss

@@ -0,0 +1,124 @@
+/**
+ * SuiteCRM is a customer relationship management program developed by SalesAgility Ltd.
+ * Copyright (C) 2024 SalesAgility Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License version 3 as published by the
+ * Free Software Foundation with the addition of the following permission added
+ * to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
+ * IN WHICH THE COPYRIGHT IS OWNED BY SALESAGILITY, SALESAGILITY DISCLAIMS THE
+ * WARRANTY OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * In accordance with Section 7(b) of the GNU Affero General Public License
+ * version 3, these Appropriate Legal Notices must retain the display of the
+ * "Supercharged by SuiteCRM" logo. If the display of the logos is not reasonably
+ * feasible for technical reasons, the Appropriate Legal Notices must display
+ * the words "Supercharged by SuiteCRM".
+ */
+
+.field-type-relate {
+  p-dropdown {
+    .p-inputtext {
+      font-size: .875rem;
+    }
+
+    .p-dropdown-trigger-icon {
+      font-size: .875rem;
+      svg {
+        fill: $midnight-grey;
+      }
+    }
+
+
+    .p-dropdown-filter-container {
+      .p-dropdown-filter-search-icon {
+        display: inline-block;
+        position: absolute;
+        top: 0.35rem;
+        right: 0.5rem;
+        line-height: normal;
+        float: right;
+        fill: $midnight-grey;
+        font-size: 90%;
+      }
+    }
+
+    .p-dropdown.p-component.p-inputwrapper {
+      justify-content: space-between;
+
+      >p-overlay {
+        display: contents;
+      }
+
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+
+      span.p-element.p-dropdown-label.p-inputtext {
+        display: table-cell;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 100%;
+      }
+
+      .p-dropdown-trigger {
+        display: table-cell;
+        width: 1.7rem;
+      }
+    }
+
+    .p-dropdown-item {
+      font-size: .875rem;
+      line-height: .875rem;
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: table-cell;
+        vertical-align: middle;
+        width: 100%
+      }
+    }
+
+    .p-dropdown-item.p-element.p-focus {
+      background: rgba($baby-blue, .3);
+      color: inherit;
+    }
+
+    .p-dropdown-item.p-highlight {
+      background: $extra-light-grey;
+      color: inherit;
+    }
+
+    .p-dropdown-items {
+      padding-inline-start: 0;
+      margin-bottom: 0;
+    }
+
+    .p-dropdown-label {
+      padding: 0.25rem 0.5rem;
+    }
+
+    .p-dropdown-filter.p-inputtext.p-component {
+      padding: 0.25rem 0.5rem;
+    }
+
+    .p-dropdown-panel .p-dropdown-header {
+      padding: 0.5rem 0.7rem;
+    }
+  }
+}

core/app/shell/src/themes/suite8/css/style.scss

@@ -110,3 +110,4 @@
 @import 'fields/composite-mobile';
 @import 'fields/full-name';
 @import 'fields/icons';
+@import 'fields/relate';

core/app/shell/src/themes/suite8/images/down_carret.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+    <path fill='666666' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 01.753 1.659l-4.796 5.48a1 1 0 01-1.506 0z'/>
+</svg>