Increase column, show dash and use tooltip mobile

src/components/orders/OrderSurplusDisplay/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled, { useTheme } from 'styled-components'
+import styled, { css, useTheme, FlattenSimpleInterpolation } from 'styled-components'
 
 import { Order } from 'api/operator'
 
@@ -101,11 +101,37 @@ const IconWrapper = styled(FontAwesomeIcon)`
   }
 `
 
-export function OrderSurplusTooltipDisplay({ order }: Props): JSX.Element | null {
+const HiddenSection = styled.span<{ showHiddenSection: boolean; strechHiddenSection?: boolean }>`
+  display: ${({ showHiddenSection }): string => (showHiddenSection ? 'flex' : 'none')};
+  ${({ strechHiddenSection }): FlattenSimpleInterpolation | false | undefined =>
+    strechHiddenSection &&
+    css`
+      width: 3.4rem;
+      display: 'inline-block';
+      justify-content: end;
+    `}
+`
+
+export function OrderSurplusTooltipDisplay({
+  order,
+  amountSmartFormatting,
+  showHiddenSection = false,
+  defaultWhenNoSurplus,
+  strechWhenNoSurplus = false,
+}: Props & {
+  showHiddenSection?: boolean
+  defaultWhenNoSurplus?: string
+  strechWhenNoSurplus?: boolean
+}): JSX.Element {
   const surplus = useGetSurplus(order)
   const theme = useTheme()
 
-  if (!surplus) return null
+  if (!surplus)
+    return (
+      <HiddenSection showHiddenSection strechHiddenSection={strechWhenNoSurplus}>
+        {defaultWhenNoSurplus}
+      </HiddenSection>
+    )
 
   return (
     <BaseIconTooltipOnHover
@@ -114,6 +140,9 @@ export function OrderSurplusTooltipDisplay({ order }: Props): JSX.Element | null
         <span>
           <IconWrapper icon={faIcon} color={theme.green} />
           <Surplus>{surplus.percentage}</Surplus>
+          <HiddenSection showHiddenSection={showHiddenSection}>
+            {amountSmartFormatting ? surplus.formattedSmartAmount : surplus.amount}
+          </HiddenSection>
         </span>
       }
     />

src/components/orders/OrdersUserDetailsTable/OrderSurplusTooltipStyledByRow.tsx

@@ -1,25 +1,28 @@
 import React from 'react'
-import styled from 'styled-components'
 
-import { media } from 'theme/styles/media'
 import { Order } from 'api/operator'
 import { useMediaBreakpoint } from 'hooks/useMediaBreakPoint'
-import { OrderSurplusTooltipDisplay, OrderSurplusDisplay } from '../OrderSurplusDisplay'
+import { OrderSurplusTooltipDisplay } from '../OrderSurplusDisplay'
+
+type Props = React.HTMLAttributes<HTMLSpanElement> & {
+  order: Order
+}
 
-export const OrderSurplusDisplayStyled = styled(OrderSurplusDisplay)`
-  ${media.mobile} {
-    flex-direction: column;
-  }
-`
 /**
  * Displays surplus amount inside tooltip when display mode has little space to display
  */
-export function OrderSurplusDisplayStyledByRow({ order }: { order: Order }): JSX.Element {
+export function OrderSurplusDisplayStyledByRow({ order }: Props): JSX.Element {
   const isDesktop = useMediaBreakpoint(['xl', 'lg'])
+  const showAmountBesideSurplus = !isDesktop
+  const defaultWhenNoSurplus = '-'
 
-  if (isDesktop) {
-    return <OrderSurplusTooltipDisplay order={order} />
-  }
-
-  return <OrderSurplusDisplayStyled order={order} amountSmartFormatting />
+  return (
+    <OrderSurplusTooltipDisplay
+      order={order}
+      amountSmartFormatting
+      showHiddenSection={showAmountBesideSurplus}
+      defaultWhenNoSurplus={defaultWhenNoSurplus}
+      strechWhenNoSurplus
+    />
+  )
 }

src/components/orders/OrdersUserDetailsTable/index.tsx

@@ -27,7 +27,7 @@ import { OrderSurplusDisplayStyledByRow } from './OrderSurplusTooltipStyledByRow
 const Wrapper = styled(StyledUserDetailsTable)`
   > thead > tr,
   > tbody > tr {
-    grid-template-columns: 12rem 5.5rem repeat(2, minmax(16rem, 1.5fr)) minmax(18rem, 2fr) 9rem minmax(21.6rem, 2fr) 1.18fr;
+    grid-template-columns: 11rem 5.5rem repeat(2, minmax(16rem, 1.5fr)) minmax(18rem, 2fr) 10rem minmax(21.6rem, 2fr) 1.18fr;
   }
   tr > td {
     span.span-inside-tooltip {