From 5a4d2c7a1bbd93a90ae6043ce09d1f9af89fa5b0 Mon Sep 17 00:00:00 2001
From: richarjiang <richarjiang@tencent.com>
Date: Tue, 8 Sep 2026 17:47:38 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=20=E9=A2=84=E7=BA=A6?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/src/pages/booking/detail.vue | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/pages/booking/detail.vue b/packages/app/src/pages/booking/detail.vue
index 7007495..2ee6485 100644
--- a/packages/app/src/pages/booking/detail.vue
+++ b/packages/app/src/pages/booking/detail.vue
@@ -1003,7 +1003,8 @@ function updateLayout() {
   }
 
   &--dock-tall {
-    height: 320rpx;
+    height: calc(280rpx + env(safe-area-inset-bottom));
+    min-height: calc(128px + env(safe-area-inset-bottom));
   }
 }
 
@@ -1047,7 +1048,13 @@ function updateLayout() {
 
 .dock-row {
   display: flex;
-  gap: 12rpx;
+  flex-shrink: 0;
+  gap: 16rpx;
+
+  .dock-btn {
+    flex: 1 1 0;
+    min-width: 0;
+  }
 }
 
 .dock--slot .dock-btn {
@@ -1057,9 +1064,13 @@ function updateLayout() {
 }
 
 .dock-btn {
-  flex: 1;
-  height: 80rpx;
-  border-radius: 999rpx;
+  // The dock stacks vertically; only horizontal rows should distribute space.
+  flex: none;
+  box-sizing: border-box;
+  height: 96rpx;
+  min-height: 48px;
+  padding: 0 24rpx;
+  border-radius: 20rpx;
   background: #6b8276;
   display: flex;
   align-items: center;
@@ -1071,7 +1082,7 @@ function updateLayout() {
 
   &--ghost {
     background: #fff;
-    border: 1rpx solid #eee8e3;
+    border: 1rpx solid #d8cec5;
   }
 
   &--danger {