From a5dbb5fa7063dd146e24fc878b417ced6da23e80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B1=A4=E5=AD=A6=E4=BC=9A?= <tangxuehui@wondersgroup.com>
Date: Mon, 15 Jun 2026 14:51:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BA=B8=E8=B4=A8=E5=8D=95?=
 =?UTF-8?q?=E6=8D=AE=E6=8A=AC=E5=A4=B4=E6=97=A5=E6=9C=9F=E9=97=B4=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../documentForms/DocumentFormShell.vue       | 12 ++++--
 .../documentForms/documentForms.test.js       | 14 +++++++
 frontend/src/styles/main.css                  | 37 ++++++++++++++++---
 3 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/documentForms/DocumentFormShell.vue b/frontend/src/components/documentForms/DocumentFormShell.vue
index 718a35f..130c899 100644
--- a/frontend/src/components/documentForms/DocumentFormShell.vue
+++ b/frontend/src/components/documentForms/DocumentFormShell.vue
@@ -8,10 +8,14 @@
       :signature-labels="signatureLabels"
     >
       <div class="document-form-meta" :aria-label="metaAriaLabel">
-        <span>{{ metaLabel }}</span>
-        <strong>{{ companyName }}</strong>
-        <span>{{ dateLabel }}</span>
-        <strong>{{ displayBusinessDate }}</strong>
+        <span class="document-form-meta-pair">
+          <span>{{ metaLabel }}</span>
+          <strong>{{ companyName }}</strong>
+        </span>
+        <span class="document-form-meta-pair document-form-meta-date">
+          <span>{{ dateLabel }}</span>
+          <strong>{{ displayBusinessDate }}</strong>
+        </span>
       </div>
 
       <main class="document-form-body">
diff --git a/frontend/src/components/documentForms/documentForms.test.js b/frontend/src/components/documentForms/documentForms.test.js
index 1870d88..bad8e7e 100644
--- a/frontend/src/components/documentForms/documentForms.test.js
+++ b/frontend/src/components/documentForms/documentForms.test.js
@@ -50,6 +50,20 @@ describe("document form foundation", () => {
     assert.match(mainCss, /\.warehouse-paper-control-grid/);
   });
 
+  it("keeps document header labels close to their values instead of stretching business date apart", () => {
+    const shell = readComponent("DocumentFormShell.vue");
+
+    assert.match(shell, /class="document-form-meta-pair"/);
+    assert.match(shell, /class="document-form-meta-pair document-form-meta-date"/);
+    assert.match(mainCss, /\.document-form-meta\s*\{[\s\S]*display:\s*flex;/);
+    assert.match(mainCss, /\.document-form-meta-date\s*\{[\s\S]*margin-left:\s*auto;/);
+    assert.doesNotMatch(
+      mainCss.match(/\.document-form-meta\s*\{[\s\S]*?\}/)?.[0] || "",
+      /grid-template-columns:[^;]*1fr/,
+      "document form meta should not use a flexible spacer that separates 业务日期 from its date value"
+    );
+  });
+
   it("keeps the final paper layout contract after legacy warehouse grid rules", () => {
     const legacyWarehouseGrid = mainCss.lastIndexOf(".warehouse-document-section-grid {");
     const finalContract = mainCss.lastIndexOf("Final paper document layout contract");
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index f281518..960fbc9 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -16536,10 +16536,11 @@ body .login-production-layout .login-security-foot p {
 }
 
 .document-form-meta {
-  display: grid;
-  grid-template-columns: auto auto minmax(0, 1fr) auto;
-  gap: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 18px;
   align-items: center;
+  justify-content: flex-start;
   padding: 9px 12px;
   color: rgba(23, 18, 10, 0.72);
   border: 2px solid rgba(20, 14, 6, 0.82);
@@ -16552,11 +16553,29 @@ body .login-production-layout .login-security-foot p {
   letter-spacing: 0.08em;
 }
 
+.document-form-meta-pair {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.document-form-meta-date {
+  margin-left: auto;
+}
+
+.document-form-meta-pair > span {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
 .document-form-meta strong {
   display: inline-flex;
   align-items: center;
+  flex: 0 0 auto;
   min-height: 26px;
   padding: 0 10px;
+  white-space: nowrap;
   color: #145c39;
   border: 1.5px solid rgba(31, 122, 74, 0.64);
   background: rgba(232, 246, 232, 0.62);
@@ -16842,7 +16861,6 @@ body .login-production-layout .login-security-foot p {
 }
 
 @media (max-width: 960px) {
-  .document-form-meta,
   .document-section-grid,
   .document-control-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -16858,12 +16876,21 @@ body .login-production-layout .login-security-foot p {
     padding-inline: 0;
   }
 
-  .document-form-meta,
   .document-section-grid,
   .document-control-grid {
     grid-template-columns: 1fr;
   }
 
+  .document-form-meta {
+    align-items: stretch;
+  }
+
+  .document-form-meta-pair,
+  .document-form-meta-date {
+    width: 100%;
+    margin-left: 0;
+  }
+
   .document-paper-field,
   .document-paper-field-wide,
   .document-paper-field-full {