From 6ae80c5591315e95c2d014ed32a3a9dd55a1fb80 Mon Sep 17 00:00:00 2001
From: Zichao Lin <earthjasonlin@163.com>
Date: Sun, 5 Jul 2026 23:07:41 +0800
Subject: [PATCH] feat(ui): stack country and recipient/sender vertically in
 postcard list

---
 app/static/style.css         |  1 +
 app/templates/postcards.html | 10 +++++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/static/style.css b/app/static/style.css
index 6340572..a0d0368 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -214,6 +214,7 @@ code { background: var(--bg); padding: .15rem .4rem; border-radius: 4px; font-si
 .postcard-row-info span { white-space: nowrap; color: var(--text-muted); }
 .postcard-row-action { flex-shrink: 0; }
 .postcard-row-date { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
+.postcard-row-detail { display: flex; flex-direction: column; gap: 0; font-size: .85rem; color: var(--text-muted); }
 
 /* Filter */
 .filter-bar { margin-bottom: 1.25rem; }
diff --git a/app/templates/postcards.html b/app/templates/postcards.html
index ed3c4a6..da2b71e 100644
--- a/app/templates/postcards.html
+++ b/app/templates/postcards.html
@@ -35,8 +35,10 @@
     </div>
     <div class="postcard-row-info">
         <strong>{{ pc.card_number }}</strong>
-        <span>{{ pc.country|flag }} {{ pc.country or '-' }}</span>
-        <span>→ {{ pc.recipient_name or '-' }}</span>
+        <div class="postcard-row-detail">
+            <span>{{ pc.country|flag }} {{ pc.country or '-' }}</span>
+            <span>→ {{ pc.recipient_name or '-' }}</span>
+        </div>
         <span class="badge badge-{{ pc.status }}">{{ {'sent':'已寄出','delivered':'已送达'}.get(pc.status) }}</span>
         <span class="postcard-row-date">
             {% if pc.send_time %}{{ pc.send_time.strftime('%Y-%m-%d') }}寄出{% endif %}
@@ -70,7 +72,9 @@
     </div>
     <div class="postcard-row-info">
         <strong>{{ pc.card_number }}</strong>
-        <span>← {{ pc.sender_name or '-' }}</span>
+        <div class="postcard-row-detail">
+            <span>← {{ pc.sender_name or '-' }}</span>
+        </div>
         {% if pc.receive_time %}<span class="postcard-row-date">{{ pc.receive_time.strftime('%Y-%m-%d') }}收到</span>{% endif %}
     </div>
 </a>