diff --git a/apps/shopify-app/app/routes/app.routes.$routeId.jsx b/apps/shopify-app/app/routes/app.routes.$routeId.jsx index c196c8e..3d09953 100644 --- a/apps/shopify-app/app/routes/app.routes.$routeId.jsx +++ b/apps/shopify-app/app/routes/app.routes.$routeId.jsx @@ -879,25 +879,6 @@ const childRouteDisclosureEmptyStyle = { color: "#6d7175", }; -const childRouteActionsHeaderCellStyle = { - ...childRouteOrderHeaderCellStyle, - background: "#f7f7f7", - boxShadow: "-8px 0 12px rgba(255, 255, 255, 0.92)", - position: "sticky", - right: 0, - zIndex: 3, -}; - -const childRouteActionsCellStyle = { - ...childRouteOrderCellStyle, - background: "#ffffff", - boxShadow: "-8px 0 12px rgba(255, 255, 255, 0.92)", - overflow: "visible", - position: "sticky", - right: 0, - zIndex: 2, -}; - const childStopActionsButtonStyle = { ...routeActionButtonStyle, minHeight: "28px", @@ -1700,6 +1681,25 @@ const childRouteOrderCellStyle = { textAlign: "center", }; +const childRouteActionsHeaderCellStyle = { + ...childRouteOrderHeaderCellStyle, + background: "#f7f7f7", + boxShadow: "-8px 0 12px rgba(255, 255, 255, 0.92)", + position: "sticky", + right: 0, + zIndex: 3, +}; + +const childRouteActionsCellStyle = { + ...childRouteOrderCellStyle, + background: "#ffffff", + boxShadow: "-8px 0 12px rgba(255, 255, 255, 0.92)", + overflow: "visible", + position: "sticky", + right: 0, + zIndex: 2, +}; + const childRouteStopCellStyle = { ...childRouteOrderCellStyle, padding: "8px 0", diff --git a/apps/shopify-app/tests/route-detail-child-presentation.test.mjs b/apps/shopify-app/tests/route-detail-child-presentation.test.mjs index 3e212bc..952471e 100644 --- a/apps/shopify-app/tests/route-detail-child-presentation.test.mjs +++ b/apps/shopify-app/tests/route-detail-child-presentation.test.mjs @@ -332,6 +332,18 @@ test("child timeline and order table share explicit centered alignment axes", () assert.match(routeDetailSource, /style=\{column\.key === "actions" \? childRouteActionsHeaderCellStyle : childRouteOrderHeaderCellStyle\}/); }); +test("child action cell styles initialize after the shared styles they extend", () => { + const orderHeaderIndex = routeDetailSource.indexOf("const childRouteOrderHeaderCellStyle"); + const orderCellIndex = routeDetailSource.indexOf("const childRouteOrderCellStyle"); + const actionsHeaderIndex = routeDetailSource.indexOf("const childRouteActionsHeaderCellStyle"); + const actionsCellIndex = routeDetailSource.indexOf("const childRouteActionsCellStyle"); + + assert.ok(orderHeaderIndex >= 0); + assert.ok(orderCellIndex >= 0); + assert.ok(actionsHeaderIndex > orderHeaderIndex); + assert.ok(actionsCellIndex > orderCellIndex); +}); + test("child timeline keeps breathing room and stop digits share a browser-neutral optical correction", () => { assert.match(routeDetailSource, /const childRouteTimelineStyle = \{[\s\S]*padding: "8px 8px 16px"/); assert.match(routeDetailSource, /aria-label="Child route stop timeline"[\s\S]*style=\{childRouteTimelineStyle\}/);