time box

client/src/App.css

@@ -589,9 +589,13 @@ table .group td {
   margin-bottom: 24px;
 }
 
-.react-time-picker__wrapper {
+.react-time-picker__wrapper,
-  border-radius: 10px;
+.react-datetime-picker__wrapper {
-  border-color: #ccc!important;
+  border: 1px solid #ccc !important;
+  border-radius: 8px;
+  min-height: 45px;
+  padding: 10px 12px;
+  background: #fff;
 }
 
 .react-time-picker__wrapper input[type=number],
@@ -1731,6 +1735,8 @@ input[type="checkbox"] {
   color: #0066B1;
   font-size: 36px;
   font-weight: bold;
+  position: relative;
+  z-index: 1;
 }
 
 .label-delete-item {
@@ -1755,6 +1761,8 @@ input[type="checkbox"] {
   flex-direction: column;
   align-items: center;
   width: 50px;
+  overflow: visible;
+  z-index: 2;
 }
 
 .seat-circle {
@@ -1778,13 +1786,17 @@ input[type="checkbox"] {
 }
 
 .guest-name {
+  position: absolute;
+  top: 50%;
+  left: 50%;
   text-align: center;
   font-size: 10px;
   font-weight: bold;
   white-space: nowrap;
   color: #333;
-  margin-bottom: 4px;
   line-height: 1.1;
+  z-index: 4;
+  pointer-events: none;
 }
 
 .seating-chart-container {

client/src/App.js

@@ -100,6 +100,60 @@ function App() {
   // const goToAdmin = () => {
   //   window.location.href = `/admin`;
   // }
+  useEffect(() => {
+    const applyTimeInputConstraints = () => {
+      document.querySelectorAll('.react-time-picker__inputGroup__hour, .react-datetime-picker__inputGroup__hour').forEach((input) => {
+        input.setAttribute('min', '0');
+        input.setAttribute('max', '23');
+        input.setAttribute('inputmode', 'numeric');
+      });
+
+      document.querySelectorAll('.react-time-picker__inputGroup__minute, .react-datetime-picker__inputGroup__minute').forEach((input) => {
+        input.setAttribute('min', '0');
+        input.setAttribute('max', '59');
+        input.setAttribute('inputmode', 'numeric');
+      });
+
+      document.querySelectorAll('.react-datepicker-time__input-container input[type="time"]').forEach((input) => {
+        input.setAttribute('min', '00:00');
+        input.setAttribute('max', '23:59');
+      });
+    };
+
+    const isTimeFieldTarget = (target) => {
+      if (!(target instanceof HTMLInputElement)) return false;
+      const inTimePicker = target.closest('.react-time-picker, .react-datetime-picker, .react-datepicker-time__input-container');
+      if (!inTimePicker) return false;
+      return target.type === 'number' || target.type === 'time';
+    };
+
+    const preventArrowChange = (event) => {
+      if (!isTimeFieldTarget(event.target)) return;
+      if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'PageUp' || event.key === 'PageDown') {
+        event.preventDefault();
+      }
+    };
+
+    const preventWheelChange = (event) => {
+      if (!isTimeFieldTarget(event.target)) return;
+      if (document.activeElement === event.target) {
+        event.preventDefault();
+      }
+    };
+
+    applyTimeInputConstraints();
+    const observer = new MutationObserver(() => applyTimeInputConstraints());
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    document.addEventListener('keydown', preventArrowChange, true);
+    document.addEventListener('wheel', preventWheelChange, { capture: true, passive: false });
+
+    return () => {
+      observer.disconnect();
+      document.removeEventListener('keydown', preventArrowChange, true);
+      document.removeEventListener('wheel', preventWheelChange, true);
+    };
+  }, []);
 
   return (
     <>

client/src/components/seating/CircularTable.js

@@ -54,9 +54,17 @@ const CircularTable = ({tableNumber, guests = [], inCenterCustomerIds = [], onSe
 					...(!isInCenter && hasCustomer && !seatLabelColor ? { background: '#cccccc', opacity: 0.6 } : {}),
 					...(!isInCenter && hasCustomer ? { opacity: 0.6 } : {})
 				};
+				const labelOffsetDistance = 20;
+				const labelLift = 16;
+				const labelOffsetX = Math.cos(pos.angle) * labelOffsetDistance;
+				const labelOffsetY = Math.sin(pos.angle) * labelOffsetDistance - labelLift;
+				const guestNameStyle = {
+					transform: `translate(-50%, -50%) translate(${labelOffsetX}px, ${labelOffsetY}px)`,
+					...(!isInCenter && hasCustomer ? { color: '#999', fontSize: '8px' } : {})
+				};
 					
 				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' } : {}}>
+					<div className="guest-name" style={guestNameStyle}>
 						{guest?.customerName || ''}
 					</div>
 					<div