From dada4de172c974f677c51855e8234ffb22c6259a Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Mon, 22 Jun 2026 12:35:34 -0700
Subject: [PATCH] Fix for Safari select box heights

Refs https://github.com/simonw/datasette/pull/2789#issuecomment-4772241681
---
 datasette/static/app.css | 12 ++++++++++++
 tests/test_playwright.py | 18 ++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/datasette/static/app.css b/datasette/static/app.css
index 1cca8b80..90d7e7e9 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -1864,12 +1864,18 @@ dialog.table-create-dialog::backdrop {
 .table-create-input {
     box-sizing: border-box;
     min-width: 0;
+    min-height: 46px;
     border: 1px solid var(--rule);
     border-radius: 5px;
     padding: 8px 10px;
     color: var(--ink);
     background: #fff;
     font: inherit;
+    line-height: 1.35;
+}
+
+select.table-create-input {
+    height: 46px;
 }
 
 .table-create-input-placeholder {
@@ -2333,12 +2339,18 @@ dialog.table-alter-dialog::backdrop {
 .table-alter-input {
     box-sizing: border-box;
     min-width: 0;
+    min-height: 46px;
     border: 1px solid var(--rule);
     border-radius: 5px;
     padding: 8px 10px;
     color: var(--ink);
     background: #fff;
     font: inherit;
+    line-height: 1.35;
+}
+
+select.table-alter-input {
+    height: 46px;
 }
 
 .table-alter-input-placeholder {
diff --git a/tests/test_playwright.py b/tests/test_playwright.py
index 94dcbd64..eefec118 100644
--- a/tests/test_playwright.py
+++ b/tests/test_playwright.py
@@ -295,6 +295,15 @@ def test_create_table_flow(page, datasette_server):
         placeholder_select.locator("option:checked").inner_text() == "- custom type -"
     )
     assert "table-create-input-placeholder" in placeholder_select.get_attribute("class")
+    assert dialog.locator(".table-create-column-main").first.evaluate("""node => {
+            const inputHeight = node.querySelector(
+                ".table-create-column-name"
+            ).getBoundingClientRect().height;
+            const selectHeight = node.querySelector(
+                ".table-create-column-type"
+            ).getBoundingClientRect().height;
+            return Math.abs(inputHeight - selectHeight) <= 1;
+        }""")
     dialog.locator('input[name="table"]').fill("playwright_created")
     dialog.locator(".table-create-column-name").nth(1).fill("title")
     dialog.locator(".table-create-add-column").click()
@@ -340,6 +349,15 @@ def test_alter_table_flow(page, datasette_server):
     dialog.wait_for()
     assert dialog.locator(".modal-title").inner_text() == "Alter table projects"
     assert dialog.locator(".table-alter-save").is_disabled()
+    assert dialog.locator(".table-alter-column-main").first.evaluate("""node => {
+            const inputHeight = node.querySelector(
+                ".table-alter-column-name"
+            ).getBoundingClientRect().height;
+            const selectHeight = node.querySelector(
+                ".table-alter-column-type"
+            ).getBoundingClientRect().height;
+            return Math.abs(inputHeight - selectHeight) <= 1;
+        }""")
     type_options = dialog.locator(".table-alter-column-type").first.locator("option")
     assert type_options.all_inner_texts() == [
         "text",