diff --git a/src/shared/components/InboundCodeRelationshipDrawer.test.ts b/src/shared/components/InboundCodeRelationshipDrawer.test.ts
index 9926df7b..b84e1163 100644
--- a/src/shared/components/InboundCodeRelationshipDrawer.test.ts
+++ b/src/shared/components/InboundCodeRelationshipDrawer.test.ts
@@ -88,6 +88,9 @@ describe('InboundCodeRelationshipDrawer contract', () => {
     expect(wrapper.text()).toContain('PLT-LAX-001')
     expect(wrapper.text()).toContain('SKU-001')
     expect(wrapper.text()).not.toMatch(/9007199254740993[1-9]/)
+    expect(wrapper.find('.relationship-sections').exists()).toBe(true)
+    expect(wrapper.findAll('.relationship-section')).toHaveLength(3)
+    expect(wrapper.findAll('.relationship-status')).toHaveLength(3)
 
     await wrapper.setProps({ modelValue: false })
     await wrapper.setProps({ modelValue: true })
@@ -135,4 +138,13 @@ describe('InboundCodeRelationshipDrawer contract', () => {
     expect(source).toContain('text-overflow:ellipsis')
     expect(source).toContain(':title="display(baseAssociation.inboundCode)"')
   })
+
+  it('keeps sections and status badges within the drawer at desktop and narrow widths', () => {
+    expect(source).toContain('.relationship-sections{display:grid;width:100%;min-width:0')
+    expect(source).toContain('.relationship-section{box-sizing:border-box;width:100%;min-width:0')
+    expect(source).toContain('flex-wrap:wrap')
+    expect(source).toContain('.relationship-section h3{flex:1 1 auto;min-width:0')
+    expect(source).toContain('.relationship-status{flex:0 0 auto;max-width:100%}')
+    expect(source).toContain('.inventory-table{max-width:100%')
+  })
 })
