UI layout fix: Overview props small, numeric

src/accessions/ui/OverviewPage.tsx

@@ -191,6 +191,9 @@ class BrowsePage extends React.Component<IOverviewPageProps, any> {
                 { overviewsTerms && overviewsTerms.get('available') && overviewsTerms.get('available').length > 2 &&
                   <PropertiesCard propertiesList={ overviewsTerms.get('available').map((term) => ({title: t([`accessions.common.available.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('available', term, term.count) })) } title={ t(`accessions.common.overview.available`) } small propertyItemProps={ { numeric: true } } />
                 }
+                { overviewsTerms && overviewsTerms.get('historic') && overviewsTerms.get('historic').length > 2 &&
+                  <PropertiesCard propertiesList={ overviewsTerms.get('historic').map((term) => ({title: t([`accessions.common.historic.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('historic', term, term.count) })) } title={ t(`accessions.common.overview.historic`) } small propertyItemProps={ { numeric: true } } />
+                }
                 { overviewsTerms && overviewsTerms.get('sgsv') && overviewsTerms.get('sgsv').length > 2 &&
                   <PropertiesCard propertiesList={ overviewsTerms.get('sgsv').map((term) => ({title: t([`accessions.common.sgsv.${term.term}`, `accessions.common.overview.${term.term}`]), value: filterByTerm('sgsv', term, term.count) })) } title={ t(`accessions.common.overview.sgsv`) } small propertyItemProps={ { numeric: true } } />
                 }

src/crop/ui/DisplayPage.tsx

@@ -118,7 +118,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                   <PropertiesCard
                     title={ t('crop.public.p.display.holdingInstitutes') }
                     propertiesList={ crop.overview['institute.code'].terms.slice(0, 5).map((term) => ({ title: term.term, value: term.count })) }
-                    small
+                    small propertyItemProps={ { numeric: true } }
                   >
                     <PieChart
                       data={
@@ -137,7 +137,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                   <PropertiesCard
                     title={ t('crop.public.p.display.countryOfInstitutes') }
                     propertiesList={ crop.overview['institute.country.code3'].terms.slice(0, 5).map((term) => ({ title: term.term, value: term.count })) }
-                    small
+                    small propertyItemProps={ { numeric: true } }
                   >
                     <PieChart
                       data={
@@ -156,7 +156,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                   <PropertiesCard
                     title={ t('crop.public.p.display.representedGenera') }
                     propertiesList={ crop.overview['taxonomy.genus'].terms.slice(0, 5).map((term) => ({ title: term.term, value: term.count })) }
-                    small
+                    small propertyItemProps={ { numeric: true } }
                   >
                     <PieChart
                       data={
@@ -175,7 +175,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                   <PropertiesCard
                     title={ t('crop.public.p.display.representedSpecies') }
                     propertiesList={ crop.overview['taxonomy.genusSpecies'].terms.slice(0, 5).map((term) => ({ title: term.term, value: term.count })) }
-                    small
+                    small propertyItemProps={ { numeric: true } }
                   >
                     <PieChart
                       data={
@@ -191,8 +191,10 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                 }
                 </GridContainer >
                 }
-            <PropertiesCard title={ t(`crop.public.p.display.otherNames`) } propertiesList={ crop.otherNames.map((otherName) => ({title: otherName})) } propertyItemProps={ {keepEmpty: true, small: true} }/>
-
+            <PropertiesCard title={ t(`crop.public.p.display.otherNames`) }
+              propertiesList={ crop.otherNames.map((otherName) => ({title: otherName})) }
+              propertyItemProps={ { keepEmpty: true, small: true, numeric: true } }
+            />
           </PageContents>
         }
       </PageLayout>

src/institutes/ui/DisplayPage.tsx

@@ -201,7 +201,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                     <PropertiesCard
                       title={ t('institutes.public.p.display.representedCrops') }
                       propertiesList={ cropShortNameOverview.terms.map((term) => ({title: term.term, value: term.count})) }
-                      small
+                      small propertyItemProps={ { numeric: true } }
                     />
                   }
 
@@ -209,7 +209,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                     <PropertiesCard
                       title={ t('institutes.public.p.display.representedCropNames') }
                       propertiesList={ cropNameOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
-                      small
+                      small propertyItemProps={ { numeric: true } }
                     >
                       <PieChart
                         data={
@@ -228,7 +228,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                     <PropertiesCard
                       title={ t('institutes.public.p.display.representedGenera') }
                       propertiesList={  taxonomyGenusOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
-                      small
+                      small propertyItemProps={ { numeric: true } }
                     >
                       <PieChart
                         data={
@@ -247,7 +247,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                     <PropertiesCard
                       title={ t('institutes.public.p.display.representedSpecies') }
                       propertiesList={  taxonomyGenusSpeciesOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
-                      small
+                      small propertyItemProps={ { numeric: true } }
                     >
                       <PieChart
                         data={