From 61b67f71d5256c09779b72284f1f9ebf43ecba16 Mon Sep 17 00:00:00 2001 From: Brandon Temple Date: Fri, 21 Aug 2026 18:31:45 -0500 Subject: [PATCH] Let query forms grow with their content --- cache-bust.json | 6 +++--- src/styles/app.css | 2 +- src/styles/form-mode.css | 17 ++++++++--------- tests/browser/browserSmoke.mjs | 20 +++++++++++++------- 4 files changed, 25 insertions(+), 20 deletions(-) diff --git a/cache-bust.json b/cache-bust.json index c6ff2cf..b786e1d 100644 --- a/cache-bust.json +++ b/cache-bust.json @@ -1,5 +1,5 @@ { - "version": "edb06878dc13225f", + "version": "1b1cb56d846246bf", "generatedBy": "scripts/updateCacheBusting.mjs", "assets": { "assets/app-icon-16.png": "6645731d86da1071", @@ -190,13 +190,13 @@ "src/lib/workbook-export/workbookXmlUtils.js": "2cc0fcdda2a1d411", "src/lib/workbook-export/xlsxZipWriter.js": "5f4c1f6e98fbcb06", "src/styles/api-settings.css": "c5f76b60fb8684bb", - "src/styles/app.css": "faab68de08b308c6", + "src/styles/app.css": "c71a8cb896cb673b", "src/styles/base.css": "8a925806001990b6", "src/styles/bib-compare.css": "144f2a1093e00dcf", "src/styles/controls.css": "30d36ccc65181c21", "src/styles/dashboard.css": "d674dda33be597fe", "src/styles/filters.css": "9e7297e65dd68a3c", - "src/styles/form-mode.css": "7f332bdcf58c2df0", + "src/styles/form-mode.css": "7de8927db30d30f6", "src/styles/help.css": "1e75cc7af857e66a", "src/styles/history.css": "64598bfd565a29af", "src/styles/interaction.css": "57124a9332ac9605", diff --git a/src/styles/app.css b/src/styles/app.css index 83579e7..e8012cd 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -3,7 +3,7 @@ @import url("./base.css?v=8a925806001990b6"); @import url("./help.css?v=1e75cc7af857e66a"); @import url("./filters.css?v=9e7297e65dd68a3c"); -@import url("./form-mode.css?v=7f332bdcf58c2df0"); +@import url("./form-mode.css?v=7de8927db30d30f6"); @import url("./table.css?v=8bc187669db70079"); @import url("./controls.css?v=30d36ccc65181c21"); @import url("./history.css?v=64598bfd565a29af"); diff --git a/src/styles/form-mode.css b/src/styles/form-mode.css index 402bbc9..570f48f 100644 --- a/src/styles/form-mode.css +++ b/src/styles/form-mode.css @@ -27,7 +27,7 @@ box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12); display: flex; flex-direction: column; - max-height: min(30vh, 240px); + max-height: none; overflow: visible; min-width: 0; } @@ -275,8 +275,7 @@ .form-mode-body { min-height: 0; - overflow-y: auto; - overflow-x: auto; + overflow: visible; padding-right: 0.15rem; } @@ -526,11 +525,11 @@ body.form-workspace-focused .form-mode-card { width: min(100%, 1120px); height: auto; min-height: min(34rem, calc(100dvh - var(--header-height) - 2.5rem)); - max-height: calc(100dvh - var(--header-height) - 2.5rem); + max-height: none; padding: 0; margin-bottom: 1rem; border-radius: 0.5rem; - overflow: hidden; + overflow: visible; } body.form-workspace-focused .form-mode-header { @@ -633,9 +632,9 @@ body.form-workspace-focused .form-mode-btn:hover:not(:disabled) { } body.form-workspace-focused .form-mode-body { - flex: 1 1 auto; + flex: 0 0 auto; padding: 0.85rem; - overflow-x: hidden; + overflow: visible; } body.form-workspace-focused .form-mode-fields { @@ -783,7 +782,7 @@ body.form-workspace-focused .form-mode-field-remove { } .form-mode-body { - overflow-x: hidden; + overflow: visible; padding-right: 0; } @@ -801,7 +800,7 @@ body.form-workspace-focused .form-mode-field-remove { body.form-workspace-focused .form-mode-card { height: auto; min-height: 24rem; - max-height: calc(100dvh - var(--header-height) - 1rem); + max-height: none; margin-bottom: 0; } diff --git a/tests/browser/browserSmoke.mjs b/tests/browser/browserSmoke.mjs index 25393ef..9d09daf 100644 --- a/tests/browser/browserSmoke.mjs +++ b/tests/browser/browserSmoke.mjs @@ -969,6 +969,11 @@ async function runSmokeTest() { return { filterPanel: readRect('#filter-side-panel'), formCard: readRect('#form-mode-card'), + formCardClientHeight: document.querySelector('#form-mode-card')?.clientHeight || 0, + formCardScrollHeight: document.querySelector('#form-mode-card')?.scrollHeight || 0, + formBodyClientHeight: document.querySelector('.form-mode-body')?.clientHeight || 0, + formBodyOverflowY: window.getComputedStyle(document.querySelector('.form-mode-body')).overflowY, + formBodyScrollHeight: document.querySelector('.form-mode-body')?.scrollHeight || 0, pageOverflowY: Math.max( 0, document.documentElement.scrollHeight - document.documentElement.clientHeight, @@ -982,9 +987,8 @@ async function runSmokeTest() { if ( restoredResultLayout.formCard?.height > 0 - && restoredResultLayout.formCard.bottom <= restoredResultLayout.viewportHeight - 8 - && restoredResultLayout.viewportHeight - restoredResultLayout.formCard.bottom <= 42 - && restoredResultLayout.pageOverflowY <= 1 + && restoredResultLayout.formCardScrollHeight <= restoredResultLayout.formCardClientHeight + 1 + && restoredResultLayout.formBodyScrollHeight <= restoredResultLayout.formBodyClientHeight + 1 ) { break; } @@ -1053,13 +1057,15 @@ async function runSmokeTest() { if ( !restoredResultLayout.formCard || !restoredResultLayout.tableWithFilter - || restoredResultLayout.formCard.bottom > restoredResultLayout.viewportHeight + 1 - || restoredResultLayout.viewportHeight - restoredResultLayout.formCard.bottom > 42 - || restoredResultLayout.pageOverflowY > 1 + || restoredResultLayout.formCard.height <= 240 + || restoredResultLayout.formCardScrollHeight > restoredResultLayout.formCardClientHeight + 1 + || restoredResultLayout.formBodyScrollHeight > restoredResultLayout.formBodyClientHeight + 1 + || ['auto', 'scroll'].includes(restoredResultLayout.formBodyOverflowY) + || restoredResultLayout.pageOverflowY <= 1 || (restoredResultLayout.filterPanel?.height > 0 && Math.abs(restoredResultLayout.tableWithFilter.height - restoredResultLayout.filterPanel.height) > 2) ) { - throw new Error(`Reloaded result layout should keep the table row and lower form panel within the viewport: ${JSON.stringify(restoredResultLayout)}`); + throw new Error(`Reloaded result layout should grow the form with the document instead of creating a nested vertical scroller: ${JSON.stringify(restoredResultLayout)}`); } const getResultsRequestsBeforeRememberedReload = queryApiStub.countAction('get_results');