fix(app): fix WellTooltip size and spacing (#20761)

* fix(app): fix WellTooltip size and spacing

Author: koji

app/src/organisms/Desktop/ProtocolVisualization/WellTooltip/index.tsx

@@ -119,6 +119,7 @@ export function WellTooltip({
                     <tr key={groupId} className={styles.tooltip_row}>
                       <td>
                         <LiquidIcon
+                          size="xSmall"
                           color={
                             liquidDisplayColors[groupId] ??
                             swatchColors(groupId)

app/src/organisms/Desktop/ProtocolVisualization/WellTooltip/welltooltip.module.css

@@ -17,6 +17,8 @@
 
 .tooltip_table {
   max-width: 20rem;
+  border-collapse: separate;
+  border-spacing: 0;
 }
 
 .tooltip_row {
@@ -27,9 +29,15 @@
   padding-left: var(--border-radius-8);
 }
 
+/* space between liquids */
+.tooltip_row + .tooltip_row td {
+  padding-top: var(--spacing-8);
+}
+
 .divider {
   width: 100%;
   height: 1px;
+  margin: var(--spacing-8) 0;
   background-color: #ffffff80;
 }
 

components/src/molecules/LiquidIcon/index.tsx

@@ -24,7 +24,7 @@ export function LiquidIcon(props: LiquidIconProps): JSX.Element {
     LiquidIconSize,
     { iconSize: string; padding: string }
   > = {
-    xSmall: { iconSize: SPACING.spacing6, padding: SPACING.spacing6 },
+    xSmall: { iconSize: '0.375rem', padding: SPACING.spacing6 },
     small: { iconSize: '0.5rem', padding: SPACING.spacing8 },
     medium: { iconSize: '1rem', padding: SPACING.spacing12 },
   }