Adjust staking split displays (#3268)

* Adjust staking split displays

* Additional

packages/page-council/src/Overview/Summary.tsx

@@ -31,7 +31,7 @@ function Summary ({ bestNumber, className = '', electionsInfo }: Props): React.R
     <SummaryBox className={className}>
       <section>
         <CardSummary label={t<string>('seats')}>
-          {formatNumber(members.length)}/{formatNumber(desiredSeats)}
+          {formatNumber(members.length)}&nbsp;/&nbsp;{formatNumber(desiredSeats)}
         </CardSummary>
         <CardSummary label={t<string>('runners up')}>
           {formatNumber(runnersUp.length)}

packages/page-society/src/Overview/Summary.tsx

@@ -35,7 +35,7 @@ function Summary ({ className = '', info }: Props): React.ReactElement<Props> {
       <section className='ui--media-medium'>
         {info && members && (
           <CardSummary label={t<string>('members')}>
-            {members.length}/{info.maxMembers.toString()}
+            {members.length}&nbsp;/&nbsp;{info.maxMembers.toString()}
           </CardSummary>
         )}
       </section>

packages/page-staking/src/Overview/Summary.tsx

@@ -29,7 +29,7 @@ function Summary ({ className = '', isVisible, next, nominators, stakingOverview
       <section>
         {stakingOverview && (
           <CardSummary label={t<string>('validators')}>
-            {stakingOverview.validators.length}{`/${stakingOverview.validatorCount.toString()}`}
+            {stakingOverview.validators.length}&nbsp;/&nbsp;{stakingOverview.validatorCount.toString()}
           </CardSummary>
         )}
         {!!next?.length && (

packages/page-staking/src/Targets/Summary.tsx

@@ -55,7 +55,7 @@ function Summary ({ lastReward, numNominators, numValidators, totalStaked }: Pro
                     withCurrency={false}
                     withSi
                   />
-                  /
+                   / 
                 </>
               )}
               <FormatBalance
@@ -67,8 +67,8 @@ function Summary ({ lastReward, numNominators, numValidators, totalStaked }: Pro
         )}
       </section>
       {numValidators && numNominators && (
-        <CardSummary label={t<string>('validators/nominators')}>
-          {numValidators}/{numNominators}
+        <CardSummary label={`${t<string>('validators')} / ${t<string>('nominators')}`}>
+          {numValidators}&nbsp;/&nbsp;{numNominators}
         </CardSummary>
       )}
       {lastReward?.gtn(0) && (