From 67d921ac68ebc558d29a7eb7d22cc21307708493 Mon Sep 17 00:00:00 2001
From: OziinG <145884442+OziinG@users.noreply.github.com>
Date: Thu, 23 Jul 2026 17:53:30 +0900
Subject: [PATCH] Restore route detail server startup before redeploying K-food

Constraint: Module-level style objects must initialize after every shared style they spread.
Rejected: Mask the production smoke failure | the K-food container was crash-looping before accepting HTTP traffic.
Confidence: high
Scope-risk: narrow
Directive: Keep derived module constants below their dependencies and preserve the initialization-order regression test.
Tested: 357 app tests; React Router production build; local production server boot and HTTP 200 smoke; typecheck; public URL guard; git diff --check
---
 .../app/routes/app.routes.$routeId.jsx        | 38 +++++++++----------
 .../route-detail-child-presentation.test.mjs  | 12 ++++++
 2 files changed, 31 insertions(+), 19 deletions(-)

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\}/);