UI and filter fixes (#2686)

* Use primitive string in recommendation row props
* Use unique keys in recommendation rows

The keys for the cards used while loading clash with the ids of the actual cards, causing a list unique key warning.

* List filter alignment tweaks
* Rework list hook filtering
* Internationalise checksum correctly

ui/v2.5/src/components/List/ListFilter.tsx

@@ -217,8 +217,8 @@ export const ListFilter: React.FC<IListFilterProps> = ({
 
     return (
       <>
-        <div className="d-flex mb-1">
-          <div className="mr-2 flex-grow-1 query-text-field-group">
+        <div className="mb-2 mr-2 d-flex">
+          <div className="flex-grow-1 query-text-field-group">
             <FormControl
               ref={queryRef}
               placeholder={`${intl.formatMessage({ id: "actions.search" })}…`}
@@ -240,7 +240,7 @@ export const ListFilter: React.FC<IListFilterProps> = ({
           </div>
         </div>
 
-        <ButtonGroup className="mr-2 mb-1">
+        <ButtonGroup className="mr-2 mb-2">
           <Dropdown>
             <OverlayTrigger
               placement="top"
@@ -277,7 +277,7 @@ export const ListFilter: React.FC<IListFilterProps> = ({
           </OverlayTrigger>
         </ButtonGroup>
 
-        <Dropdown as={ButtonGroup} className="mr-2 mb-1">
+        <Dropdown as={ButtonGroup} className="mr-2 mb-2">
           <InputGroup.Prepend>
             <Dropdown.Toggle variant="secondary">
               {currentSortBy
@@ -322,13 +322,13 @@ export const ListFilter: React.FC<IListFilterProps> = ({
           )}
         </Dropdown>
 
-        <div>
+        <div className="mb-2">
           <Form.Control
             as="select"
             ref={perPageSelect}
             onChange={(e) => onChangePageSize(e.target.value)}
             value={filter.itemsPerPage.toString()}
-            className="btn-secondary mx-1 mb-1"
+            className="btn-secondary"
           >
             {pageSizeOptions.map((s) => (
               <option value={s.value} key={s.value}>

ui/v2.5/src/components/List/ListOperationButtons.tsx

@@ -100,7 +100,7 @@ export const ListOperationButtons: React.FC<IListOperationButtonsProps> = ({
 
     if (buttons.length > 0) {
       return (
-        <ButtonGroup className="ml-2 mb-1">
+        <ButtonGroup className="ml-2 mb-2">
           {buttons.map((button) => {
             return (
               <OverlayTrigger
@@ -176,7 +176,7 @@ export const ListOperationButtons: React.FC<IListOperationButtonsProps> = ({
 
     if (options.length > 0) {
       return (
-        <Dropdown className="mb-1">
+        <Dropdown>
           <Dropdown.Toggle variant="secondary" id="more-menu">
             <Icon icon={faEllipsisH} />
           </Dropdown.Toggle>
@@ -192,7 +192,7 @@ export const ListOperationButtons: React.FC<IListOperationButtonsProps> = ({
     <>
       {maybeRenderButtons()}
 
-      <div className="mx-2">{renderMore()}</div>
+      <div className="mx-2 mb-2">{renderMore()}</div>
     </>
   );
 };

ui/v2.5/src/components/List/ListViewOptions.tsx

@@ -110,7 +110,7 @@ export const ListViewOptions: React.FC<IListViewOptionsProps> = ({
     }
 
     return (
-      <ButtonGroup>
+      <ButtonGroup className="mb-2">
         {displayModeOptions.map((option) => (
           <OverlayTrigger
             key={option}
@@ -140,9 +140,9 @@ export const ListViewOptions: React.FC<IListViewOptionsProps> = ({
   function maybeRenderZoom() {
     if (onSetZoom && displayMode === DisplayMode.Grid) {
       return (
-        <div className="align-middle">
+        <div className="ml-2 mb-2 d-none d-sm-inline-flex">
           <Form.Control
-            className="zoom-slider d-none d-sm-inline-flex ml-3"
+            className="zoom-slider ml-1"
             type="range"
             min={minZoom}
             max={maxZoom}
@@ -158,7 +158,7 @@ export const ListViewOptions: React.FC<IListViewOptionsProps> = ({
 
   return (
     <>
-      <ButtonGroup>{maybeRenderDisplayModeOptions()}</ButtonGroup>
+      {maybeRenderDisplayModeOptions()}
       {maybeRenderZoom()}
     </>
   );