feat: enhance Seat, TableBackground, TableMarkings, and TableScreen components for improved styling and layout adjustments

src/screens/TableScreen.js

@@ -226,7 +226,7 @@ const styles = StyleSheet.create({
   },
   tableWrap: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: 'flex-start',
     alignItems: 'center',
     marginTop: 8,
     marginBottom: 8,
@@ -256,8 +256,8 @@ const styles = StyleSheet.create({
   },
   seatSpot: {
     position: 'absolute',
-    width: 110,
-    transform: [{ translateX: -55 }]
+    width: 96,
+    transform: [{ translateX: -48 }]
   },
   controlsOverlay: {
     position: 'absolute',
@@ -327,11 +327,11 @@ const styles = StyleSheet.create({
 });
 
 const seatPositions = {
-  0: { left: '10%', top: '50%' },
-  1: { left: '24%', top: '44%' },
-  2: { left: '38%', top: '38%' },
-  3: { left: '50%', top: '36%' },
-  4: { left: '62%', top: '38%' },
-  5: { left: '76%', top: '44%' },
-  6: { left: '90%', top: '50%' }
+  0: { left: '8%', top: '62%' },
+  1: { left: '22%', top: '55%' },
+  2: { left: '36%', top: '50%' },
+  3: { left: '50%', top: '48%' },
+  4: { left: '64%', top: '50%' },
+  5: { left: '78%', top: '55%' },
+  6: { left: '92%', top: '62%' }
 };