优化时钟响应式布局，防止小屏幕溢出

- 为小屏幕添加更保守的尺寸计算
- 调整数码管字体大小与高度匹配
- 添加溢出控制防止超出容器

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/App.css

@@ -35,7 +35,10 @@
   align-items: center;
   flex: 1;
   width: 100%;
+  max-width: 100vw;
+  overflow: hidden;
   box-sizing: border-box;
+  padding: 0 20px;
 }
 
 /* Digital clock style (default) */
@@ -46,6 +49,8 @@
   text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
   letter-spacing: 0.05em;
   white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
 }
 
 .style-button {

src/App.tsx

@@ -6,18 +6,14 @@ import './App.css'
 type ClockStyle = 'digital' | 'flip' | 'roll'
 
 function DigitalClock({ time, size }: { time: string; size: number }) {
-  // Match width with flip/roll clocks
+  // Match visual height with flip/roll clocks
-  // Total flip/roll width ≈ 5.1 * (size / 1.6) because size is now scaled
+  // Use slightly smaller than size to prevent overflow, but keep height similar
-  // Actually size passed in is already the final size
+  const fontSize = Math.floor(size * 0.95)
-  // Flip: 6 * (size * 0.75) + 2 * (size * 0.3) = 4.5 * size + 0.6 * size = 5.1 * size
-  // Digital: 8 chars, each char ≈ fontSize * 0.6 wide in monospace = 4.8 * fontSize
-  // To match: 4.8 * fontSize = 5.1 * size => fontSize = size * 1.06
-  const fontSize = Math.floor(size * 1.06)
 
   return (
     <div
       className="digital-clock"
-      style={{ fontSize: `${fontSize}px` }}
+      style={{ fontSize: `${fontSize}px`, lineHeight: '1' }}
     >
       {time}
     </div>
@@ -36,14 +32,17 @@ function App() {
     return () => clearInterval(timer)
   }, [])
 
-  // Responsive clock size - target 90% of page width
+  // Responsive clock size - fit within screen width
   useEffect(() => {
     const updateSize = () => {
       const width = window.innerWidth
-      // Direct calculation: target 90% width
+      // More conservative for small screens
-      const baseSize = (width * 0.9) / 5.1
+      const margin = width < 480 ? 40 : 60
-      const newSize = Math.floor(baseSize * 2.0) // Scale up more
+      const availableWidth = width - margin
-      setClockSize(Math.min(newSize, 320))
+      // Use larger divisor for small screens to prevent overflow
+      const divisor = width < 480 ? 7 : 6
+      const newSize = Math.floor(availableWidth / divisor)
+      setClockSize(Math.min(newSize, 200))
     }
     updateSize()
     window.addEventListener('resize', updateSize)