From e6bb57471cc0d9ae1abd7ad88325fc4036347283 Mon Sep 17 00:00:00 2001
From: Lixian Zhou <charlie32690@gmail.com>
Date: Mon, 9 Mar 2026 12:57:54 -0400
Subject: [PATCH] seats

---
 client/src/App.css                             | 2 ++
 client/src/components/seating/CircularTable.js | 6 +++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index 69e5776..fbcedc1 100644
--- a/client/src/App.css
+++ b/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 {
diff --git a/client/src/components/seating/CircularTable.js b/client/src/components/seating/CircularTable.js
index fc5ef92..233498a 100644
--- a/client/src/components/seating/CircularTable.js
+++ b/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>