animation fixes

client/src/components/molecules/VersionNumbers/VersionTable.module.scss

@@ -7,15 +7,9 @@
 }
 
 .table {
-    display: table;
     border-top: 1px solid $brand-grey-lighter;
 
-    tr {
-        position: relative;
-    }
-
     table {
-        display: table;
         margin-left: $spacer;
         width: calc(100% - #{$spacer});
         margin-bottom: -1px;
@@ -33,6 +27,7 @@
 
     td {
         padding: $spacer / 4 $spacer / 2;
+        vertical-align: top;
 
         &:last-child {
             text-align: right;
@@ -56,3 +51,7 @@
         }
     }
 }
+
+.label {
+    min-width: 15rem;
+}

client/src/components/molecules/VersionNumbers/VersionTable.tsx

@@ -64,7 +64,7 @@ export const VersionTableContracts = ({
                         return (
                             <tr key={key}>
                                 <td>
-                                    <span className={styles.label}>{key}</span>
+                                    <code className={styles.label}>{key}</code>
                                 </td>
                                 <td>
                                     <a href={submarineLink}>
@@ -84,7 +84,7 @@ export const VersionTableCommons = () => (
             {Object.entries(commonsConfig).map(([key, value]) => (
                 <tr key={key}>
                     <td>
-                        <strong>{key}</strong>
+                        <code className={styles.label}>{key}</code>
                     </td>
                     <td>
                         <code>{value}</code>

client/src/components/molecules/VersionNumbers/VersionTableRow.tsx

@@ -7,11 +7,12 @@ import VersionNumber from './VersionNumber'
 
 const VersionTableRow = ({ value }: { value: any }) => {
     const collapseStyles = {
-        transition: '0.01s'
+        transitionDuration: '0.01s'
     }
 
     const expandStyles = {
-        transition: '0.01s'
+        transitionDuration: '0.01s',
+        transitionTimingFunction: 'ease-out'
     }
 
     const { getCollapseProps, getToggleProps, isOpen } = useCollapse({

client/src/styles/global.scss

@@ -239,11 +239,6 @@ table {
     width: 100%;
     margin-bottom: $spacer * $line-height;
     border-collapse: collapse;
-    display: block;
-
-    // make 'em scrollable
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
 
     th,
     td {