Update app.py

app.py

@@ -95,6 +95,43 @@ css = """
     border-collapse: separate;
     border-spacing: 4px;
 }
+#board td {
+    text-align: center;
+    font-size: 28px;
+    padding: 8px;
+    width: 14.28%;
+    height: 40px;
+    vertical-align: middle;
+    background: #f0f0f0;  /* Light background for cells */
+    border-radius: 4px;   /* Rounded corners */
+}
+.button-container {
+    max-width: 400px;
+    margin: 0 auto 20px auto;
+    padding: 10px;
+}
+.button-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+}
+.button-row button {
+    flex: 1;
+    min-width: 40px;
+    height: 40px;
+}
+"""
+#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: 28px;
@@ -127,11 +164,12 @@ def create_ui():
         
         state = gr.State({"game_over": False})
         
-        # Simplified button container
+        # Button container
         with gr.Row(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])]
         
+        # Updated Dataframe configuration
         board = gr.Dataframe(
             value=format_board(initialize_game()),
             interactive=False,
@@ -140,8 +178,7 @@ def create_ui():
             wrap=True,
             elem_id="board",
             row_count=BOARD_SIZE[0],
-            col_count=BOARD_SIZE[1],
-            max_rows=BOARD_SIZE[0]
+            col_count=BOARD_SIZE[1]
         )
         
         message = gr.Textbox(value="Your turn!", label="Status")