update MARC preview styles

folio-org · Oct 22, 2024 · cd21f40 · cd21f40
1 parent 29cdc45
commit cd21f40
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 10 deletions.
diff --git a/src/components/ComplexLookupField/MarсPreviewComplexLookup.scss b/src/components/ComplexLookupField/MarсPreviewComplexLookup.scss
@@ -3,6 +3,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
+    overflow: hidden;
   }
 
   &-sub-label-date {

diff --git a/src/components/ComplexLookupField/MarсPreviewComplexLookup.tsx b/src/components/ComplexLookupField/MarсPreviewComplexLookup.tsx
@@ -25,10 +25,10 @@ export const MarсPreviewComplexLookup: FC<MarсPreviewComplexLookupProps> = ({
     </Button>
   );
 
-  const subLabel = (
+  const renderSubLabel = () => (
     <>
       {marcPreviewMetadata?.headingType} • <FormattedMessage id="ld.lastUpdated" />:
-      <span className='marc-preview-sub-label-date'>
+      <span className="marc-preview-sub-label-date">
         <FormattedDate value={new Date(marcPreviewData?.metadata.updatedDate ?? 'now')} />
       </span>
     </>
@@ -48,12 +48,14 @@ export const MarсPreviewComplexLookup: FC<MarсPreviewComplexLookupProps> = ({
         <div className="marc-preview-container">
           <SearchControlPane
             label={marcPreviewMetadata?.title || ''}
-            subLabel={subLabel}
+            renderSubLabel={renderSubLabel}
             renderCloseButton={renderCloseButton}
           >
-            <Button type={ButtonType.Highlighted} onClick={onClickAssignButton}>
-              <FormattedMessage id="ld.assign" />
-            </Button>
+            <div>
+              <Button type={ButtonType.Highlighted} onClick={onClickAssignButton}>
+                <FormattedMessage id="ld.assign" />
+              </Button>
+            </div>
           </SearchControlPane>
           <div className="marc-preview-content">
             <div className="marc-preview-content-title">

diff --git a/src/components/SearchControlPane/SearchControlPane.scss b/src/components/SearchControlPane/SearchControlPane.scss
@@ -9,15 +9,22 @@
   align-items: center;
 
   &-title {
+    display: flex;
+    flex-direction: column;
     flex: 1;
     text-align: center;
+    padding: 0 1rem;
+    overflow: hidden;
   }
 
   &-mainLabel {
     font-size: 0.875rem;
     line-height: 1.3125rem;
     font-weight: 700;
     color: #000;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   &-subLabel {

diff --git a/src/components/SearchControlPane/SearchControlPane.tsx b/src/components/SearchControlPane/SearchControlPane.tsx
@@ -10,7 +10,7 @@ import './SearchControlPane.scss';
 type SearchControlPaneProps = {
   children?: ReactElement;
   label: string | ReactElement;
-  segmentsConfig: PrimarySegmentsConfig;
+  segmentsConfig?: PrimarySegmentsConfig;
   renderSubLabel?: (count: number) => ReactElement;
   renderCloseButton?: () => ReactElement;
 };
@@ -25,15 +25,21 @@ export const SearchControlPane: FC<SearchControlPaneProps> = ({
   const searchResultsMetadata = useRecoilValue(state.search.pageMetadata);
   const { navigationSegment } = useSearchContext();
   const selectedSegment = navigationSegment?.value;
-  const isVisibleSubLabel = segmentsConfig[selectedSegment as SearchSegment]?.isVisibleSubLabel;
+  const isVisibleSubLabel = segmentsConfig
+    ? segmentsConfig[selectedSegment as SearchSegment]?.isVisibleSubLabel
+    : !!renderSubLabel;
 
   return (
     <div className={classNames(['search-control-pane', IS_EMBEDDED_MODE && 'search-control-pane-embedded'])}>
       {renderCloseButton?.()}
       <div className="search-control-pane-title">
-        <div className="search-control-pane-mainLabel">{label}</div>
+        <div className="search-control-pane-mainLabel">
+          <span>{label}</span>
+        </div>
         {isVisibleSubLabel && !!renderSubLabel && (
-          <div className="search-control-pane-subLabel">{renderSubLabel?.(searchResultsMetadata?.totalElements)}</div>
+          <div className="search-control-pane-subLabel">
+            <span>{renderSubLabel?.(searchResultsMetadata?.totalElements)}</span>
+          </div>
         )}
       </div>
       {children}