Keep corgi artwork fully visible in mini program banners

pets-fe/pages/home/home.wxss

@@ -9,22 +9,20 @@
   box-shadow: 0 5rpx 22rpx #174b3520;
 }
 .hero {
-  height: 330rpx;
+  min-height: 330rpx;
   background: #194f42;
   border-radius: 38rpx;
-  position: relative;
-  overflow: hidden;
   display: flex;
   align-items: center;
+  gap: 12rpx;
   padding: 35rpx;
   color: white;
 }
 .hero-copy {
-  position: relative;
-  z-index: 2;
   display: flex;
   flex-direction: column;
-  width: 62%;
+  flex: 1;
+  min-width: 0;
 }
 .hero-small {
   color: #abd9b8;
@@ -46,11 +44,9 @@
   margin-top: 36rpx;
 }
 .hero image {
-  position: absolute;
+  width: 48%;
-  width: 310rpx;
+  height: 220rpx;
-  height: 290rpx;
+  flex-shrink: 0;
-  right: -24rpx;
-  bottom: 8rpx;
 }
 .heading {
   margin-top: 8rpx;

pets-fe/pages/meetups/meetups.wxml

@@ -2,12 +2,11 @@
   <view class="eyebrow">LET'S WALK TOGETHER</view>
   <view class="title">约个伴一起遛 🌿</view>
   <view class="banner">
+    <view class="banner-copy">
       <text>好天气，和新朋友一起走走</text>
-    <strong>
+      <view class="banner-title first">下一次快乐</view>
-      下一次快乐
+      <view class="banner-title">从这里出发</view>
-      <br />
+    </view>
-      从这里出发
-    </strong>
     <image src="/assets/corgi-family-five.png" mode="aspectFit" />
   </view>
   <view class="row">
@@ -45,10 +44,8 @@
     </view>
     <view class="detail">
       <view bindtap="location">📍 {{active.place_name}} {{active.latitude?'· 点开地图':''}}</view>
-      <br />
+      <view>🗓 {{active.date}}</view>
-      🗓 {{active.date}}
+      <view>🐕 {{active.participants}} / {{active.max_people}} 人已报名</view>
-      <br />
-      🐕 {{active.participants}} / {{active.max_people}} 人已报名
     </view>
     <view class="desc">{{active.description}}</view>
     <view wx:if="{{active.host_user_id!==userId&&!joined}}">

pets-fe/pages/meetups/meetups.wxss

@@ -2,31 +2,36 @@
   background: #dfeee2;
   border-radius: 34rpx;
   min-height: 245rpx;
-  padding: 36rpx;
+  padding: 30rpx;
-  position: relative;
+  display: flex;
-  overflow: hidden;
+  align-items: center;
+  gap: 12rpx;
 }
-.banner text,
+.banner-copy {
-.banner strong {
+  flex: 1;
+  min-width: 0;
+}
+.banner-copy text,
+.banner-title {
   display: block;
-  position: relative;
-  z-index: 2;
 }
-.banner text {
+.banner-copy text {
   color: #549375;
   font-size: 22rpx;
 }
-.banner strong {
+.banner-title {
   font-size: 35rpx;
   line-height: 1.3;
+  font-weight: 800;
+  white-space: nowrap;
+}
+.banner-title.first {
   margin-top: 16rpx;
 }
 .banner image {
-  width: 290rpx;
+  width: 52%;
-  height: 220rpx;
+  height: 190rpx;
-  position: absolute;
+  flex-shrink: 0;
-  right: -30rpx;
-  bottom: 0;
 }
 .add {
   font-size: 24rpx;

pets-fe/pages/pets/pets.wxss

@@ -4,14 +4,17 @@
   color: white;
   min-height: 220rpx;
   padding: 35rpx;
-  position: relative;
+  display: flex;
-  overflow: hidden;
+  align-items: center;
+  gap: 12rpx;
+}
+.family > view {
+  flex: 1;
+  min-width: 0;
 }
 .family text,
 .family strong {
   display: block;
-  position: relative;
-  z-index: 2;
 }
 .family text {
   color: #a4d6b8;
@@ -19,15 +22,12 @@
 }
 .family strong {
   font-size: 32rpx;
-  width: 55%;
   margin-top: 20rpx;
 }
 .family image {
-  width: 270rpx;
+  width: 48%;
-  height: 205rpx;
+  height: 185rpx;
-  position: absolute;
+  flex-shrink: 0;
-  right: -5rpx;
-  bottom: 0;
 }
 .add {
   font-weight: 800;