Update app.py

app.py

@@ -87,20 +87,25 @@ css = """
 #board {
     max-width: 400px;
     margin: 20px auto;
+    overflow: visible !important;
 }
 #board table {
     width: 100%;
     table-layout: fixed;
+    border-collapse: separate;
+    border-spacing: 4px;
 }
 #board td {
     text-align: center;
-    font-size: 32px;
-    padding: 12px;
+    font-size: 28px;
+    padding: 8px;
     width: 14.28%;
+    height: 40px;
+    vertical-align: middle;
 }
 .button-row {
     max-width: 400px;
-    margin: 0 auto;
+    margin: 0 auto 20px auto;
     display: flex;
     justify-content: space-between;
     gap: 10px;
@@ -108,6 +113,7 @@ css = """
 .button-row button {
     flex: 1;
     min-width: 40px;
+    height: 40px;
 }
 """
 
@@ -118,8 +124,9 @@ def create_ui():
         
         state = gr.State({"game_over": False})
         
-        with gr.Row(elem_classes="button-row"):
-            buttons = [gr.Button(str(i), size="sm") for i in range(BOARD_SIZE[1])]
+        with gr.Box(elem_classes="button-container"):
+            with gr.Row(elem_classes="button-row"):
+                buttons = [gr.Button(str(i), size="sm") for i in range(BOARD_SIZE[1])]
         
         board = gr.Dataframe(
             value=format_board(initialize_game()),
@@ -129,15 +136,16 @@ def create_ui():
             wrap=True,
             elem_id="board",
             row_count=BOARD_SIZE[0],
-            col_count=BOARD_SIZE[1]
+            col_count=BOARD_SIZE[1],
+            max_rows=BOARD_SIZE[0],
+            height=300
         )
         
         message = gr.Textbox(value="Your turn!", label="Status")
         new_game = gr.Button("New Game")
         
         def reset_game():
-            state = {"game_over": False}
-            return format_board(initialize_game()), "Your turn!", state
+            return format_board(initialize_game()), "Your turn!", {"game_over": False}
         
         new_game.click(
             reset_game,
@@ -148,7 +156,7 @@ def create_ui():
             button.click(
                 play_game,
                 inputs=[board, gr.Number(value=i, visible=False), state],
-                outputs=[board, message]
+                outputs=[board, message, state]
             )
     
     return demo