You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@causeway.apache.org by da...@apache.org on 2026/08/29 11:17:51 UTC
(causeway) 02/03: feat(htmx): use full width in sample applications
This is an automated email from the ASF dual-hosted git repository.
danhaywood pushed a commit to branch htmx
in repository https://gitbox.apache.org/repos/asf/causeway.git
commit 89c021a7c52e4c7c66a9cdddb8f6475356aef32e
Author: Dan Haywood <da...@haywood-associates.co.uk>
AuthorDate: Sat Aug 29 13:15:03 2026 +0200
feat(htmx): use full width in sample applications
---
.../changes/use-full-width-sample-pages/tasks.md | 14 ++++++-------
.../src/main/resources/static/css/application.css | 5 +++++
.../htmx/ReferenceAppHtmxPlaywrightTest.java | 24 ++++++++++++++++++++++
.../src/main/resources/static/css/application.css | 5 +++++
.../petclinic/PetClinicHtmxPlaywrightTest.java | 24 ++++++++++++++++++++++
5 files changed, 65 insertions(+), 7 deletions(-)
diff --git a/openspec/changes/use-full-width-sample-pages/tasks.md b/openspec/changes/use-full-width-sample-pages/tasks.md
index 54d7de684a0..f79cd19cb42 100644
--- a/openspec/changes/use-full-width-sample-pages/tasks.md
+++ b/openspec/changes/use-full-width-sample-pages/tasks.md
@@ -1,15 +1,15 @@
## 1. Application-local width policy
-- [ ] 1.1 Override shell and content width variables in the Petclinic application stylesheet without changing shared web-component or viewer styles.
-- [ ] 1.2 Apply the same application-local width overrides in the Reference Application HTMX stylesheet.
+- [x] 1.1 Override shell and content width variables in the Petclinic application stylesheet without changing shared web-component or viewer styles.
+- [x] 1.2 Apply the same application-local width overrides in the Reference Application HTMX stylesheet.
## 2. Browser regression coverage
-- [ ] 2.1 Add Petclinic Playwright coverage for wide viewport use, retained gutters, and existing narrow no-overflow behavior.
-- [ ] 2.2 Add Reference Application Playwright coverage for wide viewport use, retained gutters, and existing narrow no-overflow behavior.
+- [x] 2.1 Add Petclinic Playwright coverage for wide viewport use, retained gutters, and existing narrow no-overflow behavior.
+- [x] 2.2 Add Reference Application Playwright coverage for wide viewport use, retained gutters, and existing narrow no-overflow behavior.
## 3. Validation and archive readiness
-- [ ] 3.1 Run Petclinic integration and Playwright acceptance.
-- [ ] 3.2 Run Reference Application HTMX integration and Playwright acceptance.
-- [ ] 3.3 Run strict OpenSpec validation, formatting, license, diff, and working-tree checks.
+- [x] 3.1 Run Petclinic integration and Playwright acceptance.
+- [x] 3.2 Run Reference Application HTMX integration and Playwright acceptance.
+- [x] 3.3 Run strict OpenSpec validation, formatting, license, diff, and working-tree checks.
diff --git a/regressiontests/referenceapp/htmx/src/main/resources/static/css/application.css b/regressiontests/referenceapp/htmx/src/main/resources/static/css/application.css
index 9551991a071..97e70953462 100644
--- a/regressiontests/referenceapp/htmx/src/main/resources/static/css/application.css
+++ b/regressiontests/referenceapp/htmx/src/main/resources/static/css/application.css
@@ -4,6 +4,11 @@
* The ASF licenses this file to you under the Apache License, Version 2.0.
*/
+:root {
+ --causeway-content-width: 100%;
+ --causeway-shell-width: 100%;
+}
+
/* Keep retained collection regression targets wide enough to exercise qualified Grid presentation. */
.causeway-object-column:has(cw-collection[data-causeway-region="collection"]) {
grid-column: 1 / -1;
diff --git a/regressiontests/referenceapp/htmx/src/playwright/java/org/apache/causeway/regressiontests/referenceapp/htmx/ReferenceAppHtmxPlaywrightTest.java b/regressiontests/referenceapp/htmx/src/playwright/java/org/apache/causeway/regressiontests/referenceapp/htmx/ReferenceAppHtmxPlaywrightTest.java
index 5012491c947..8f0e72d5985 100644
--- a/regressiontests/referenceapp/htmx/src/playwright/java/org/apache/causeway/regressiontests/referenceapp/htmx/ReferenceAppHtmxPlaywrightTest.java
+++ b/regressiontests/referenceapp/htmx/src/playwright/java/org/apache/causeway/regressiontests/referenceapp/htmx/ReferenceAppHtmxPlaywrightTest.java
@@ -115,6 +115,7 @@ void closeBrowserContext() {
@Test
void menusChoicesAutocompleteCancellationAndRouteDisposal() {
openShell();
+ assertApplicationUsesAvailableWidth();
assertThat(page.locator("html").getAttribute("data-causeway-component-toolkit"))
.isEqualTo(nativeToolkit() ? "native" : "vaadin");
assertThat(page.locator("html").getAttribute("data-causeway-presentation"))
@@ -971,6 +972,29 @@ const record = value => globalThis.__referenceAppFailures.push(String(value));
});
}
+ @SuppressWarnings("unchecked")
+ private void assertApplicationUsesAvailableWidth() {
+ page.setViewportSize(1800, 900);
+ final var geometry = (List<Number>) page.evaluate("""
+ () => {
+ const viewport = document.documentElement.clientWidth;
+ const main = document.querySelector('.causeway-shell-main').getBoundingClientRect();
+ const navbar = document.querySelector('.causeway-shell-navbar').getBoundingClientRect();
+ return [viewport, main.width, main.left, viewport - main.right, navbar.width];
+ }
+ """);
+ final var viewport = geometry.get(0).doubleValue();
+ assertThat(page.locator("html").evaluate("element => getComputedStyle(element).getPropertyValue('--causeway-content-width').trim()"))
+ .isEqualTo("100%");
+ assertThat(page.locator("html").evaluate("element => getComputedStyle(element).getPropertyValue('--causeway-shell-width').trim()"))
+ .isEqualTo("100%");
+ assertThat(geometry.get(1).doubleValue()).isGreaterThan(viewport * 0.95);
+ assertThat(geometry.get(2).doubleValue()).isBetween(8.0, 32.0);
+ assertThat(geometry.get(3).doubleValue()).isBetween(8.0, 32.0);
+ assertThat(geometry.get(4).doubleValue()).isGreaterThan(viewport * 0.95);
+ page.setViewportSize(1440, 900);
+ }
+
private void openShell() {
page.navigate(url("/htmx"), new Page.NavigateOptions().setWaitUntil(WaitUntilState.DOMCONTENTLOADED));
waitForMenus();
diff --git a/viewers/webcomponents/sample-htmx-petclinic/src/main/resources/static/css/application.css b/viewers/webcomponents/sample-htmx-petclinic/src/main/resources/static/css/application.css
index 047f01e78f5..706f9ce2fd9 100644
--- a/viewers/webcomponents/sample-htmx-petclinic/src/main/resources/static/css/application.css
+++ b/viewers/webcomponents/sample-htmx-petclinic/src/main/resources/static/css/application.css
@@ -17,6 +17,11 @@
* under the License.
*/
+:root {
+ --causeway-content-width: 100%;
+ --causeway-shell-width: 100%;
+}
+
.petclinic-dashboard-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
diff --git a/viewers/webcomponents/sample-htmx-petclinic/src/playwright/java/org/apache/causeway/viewer/webcomponents/sample/htmx/petclinic/PetClinicHtmxPlaywrightTest.java b/viewers/webcomponents/sample-htmx-petclinic/src/playwright/java/org/apache/causeway/viewer/webcomponents/sample/htmx/petclinic/PetClinicHtmxPlaywrightTest.java
index 544ad578641..896fabcb33e 100644
--- a/viewers/webcomponents/sample-htmx-petclinic/src/playwright/java/org/apache/causeway/viewer/webcomponents/sample/htmx/petclinic/PetClinicHtmxPlaywrightTest.java
+++ b/viewers/webcomponents/sample-htmx-petclinic/src/playwright/java/org/apache/causeway/viewer/webcomponents/sample/htmx/petclinic/PetClinicHtmxPlaywrightTest.java
@@ -178,6 +178,7 @@ void closePage() {
@Order(1)
void routesHomeObjectsHistoryCollectionsAndResponsiveLayout() {
openHome();
+ assertApplicationUsesAvailableWidth();
assertThat(page.locator("html").getAttribute("data-causeway-component-toolkit"))
.isEqualTo(nativeToolkit() ? "native" : "vaadin");
@@ -624,6 +625,29 @@ void disposableOwnerExercisesCreateAndEveryObjectAction() {
assertThat(ownerRepository.findById("owner-5")).isNull();
}
+ @SuppressWarnings("unchecked")
+ private void assertApplicationUsesAvailableWidth() {
+ page.setViewportSize(1800, 900);
+ final var geometry = (List<Number>) page.evaluate("""
+ () => {
+ const viewport = document.documentElement.clientWidth;
+ const main = document.querySelector('.causeway-shell-main').getBoundingClientRect();
+ const navbar = document.querySelector('.causeway-shell-navbar').getBoundingClientRect();
+ return [viewport, main.width, main.left, viewport - main.right, navbar.width];
+ }
+ """);
+ final var viewport = geometry.get(0).doubleValue();
+ assertThat(page.locator("html").evaluate("element => getComputedStyle(element).getPropertyValue('--causeway-content-width').trim()"))
+ .isEqualTo("100%");
+ assertThat(page.locator("html").evaluate("element => getComputedStyle(element).getPropertyValue('--causeway-shell-width').trim()"))
+ .isEqualTo("100%");
+ assertThat(geometry.get(1).doubleValue()).isGreaterThan(viewport * 0.95);
+ assertThat(geometry.get(2).doubleValue()).isBetween(8.0, 32.0);
+ assertThat(geometry.get(3).doubleValue()).isBetween(8.0, 32.0);
+ assertThat(geometry.get(4).doubleValue()).isGreaterThan(viewport * 0.95);
+ page.setViewportSize(1440, 900);
+ }
+
private void openHome() {
page.navigate(url("/htmx"), new Page.NavigateOptions().setWaitUntil(WaitUntilState.DOMCONTENTLOADED));
waitForPageKind("custom");