diff --git a/src/shared/components/InboundCodeRelationshipDrawer.vue b/src/shared/components/InboundCodeRelationshipDrawer.vue
index 726a227a..ae7a9d05 100644
--- a/src/shared/components/InboundCodeRelationshipDrawer.vue
+++ b/src/shared/components/InboundCodeRelationshipDrawer.vue
@@ -53,7 +53,7 @@ watch(() => [props.modelValue, props.inboundCode, props.canReadBase, props.canRe
 
     <div v-else class="relationship-sections">
       <section v-if="canReadBase" class="relationship-section" aria-label="订单基础关联">
-        <header><h3>订单基础信息</h3><StatusBadge v-if="baseAssociation?.orderStatus" :status="baseAssociation.orderStatus" /></header>
+        <header><h3>订单基础信息</h3><StatusBadge v-if="baseAssociation?.orderStatus" class="relationship-status" :status="baseAssociation.orderStatus" /></header>
         <LoadErrorState v-if="baseError" title="订单基础关联加载失败" :message="baseError.message" @retry="load"><template #details><ApiErrorMeta :details="baseError" /></template></LoadErrorState>
         <dl v-else-if="baseAssociation" class="compact-facts">
           <div><dt>入仓码</dt><dd :title="display(baseAssociation.inboundCode)">{{ display(baseAssociation.inboundCode) }}</dd></div><div><dt>订单编码</dt><dd :title="display(baseAssociation.orderNo, '订单编码待补充')">{{ display(baseAssociation.orderNo, '订单编码待补充') }}</dd></div>
@@ -63,7 +63,7 @@ watch(() => [props.modelValue, props.inboundCode, props.canReadBase, props.canRe
       </section>
 
       <section v-if="canReadLoading" class="relationship-section" aria-label="装柜与PDA关联">
-        <header><h3>装柜与PDA</h3><StatusBadge v-if="loadingAssociation?.loadingStatus" :status="loadingAssociation.loadingStatus" /></header>
+        <header><h3>装柜与PDA</h3><StatusBadge v-if="loadingAssociation?.loadingStatus" class="relationship-status" :status="loadingAssociation.loadingStatus" /></header>
         <LoadErrorState v-if="loadingAssociationError" title="装柜关联加载失败" :message="loadingAssociationError.message" @retry="load"><template #details><ApiErrorMeta :details="loadingAssociationError" /></template></LoadErrorState>
         <dl v-else-if="loadingAssociation" class="compact-facts">
           <div><dt>订单编码</dt><dd :title="display(loadingAssociation.orderNo, '订单编码待补充')">{{ display(loadingAssociation.orderNo, '订单编码待补充') }}</dd></div><div><dt>装柜计划</dt><dd :title="display(loadingAssociation.loadingPlanNo, '尚未进入装柜')">{{ display(loadingAssociation.loadingPlanNo, '尚未进入装柜') }}</dd></div>
@@ -73,7 +73,7 @@ watch(() => [props.modelValue, props.inboundCode, props.canReadBase, props.canRe
       </section>
 
       <section v-if="canReadOverseas" class="relationship-section" aria-label="海外入仓关联">
-        <header><h3>海外入仓与库存</h3><StatusBadge v-if="overseas?.overseasReceivingStatus" :status="overseas.overseasReceivingStatus" /></header>
+        <header><h3>海外入仓与库存</h3><StatusBadge v-if="overseas?.overseasReceivingStatus" class="relationship-status" :status="overseas.overseasReceivingStatus" /></header>
         <LoadErrorState v-if="overseasError" title="海外关联加载失败" :message="overseasError.message" @retry="load"><template #details><ApiErrorMeta :details="overseasError" /></template></LoadErrorState>
         <el-empty v-else-if="overseas && !overseas.found" description="服务端未找到该入仓码的海外关联数据" :image-size="56" />
         <template v-else-if="overseas">
@@ -91,5 +91,5 @@ watch(() => [props.modelValue, props.inboundCode, props.canReadBase, props.canRe
 </template>
 
 <style scoped>
-.relationship-sections{display:grid;gap:14px}.relationship-section{border:1px solid var(--cc-border);border-radius:10px;padding:14px;background:var(--cc-surface)}.relationship-section>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.relationship-section h3{margin:0;font-size:15px}.compact-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;background:var(--cc-border)}.compact-facts>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;padding:9px 10px;background:var(--cc-surface)}.compact-facts dt{color:var(--cc-muted)}.compact-facts dd{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compact-facts small{display:block;overflow:hidden;color:var(--cc-muted);margin-top:2px;text-overflow:ellipsis;white-space:nowrap}.compact-list{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;padding:9px 10px;border-top:1px solid var(--cc-border)}.compact-list span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inventory-table{margin-top:10px}@media(max-width:720px){.compact-facts{grid-template-columns:1fr}}
+.relationship-sections{display:grid;width:100%;min-width:0;gap:14px}.relationship-section{box-sizing:border-box;width:100%;min-width:0;border:1px solid var(--cc-border);border-radius:10px;padding:14px;background:var(--cc-surface)}.relationship-section>header{display:flex;min-width:0;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px}.relationship-section h3{flex:1 1 auto;min-width:0;margin:0;font-size:15px}.relationship-status{flex:0 0 auto;max-width:100%}.compact-facts{display:grid;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;background:var(--cc-border)}.compact-facts>div{display:grid;min-width:0;grid-template-columns:92px minmax(0,1fr);gap:8px;padding:9px 10px;background:var(--cc-surface)}.compact-facts dt{color:var(--cc-muted)}.compact-facts dd{min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compact-facts small{display:block;overflow:hidden;color:var(--cc-muted);margin-top:2px;text-overflow:ellipsis;white-space:nowrap}.compact-list{display:grid;min-width:0;grid-template-columns:92px minmax(0,1fr);gap:8px;padding:9px 10px;border-top:1px solid var(--cc-border)}.compact-list span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.inventory-table{max-width:100%;margin-top:10px}@media(max-width:720px){.compact-facts{grid-template-columns:1fr}}
 </style>