seats

client/src/App.css

@@ -1783,6 +1783,8 @@ input[type="checkbox"] {
   font-weight: bold;
   white-space: nowrap;
   color: #333;
+  margin-bottom: 4px;
+  line-height: 1.1;
 }
 
 .seating-chart-container {

client/src/components/seating/CircularTable.js

@@ -56,6 +56,9 @@ const CircularTable = ({tableNumber, guests = [], inCenterCustomerIds = [], onSe
 				};
 					
 				return (<div className="seat-container" key={index} style={{transform: `translate(${pos.x}px, ${pos.y}px)`}}>
+					<div className="guest-name" style={!isInCenter && hasCustomer ? { color: '#999', fontSize: '8px' } : {}}>
+						{guest?.customerName || ''}
+					</div>
 					<div 
 						className={`seat-circle ${hasCustomer ? 'has-customer' : ''}`} 
 						style={seatStyle}
@@ -63,9 +66,6 @@ const CircularTable = ({tableNumber, guests = [], inCenterCustomerIds = [], onSe
 					>
 						{defaultSeatNumber[index]}
 					</div>
-					<div className="guest-name" style={!isInCenter && hasCustomer ? { color: '#999', fontSize: '8px' } : {}}>
-						{guest?.customerName || ''}
-					</div>
 				</div>)
 				})}
 			</div>