Fix for Safari select box heights

Refs https://github.com/simonw/datasette/pull/2789#issuecomment-4772241681
This commit is contained in:
Simon Willison 2026-06-22 12:35:34 -07:00
commit dada4de172
2 changed files with 30 additions and 0 deletions

View file

@ -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 {

View file

@ -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",