price display tweaks

src/components/atoms/Price/PriceUnit.module.css

@@ -3,7 +3,11 @@
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-large);
   color: var(--brand-grey-dark);
-  line-height: 1;
+  line-height: 1.2;
+}
+
+.price > div:firt-child {
+  white-space: nowrap;
 }
 
 .price span:first-child {
@@ -20,3 +24,8 @@
 .price.small span:first-child {
   font-size: var(--font-size-small);
 }
+
+.badge {
+  vertical-align: middle;
+  margin-left: calc(var(--spacer) / 6);
+}

src/components/atoms/Price/PriceUnit.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames/bind'
 import Conversion from './Conversion'
 import styles from './PriceUnit.module.css'
 import { useUserPreferences } from '../../../providers/UserPreferences'
+import Badge from '../Badge'
 
 const cx = classNames.bind(styles)
 
@@ -12,9 +13,11 @@ export default function PriceUnit({
   className,
   small,
   conversion,
-  symbol
+  symbol,
+  type
 }: {
   price: string
+  type?: string
   className?: string
   small?: boolean
   conversion?: boolean
@@ -30,6 +33,7 @@ export default function PriceUnit({
 
   return (
     <div className={styleClasses}>
+      <div>
         {Number.isNaN(Number(price))
           ? '-'
           : formatCurrency(Number(price), '', locale, false, {
@@ -39,6 +43,11 @@ export default function PriceUnit({
               significantFigures: 4
             })}{' '}
         <span>{symbol || 'OCEAN'}</span>
+        {type && type === 'pool' && (
+          <Badge label="pool" className={styles.badge} />
+        )}
+      </div>
+
       {conversion && <Conversion price={price} />}
     </div>
   )

src/components/atoms/Price/index.module.css

@@ -2,8 +2,3 @@
   color: var(--color-secondary);
   font-weight: var(--font-weight-bold);
 }
-
-.badge {
-  vertical-align: middle;
-  margin-left: calc(var(--spacer) / 6);
-}

src/components/atoms/Price/index.tsx

@@ -5,7 +5,6 @@ import { DDO } from '@oceanprotocol/lib'
 import Loader from '../Loader'
 import Tooltip from '../Tooltip'
 import PriceUnit from './PriceUnit'
-import Badge from '../Badge'
 
 export default function Price({
   ddo,
@@ -21,17 +20,13 @@ export default function Price({
   const { price } = useMetadata(ddo)
 
   return price?.value ? (
-    <>
     <PriceUnit
       price={`${price.value}`}
       className={className}
       small={small}
       conversion={conversion}
+      type={price.type}
     />
-      {price?.type === 'pool' && (
-        <Badge label="pool" className={styles.badge} />
-      )}
-    </>
   ) : !price || price?.value === 0 ? (
     <div className={styles.empty}>
       No price found{' '}