@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Organisms/Containers/TableauLines/SpacingConfig.js

@@ -1,112 +1,162 @@
 // spacingConfig.js
 export const spacingConfig = {
-    'Semifinal': {
-        'large': {
-            Semifinal: { getTopSpace: 'mt-0', getConnectorHeight: 'h-[3rem]', getTopSpaceForLine: 'mt-[1.5rem]' },
-            Final: { getTopSpace: 'h-[8.5rem] mt-[5rem] -ml-[309px]', getBottomLine: 'h-[6.7rem] mt-[2.5rem] -ml-[309px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
-        },
-        'small': {
-            Semifinal: { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[3.5rem]', getTopSpaceForLine: 'mt-[1.6rem]' },
-            Final: { getTopSpace: 'h-[6rem] mt-[9.1rem] -ml-[181px]', getBottomLine: 'h-[3rem] mt-[1.4rem] -ml-[181px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
-        }
+  Semifinal: {
+    large: {
+      Semifinal: { getTopSpace: 'mt-0', getConnectorHeight: 'h-[3rem]', getTopSpaceForLine: 'mt-[1.5rem]' },
+      Final: { getTopSpace: 'h-[8.5rem] mt-[5rem] -ml-[309px]', getBottomLine: 'h-[6.7rem] mt-[2.5rem] -ml-[309px]' },
+      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
     },
-    'Table of 8': {
-        'large': {
-            'Table of 8': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
-            Semifinal: { getTopSpace: 'mt-[2.5rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
-            Final: { getTopSpace: 'h-[6rem] mt-[22rem] -ml-[309px]', getBottomLine: 'h-[6rem] mt-[2.5rem] -ml-[309px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
-            'Table of 4': { getTopSpace: 'mt-[2.5rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
-            'Table of 2': { getTopSpace: 'hidden h-[6rem] mt-[22rem]', getBottomLine: 'h-[6rem] mt-[2.5rem] -ml-[309px]' },
-            'Consolation Round 1': {  getTopSpace: 'mt-[3rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
-            'Consolation Round 2': { getTopSpace: 'mt-[1.5rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
-            'Consolation Round 3': { getTopSpace: 'mt-[2.7rem]', getConnectorHeight: 'h-[10.5rem]', getTopSpaceForLine: 'mt-[5rem]' },
-            'Consolation Round 4': { getTopSpace: 'hidden mt-[2.7rem]', getConnectorHeight: 'h-[10.5rem]', getTopSpaceForLine: 'mt-[5rem]' },
-            'Grand Final': { getTopSpace: 'hidden h-[6rem] mt-[22rem] -ml-[309px]', getBottomLine: 'h-[6rem] mt-[2.5rem] -ml-[309px]' },
-        },
-        'small': {
-            'Table of 8': { getTopSpace: '-mt-[0.6rem]', getConnectorHeight: 'h-[1.5rem]', getTopSpaceForLine: 'mt-[0.6rem]' },
-            Semifinal: { getTopSpace: 'mt-[1.2rem]', getConnectorHeight: 'h-[3.6rem]', getTopSpaceForLine: 'mt-[1.6rem]' },
-            Final: { getTopSpace: 'h-[6rem] mt-[9.1rem] -ml-[181px]', getBottomLine: 'h-[3rem] mt-[1.4rem] -ml-[181px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
-        }
+    small: {
+      Semifinal: { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[3.5rem]', getTopSpaceForLine: 'mt-[1.6rem]' },
+      Final: { getTopSpace: 'h-[6rem] mt-[9.1rem] -ml-[181px]', getBottomLine: 'h-[3rem] mt-[1.4rem] -ml-[181px]' },
+      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
+    }
+  },
+  'Table of 8': {
+    large: {
+      'Table of 8': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
+      Semifinal: { getTopSpace: 'mt-[2.5rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
+      Final: { getTopSpace: 'h-[6rem] mt-[22rem] -ml-[309px]', getBottomLine: 'h-[6rem] mt-[2.5rem] -ml-[309px]' },
+      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
+      'Table of 4': { getTopSpace: 'mt-[2.5rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
+      'Table of 2': { getTopSpace: 'hidden h-[6rem] mt-[22rem]', getBottomLine: 'h-[6rem] mt-[2.5rem] -ml-[309px]' },
+      'Consolation Round 1': {
+        getTopSpace: 'mt-[3rem]',
+        getConnectorHeight: 'h-[2.7rem]',
+        getTopSpaceForLine: 'mt-[1.2rem]'
+      },
+      'Consolation Round 2': {
+        getTopSpace: 'mt-[1.5rem]',
+        getConnectorHeight: 'h-[2.7rem]',
+        getTopSpaceForLine: 'mt-[1.2rem]'
+      },
+      'Consolation Round 3': {
+        getTopSpace: 'mt-[2.7rem]',
+        getConnectorHeight: 'h-[10.5rem]',
+        getTopSpaceForLine: 'mt-[5rem]'
+      },
+      'Consolation Round 4': {
+        getTopSpace: 'hidden mt-[2.7rem]',
+        getConnectorHeight: 'h-[10.5rem]',
+        getTopSpaceForLine: 'mt-[5rem]'
+      },
+      'Grand Final': {
+        getTopSpace: 'hidden h-[6rem] mt-[22rem] -ml-[309px]',
+        getBottomLine: 'h-[6rem] mt-[2.5rem] -ml-[309px]'
+      }
     },
-    'Table of 16': {
-        large: {
-            'Table of 16': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
-            'Table of 8': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
-            Semifinal: { getTopSpace: 'mt-[5.8rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
-            Final: { getTopSpace: 'mt-[14rem] h-[12rem] -ml-[309px]', getBottomLine: 'h-[12rem] mt-[2.5rem] -ml-[309px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
-        },
-        small: {
-            'Table of 16': { getTopSpace: '-mt-[0.6rem]', getConnectorHeight: 'h-[1.5rem]', getTopSpaceForLine: 'mt-[0.6rem]' },
-            'Table of 8': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[3.5rem]', getTopSpaceForLine: 'mt-[1.6rem]' },
-            Semifinal: { getTopSpace: 'mt-[2.8rem]', getConnectorHeight: 'h-[7.2rem]', getTopSpaceForLine: 'mt-[3.8rem]' },
-            Final: { getTopSpace: 'h-[8rem] mt-[7rem] -ml-[181px]', getBottomLine: 'h-[8rem] mt-[1.4rem] -ml-[181px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
-        }
+    small: {
+      'Table of 8': {
+        getTopSpace: '-mt-[0.6rem]',
+        getConnectorHeight: 'h-[1.5rem]',
+        getTopSpaceForLine: 'mt-[0.6rem]'
+      },
+      Semifinal: { getTopSpace: 'mt-[1.2rem]', getConnectorHeight: 'h-[3.6rem]', getTopSpaceForLine: 'mt-[1.6rem]' },
+      Final: { getTopSpace: 'h-[6rem] mt-[9.1rem] -ml-[181px]', getBottomLine: 'h-[3rem] mt-[1.4rem] -ml-[181px]' },
+      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
+    }
+  },
+  'Table of 16': {
+    large: {
+      'Table of 16': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
+      'Table of 8': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
+      Semifinal: { getTopSpace: 'mt-[5.8rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
+      Final: { getTopSpace: 'mt-[14rem] h-[12rem] -ml-[309px]', getBottomLine: 'h-[12rem] mt-[2.5rem] -ml-[309px]' },
+      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
     },
-    'Table of 32': {
-        large: {
-            'Table of 32': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
-            'Table of 16': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
-            'Table of 8': { getTopSpace: 'mt-[4.7rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
-            Semifinal: { getTopSpace: 'mt-[12.8rem]', getConnectorHeight: 'h-[28rem]', getTopSpaceForLine: 'mt-[7rem]'  },
-            Final: { getTopSpace: 'h-[25.1rem] mt-[30.1rem] -ml-[309px]', getBottomLine: 'h-[25.1rem] mt-[2.5rem] -ml-[309px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
-        },
-        small: {
-            'Table of 32': { getTopSpace: '-mt-[0.6rem]', getConnectorHeight: 'h-[1.5rem]', getTopSpaceForLine: 'mt-[0.65rem]' },
-            'Table of 16': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[4.8rem]', getTopSpaceForLine: 'mt-[2.2rem]' },
-            'Table of 8': { getTopSpace: 'mt-[2.3rem]', getConnectorHeight: 'h-[9.1rem]', getTopSpaceForLine: 'mt-[4rem]' },
-            Semifinal: { getTopSpace: 'mt-[7.5rem]', getConnectorHeight: 'h-[18rem]', getTopSpaceForLine: 'mt-[3.8rem]' },
-            Final: { getTopSpace: 'h-[12.6rem] mt-[24.4rem] -ml-[181px]', getBottomLine: 'h-[8rem] mt-[1.4rem] -ml-[181px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
-        }
+    small: {
+      'Table of 16': {
+        getTopSpace: '-mt-[0.6rem]',
+        getConnectorHeight: 'h-[1.5rem]',
+        getTopSpaceForLine: 'mt-[0.6rem]'
+      },
+      'Table of 8': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[3.5rem]', getTopSpaceForLine: 'mt-[1.6rem]' },
+      Semifinal: { getTopSpace: 'mt-[2.8rem]', getConnectorHeight: 'h-[7.2rem]', getTopSpaceForLine: 'mt-[3.8rem]' },
+      Final: { getTopSpace: 'h-[8rem] mt-[7rem] -ml-[181px]', getBottomLine: 'h-[8rem] mt-[1.4rem] -ml-[181px]' },
+      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
+    }
+  },
+  'Table of 32': {
+    large: {
+      'Table of 32': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
+      'Table of 16': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
+      'Table of 8': { getTopSpace: 'mt-[4.7rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
+      Semifinal: { getTopSpace: 'mt-[12.8rem]', getConnectorHeight: 'h-[28rem]', getTopSpaceForLine: 'mt-[7rem]' },
+      Final: {
+        getTopSpace: 'h-[25.1rem] mt-[30.1rem] -ml-[309px]',
+        getBottomLine: 'h-[25.1rem] mt-[2.5rem] -ml-[309px]'
+      },
+      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
     },
-    'Table of 64': {
-        large: {
-            'Table of 64': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
-            'Table of 32': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
-            'Table of 16': { getTopSpace: 'mt-[4.7rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
-            'Table of 8': { getTopSpace: 'mt-[11.7rem]', getConnectorHeight: 'h-[28rem]', getTopSpaceForLine: 'mt-[12.5rem]' },
-            Semifinal: { getTopSpace: 'mt-[25.5rem]', getConnectorHeight: 'h-[56rem]', getTopSpaceForLine: 'mt-[23rem]' },
-            Final: { getTopSpace: 'mt-[148.5rem] h-[81rem] -ml-[309px]', getBottomLine: 'h-[80rem] mt-[2.5rem] -ml-[309px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
-        },
-        small: {
-            'Table of 64': { getTopSpace: '-mt-[0.6rem]', getConnectorHeight: 'h-[1.5rem]', getTopSpaceForLine: 'mt-[0.65rem]' },
-            'Table of 32': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[4.8rem]', getTopSpaceForLine: 'mt-[2.2rem]' },
-            'Table of 16': { getTopSpace: 'mt-[2.3rem]', getConnectorHeight: 'h-[9.1rem]', getTopSpaceForLine: 'mt-[4rem]' },
-            'Table of 8': { getTopSpace: 'mt-[6.4rem]', getConnectorHeight: 'h-[18rem]', getTopSpaceForLine: 'mt-[9rem]' },
-            Semifinal: { getTopSpace: 'mt-[15.6rem]', getConnectorHeight: 'h-[36rem]', getTopSpaceForLine: 'mt-[18rem]' },
-            Final: { getTopSpace: 'h-[256px] mt-[64.8rem] -ml-[181px]', getBottomLine: 'h-[8rem] mt-[1.4rem] -ml-[181px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
-        }
+    small: {
+      'Table of 32': {
+        getTopSpace: '-mt-[0.6rem]',
+        getConnectorHeight: 'h-[1.5rem]',
+        getTopSpaceForLine: 'mt-[0.65rem]'
+      },
+      'Table of 16': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[4.8rem]', getTopSpaceForLine: 'mt-[2.2rem]' },
+      'Table of 8': { getTopSpace: 'mt-[2.3rem]', getConnectorHeight: 'h-[9.1rem]', getTopSpaceForLine: 'mt-[4rem]' },
+      Semifinal: { getTopSpace: 'mt-[7.5rem]', getConnectorHeight: 'h-[18rem]', getTopSpaceForLine: 'mt-[3.8rem]' },
+      Final: { getTopSpace: 'h-[12.6rem] mt-[24.4rem] -ml-[181px]', getBottomLine: 'h-[8rem] mt-[1.4rem] -ml-[181px]' },
+      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
+    }
+  },
+  'Table of 64': {
+    large: {
+      'Table of 64': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
+      'Table of 32': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
+      'Table of 16': { getTopSpace: 'mt-[4.7rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
+      'Table of 8': {
+        getTopSpace: 'mt-[11.7rem]',
+        getConnectorHeight: 'h-[28rem]',
+        getTopSpaceForLine: 'mt-[12.5rem]'
+      },
+      Semifinal: { getTopSpace: 'mt-[25.5rem]', getConnectorHeight: 'h-[56rem]', getTopSpaceForLine: 'mt-[23rem]' },
+      Final: { getTopSpace: 'mt-[148.5rem] h-[81rem] -ml-[309px]', getBottomLine: 'h-[80rem] mt-[2.5rem] -ml-[309px]' },
+      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
     },
-    'Table of 128': {
-        large: {
-            'Table of 128': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
-            'Table of 64': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
-            'Table of 32': { getTopSpace: 'mt-[4.7rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
-            'Table of 16': { getTopSpace: 'mt-[11.7rem]', getConnectorHeight: 'h-[28rem]', getTopSpaceForLine: 'mt-[12.5rem]' },
-            'Table of 8': { getTopSpace: 'mt-[24.5rem]', getConnectorHeight: 'h-[56rem]', getTopSpaceForLine: 'mt-[23rem]' },
-            Semifinal: { getTopSpace: 'mt-[48.7rem]', getConnectorHeight: 'h-[112rem]', getTopSpaceForLine: '' },
-            Final: { getTopSpace: 'mt-[146.5rem] h-[80rem] -ml-[309px]', getBottomLine: 'h-[80rem] mt-[2.5rem] -ml-[309px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
-        },
-        small: {
-            'Table of 128': { getTopSpace: '-mt-[0.6rem]', getConnectorHeight: 'h-[1.5rem]', getTopSpaceForLine: 'mt-[0.65rem]' },
-            'Table of 64': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[4.8rem]', getTopSpaceForLine: 'mt-[2.2rem]' },
-            'Table of 32': { getTopSpace: 'mt-[2.3rem]', getConnectorHeight: 'h-[9.1rem]', getTopSpaceForLine: 'mt-[4rem]' },
-            'Table of 16': { getTopSpace: 'mt-[6.4rem]', getConnectorHeight: 'h-[18rem]', getTopSpaceForLine: 'mt-[9rem]' },
-            'Table of 8': { getTopSpace: 'mt-[15.6rem]', getConnectorHeight: 'h-[36rem]', getTopSpaceForLine: 'mt-[18rem]' },
-            Semifinal: { getTopSpace: 'mt-[34.8rem]', getConnectorHeight: 'h-[72rem]', getTopSpaceForLine: 'mt-[3.8rem]' },
-            Final: { getTopSpace: 'h-[700px] mt-[99rem] -ml-[181px]', getBottomLine: 'h-[700px] mt-[1.4rem] -ml-[181px]' },
-            'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
-        }
+    small: {
+      'Table of 64': {
+        getTopSpace: '-mt-[0.6rem]',
+        getConnectorHeight: 'h-[1.5rem]',
+        getTopSpaceForLine: 'mt-[0.65rem]'
+      },
+      'Table of 32': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[4.8rem]', getTopSpaceForLine: 'mt-[2.2rem]' },
+      'Table of 16': { getTopSpace: 'mt-[2.3rem]', getConnectorHeight: 'h-[9.1rem]', getTopSpaceForLine: 'mt-[4rem]' },
+      'Table of 8': { getTopSpace: 'mt-[6.4rem]', getConnectorHeight: 'h-[18rem]', getTopSpaceForLine: 'mt-[9rem]' },
+      Semifinal: { getTopSpace: 'mt-[15.6rem]', getConnectorHeight: 'h-[36rem]', getTopSpaceForLine: 'mt-[18rem]' },
+      Final: { getTopSpace: 'h-[256px] mt-[64.8rem] -ml-[181px]', getBottomLine: 'h-[8rem] mt-[1.4rem] -ml-[181px]' },
+      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
+    }
+  },
+  'Table of 128': {
+    large: {
+      'Table of 128': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
+      'Table of 64': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
+      'Table of 32': { getTopSpace: 'mt-[4.7rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
+      'Table of 16': {
+        getTopSpace: 'mt-[11.7rem]',
+        getConnectorHeight: 'h-[28rem]',
+        getTopSpaceForLine: 'mt-[12.5rem]'
+      },
+      'Table of 8': { getTopSpace: 'mt-[24.5rem]', getConnectorHeight: 'h-[56rem]', getTopSpaceForLine: 'mt-[23rem]' },
+      Semifinal: { getTopSpace: 'mt-[48.7rem]', getConnectorHeight: 'h-[112rem]', getTopSpaceForLine: '' },
+      Final: { getTopSpace: 'mt-[146.5rem] h-[80rem] -ml-[309px]', getBottomLine: 'h-[80rem] mt-[2.5rem] -ml-[309px]' },
+      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
     },
+    small: {
+      'Table of 128': {
+        getTopSpace: '-mt-[0.6rem]',
+        getConnectorHeight: 'h-[1.5rem]',
+        getTopSpaceForLine: 'mt-[0.65rem]'
+      },
+      'Table of 64': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[4.8rem]', getTopSpaceForLine: 'mt-[2.2rem]' },
+      'Table of 32': { getTopSpace: 'mt-[2.3rem]', getConnectorHeight: 'h-[9.1rem]', getTopSpaceForLine: 'mt-[4rem]' },
+      'Table of 16': { getTopSpace: 'mt-[6.4rem]', getConnectorHeight: 'h-[18rem]', getTopSpaceForLine: 'mt-[9rem]' },
+      'Table of 8': { getTopSpace: 'mt-[15.6rem]', getConnectorHeight: 'h-[36rem]', getTopSpaceForLine: 'mt-[18rem]' },
+      Semifinal: { getTopSpace: 'mt-[34.8rem]', getConnectorHeight: 'h-[72rem]', getTopSpaceForLine: 'mt-[3.8rem]' },
+      Final: { getTopSpace: 'h-[700px] mt-[99rem] -ml-[181px]', getBottomLine: 'h-[700px] mt-[1.4rem] -ml-[181px]' },
+      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
+    }
+  }
 };

package/src/stories/Organisms/Containers/TableauLines/TableauLines.stories.js

@@ -1,23 +1,21 @@
 import TableauLines from './TableauLines.vue';
 
 export default {
-    title: 'Organisms/Containers/TableauLines',
-    component: TableauLines,
-    args: {
-        roundName: 'Table of 8',
-    },
-    argTypes: {
-        roundName: {
-            control: 'string',
-            description: 'Name of the round to display'
-
-        }
+  title: 'Organisms/Containers/TableauLines',
+  component: TableauLines,
+  args: {
+    roundName: 'Table of 8'
+  },
+  argTypes: {
+    roundName: {
+      control: 'string',
+      description: 'Name of the round to display'
     }
+  }
 };
 
 export const Default = {
-    args: {
-       roundName: 'Table of 8',
-    }
+  args: {
+    roundName: 'Table of 8'
+  }
 };
-

package/src/stories/Organisms/Containers/TableauLines/TableauLines.vue

@@ -8,17 +8,16 @@
     </div>
   </section>
 
-  <section v-if="roundName === 'Semifinal'" class="flex mr-5"  >
+  <section v-if="roundName === 'Semifinal'" class="flex mr-5">
     <div class="flex flex-col -ml-1" :class="getTopSpace">
       <div class="border-t border-b border-r w-5 rounded-md z-0" :class="getConnectorHeight"></div>
     </div>
   </section>
 
-<!--  <section v-if="roundName === 'Final'" class="flex flex-col mr-5 bg-bright"  >-->
-<!--      <div class="border-b border-l w-6 rounded-bl-md z-0 h-[6rem]" :class="getTopSpace" ></div>-->
-<!--      <div class="border-t border-l w-6 rounded-tl-md z-0 h-[6rem]" :class="getBottomLine" ></div>-->
-<!--  </section>-->
-
+  <!--  <section v-if="roundName === 'Final'" class="flex flex-col mr-5 bg-bright"  >-->
+  <!--      <div class="border-b border-l w-6 rounded-bl-md z-0 h-[6rem]" :class="getTopSpace" ></div>-->
+  <!--      <div class="border-t border-l w-6 rounded-tl-md z-0 h-[6rem]" :class="getBottomLine" ></div>-->
+  <!--  </section>-->
 </template>
 
 <script>
@@ -38,7 +37,7 @@ export default {
     large: {
       type: Boolean,
       default: true
-    },
+    }
   },
   watch: {
     large(newVal, oldVal) {
@@ -74,6 +73,6 @@ export default {
       const size = this.large ? 'large' : 'small';
       this.currentConfig = spacingConfig[this.bracketSize]?.[size]?.[this.roundName] || {};
     }
-  },
+  }
 };
 </script>

package/src/stories/Organisms/Form/AddDisplay/AddDisplay.stories.js

@@ -1,36 +1,36 @@
 import AddDisplay from './AddDisplay.vue';
-import getEventByTournamentId from "../../../../mocks/getEventByTournamentId.js"
+import getEventByTournamentId from '../../../../mocks/getEventByTournamentId.js';
 
 export default {
-    title: 'Organisms/Forms/AddDisplay',
-    component: AddDisplay,
-    args: {
-        clubs: getEventByTournamentId,
-        userClub: { text: 'Club A', link: '1' },
-        isAdmin: true
-    },
-    argTypes: {
-        clubs: { control: 'object' },
-        userClub: { control: 'object' },
-        isAdmin: { control: 'boolean' }
-    },
+  title: 'Organisms/Forms/AddDisplay',
+  component: AddDisplay,
+  args: {
+    clubs: getEventByTournamentId,
+    userClub: { text: 'Club A', link: '1' },
+    isAdmin: true
+  },
+  argTypes: {
+    clubs: { control: 'object' },
+    userClub: { control: 'object' },
+    isAdmin: { control: 'boolean' }
+  }
 };
 
 export const Default = {
-    args: {
-        clubs: [
-            { text: 'Club A', link: '1' },
-            { text: 'Club B', link: '2' }
-        ],
-        userClub: { text: 'Club A', link: '1' },
-        isAdmin: true
-    }
+  args: {
+    clubs: [
+      { text: 'Club A', link: '1' },
+      { text: 'Club B', link: '2' }
+    ],
+    userClub: { text: 'Club A', link: '1' },
+    isAdmin: true
+  }
 };
 
 export const ClubLevelUser = {
-    args: {
-        clubs: getEventByTournamentId,
-        userClub: { text: 'Club A', link: '1' },
-        isAdmin: false
-    }
+  args: {
+    clubs: getEventByTournamentId,
+    userClub: { text: 'Club A', link: '1' },
+    isAdmin: false
+  }
 };