From 7913db7a837219cfe550449ea6ff6e6dca0e3864 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Sat, 25 Jul 2026 19:17:13 +0800
Subject: [PATCH] fix(ui-layout): correct flex text truncation issues

Add min-w-0, w-full, and block classes to flex child elements and text nodes across various UI components to ensure text truncation works correctly. Remove outdated hardcoded card item width styles from global SCSS and replace them with inline responsive width classes where appropriate.
---
 src/components/SwipeCards/index.vue                |  6 +++---
 .../home/components/TemplateCard/index.vue         |  8 ++++----
 .../record/components/RecordCard/index.vue         |  8 ++++----
 src/pages-booking/index.vue                        |  4 ++--
 .../order/components/GoodsInfo/index.vue           |  8 ++++----
 .../order/components/OrderQrcode/index.vue         |  4 ++--
 src/pages-quick/components/Card/index.vue          |  4 ++--
 src/pages/ChatMain/HomeWelcome/index.vue           |  4 ++--
 .../ChatModule/FacilityLocationCard/index.vue      |  4 ++--
 src/pages/ChatModule/FaqHelpCard/index.vue         |  4 ++--
 src/pages/ChatModule/LongTextGuideCard/index.vue   |  4 ++--
 src/pages/ChatModule/MapNavigationCard/index.vue   |  6 +++---
 src/pages/ChatModule/PoiCompareCard/index.vue      |  4 ++--
 src/pages/ChatModule/RecommendPostsList/index.vue  |  4 ++--
 .../ChatModule/RecommendationListCard/index.vue    |  4 ++--
 src/pages/ChatModule/RoutePlanCard/index.vue       | 14 +++++++-------
 src/pages/ChatModule/ScenicImageCard/index.vue     |  6 +++---
 src/pages/ChatModule/SharedVisual/ActionRow.vue    |  6 +++---
 src/pages/ChatModule/SharedVisual/DetailShell.vue  |  4 ++--
 .../Discovery/components/CardSwiper/index.vue      |  6 +++---
 .../components/DiscoveryAudioToolCard/index.vue    | 10 +++++-----
 .../components/DiscoveryGuideMapToolCard/index.vue |  6 +++---
 .../components/DiscoveryPhotoToolCard/index.vue    | 14 +++++++-------
 .../Discovery/components/ExploreCards/index.vue    |  8 ++++----
 .../components/HeritageQuickPrompts/index.vue      |  6 +++---
 .../Discovery/components/QuickQuestions/index.vue  |  8 ++++----
 .../components/QuickQuestions/styles/index.scss    |  5 -----
 27 files changed, 82 insertions(+), 87 deletions(-)

diff --git a/src/components/SwipeCards/index.vue b/src/components/SwipeCards/index.vue
index 4df54f9..826b7f6 100644
--- a/src/components/SwipeCards/index.vue
+++ b/src/components/SwipeCards/index.vue
@@ -12,8 +12,8 @@
 
         <!-- 底部：价格 + 购买按钮 -->
         <view class="card-footer p-[12px] flex justify-between items-center">
-          <view class="border-box">
-            <view class="text-[14px] font-[500] text-[#333333] truncate">
+          <view class="border-box min-w-0 flex-1">
+            <view class="w-full text-[14px] font-[500] text-[#333333] truncate">
               {{ card.commodityName }}
             </view>
             <view class="card-price-row text-[#333333]">
@@ -221,4 +221,4 @@ const placeOrderHandle = (item) => {
 
 <style scoped lang="scss">
 @import "./styles/index.scss";
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages-aigc/home/components/TemplateCard/index.vue b/src/pages-aigc/home/components/TemplateCard/index.vue
index e9f9775..96081b2 100644
--- a/src/pages-aigc/home/components/TemplateCard/index.vue
+++ b/src/pages-aigc/home/components/TemplateCard/index.vue
@@ -11,11 +11,11 @@
       <view class="template-media-shade" />
     </view>
 
-    <view class="template-copy">
+    <view class="template-copy box-border w-full min-w-0">
       <text class="template-badge">{{ template.templateTag }}</text>
-      <text class="template-title truncate">{{ template.templateTitle || template.templateName }}</text>
-      <text class="template-desc truncate">{{ template.templateSubTitle }}</text>
-      <text class="template-note truncate">{{ template.templateDescription }}</text>
+      <text class="template-title block w-[178px] truncate">{{ template.templateTitle || template.templateName }}</text>
+      <text class="template-desc block w-[178px] truncate">{{ template.templateSubTitle }}</text>
+      <text class="template-note block w-[172px] truncate">{{ template.templateDescription }}</text>
       <button class="template-select" type="default" @tap.stop="emit('select')">
         选这个模板
       </button>
diff --git a/src/pages-aigc/record/components/RecordCard/index.vue b/src/pages-aigc/record/components/RecordCard/index.vue
index f521dcd..78fbaa4 100644
--- a/src/pages-aigc/record/components/RecordCard/index.vue
+++ b/src/pages-aigc/record/components/RecordCard/index.vue
@@ -7,10 +7,10 @@
       <text v-if="isGenerating" class="record-card-media-text">生成中</text>
     </view>
 
-    <view class="record-card-copy">
-      <text class="record-card-title truncate">{{ title }}</text>
-      <text class="record-card-time truncate">{{ record.createTime }}</text>
-      <text class="record-card-status truncate">{{ statusText }}</text>
+    <view class="record-card-copy w-full min-w-0">
+      <text class="record-card-title block w-full truncate">{{ title }}</text>
+      <text class="record-card-time block w-full truncate">{{ record.createTime }}</text>
+      <text class="record-card-status block w-full truncate">{{ statusText }}</text>
     </view>
 
     <view v-if="actionText" class="record-card-action">
diff --git a/src/pages-booking/index.vue b/src/pages-booking/index.vue
index 1f2ef0e..6d0f3a7 100644
--- a/src/pages-booking/index.vue
+++ b/src/pages-booking/index.vue
@@ -8,12 +8,12 @@
 
     <view class="booking-content flex-1 p-[12px] overflow-hidden scroll-y">
       <!-- 预约内容 -->
-      <view class="border-box bg-white p-[12px] rounded-[12px] mb-[12px]">
+      <view class="border-box w-full min-w-0 bg-white p-[12px] rounded-[12px] mb-[12px]">
         <!-- 酒店类型入住离店日期部分 -->
         <DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" :showBtn="true"
           @click="navigateToDetail(orderData)" />
 
-        <view class="text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
+        <view class="w-full text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
           {{ orderData.commodityName }}
         </view>
 
diff --git a/src/pages-order/order/components/GoodsInfo/index.vue b/src/pages-order/order/components/GoodsInfo/index.vue
index 443454f..7081cb9 100644
--- a/src/pages-order/order/components/GoodsInfo/index.vue
+++ b/src/pages-order/order/components/GoodsInfo/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <view v-if="orderType == 0" class="border-box bg-white p-[12px] rounded-[12px] mb-[12px]">
+  <view v-if="orderType == 0" class="border-box w-full min-w-0 bg-white p-[12px] rounded-[12px] mb-[12px]">
     <!-- 酒店类型入住离店日期部分 -->
     <DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" />
 
-    <view class="text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
+    <view class="w-full text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
       {{ orderData.commodityName }}
     </view>
 
@@ -20,8 +20,8 @@
     </view>
   </view>
 
-  <view v-if="orderType != 0" class="border-box bg-white p-[12px] rounded-[12px] mb-[12px]">
-    <view class="text-[16px] font-[500] text-[#000000] leading-[24px] truncate mb-[8px]">
+  <view v-if="orderType != 0" class="border-box w-full min-w-0 bg-white p-[12px] rounded-[12px] mb-[12px]">
+    <view class="w-full text-[16px] font-[500] text-[#000000] leading-[24px] truncate mb-[8px]">
       {{ orderData.commodityName }}
     </view>
 
diff --git a/src/pages-order/order/components/OrderQrcode/index.vue b/src/pages-order/order/components/OrderQrcode/index.vue
index af391e1..3a1ce07 100644
--- a/src/pages-order/order/components/OrderQrcode/index.vue
+++ b/src/pages-order/order/components/OrderQrcode/index.vue
@@ -13,8 +13,8 @@
       <view class="bg-white rounded-[12px] flex flex-col items-center justify-center p-[12px] mb-[12px] mx-[12px]">
 
         <view class="flex w-full flex-row items-center justify-between py-[4px]">
-          <view>
-            <view class="text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
+          <view class="min-w-0 flex-1">
+            <view class="w-full text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
               {{ selectedVoucher.name }}
             </view>
           </view>
diff --git a/src/pages-quick/components/Card/index.vue b/src/pages-quick/components/Card/index.vue
index f544f7d..1757f86 100644
--- a/src/pages-quick/components/Card/index.vue
+++ b/src/pages-quick/components/Card/index.vue
@@ -1,11 +1,11 @@
 <template>
   <view class="card bg-white p-[8px] rounded-[12px] flex flex-items-start m-[12px]" @click.stop="handleClick(item)">
     <image class="left rounded-[10px]" :src="item.commodityPhoto" mode="aspectFill" />
-    <view class="right flex-1 pl-[12px]">
+    <view class="right min-w-0 flex-1 pl-[12px]">
       <view class="text-[16px] leading-[24px] text-[#171717] mb-[4px]">
         {{ item.commodityName }}
       </view>
-      <view v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-[#99a0ae] mb-[4px] truncate">
+      <view v-if="item.commodityFacility" class="w-full text-[12px] leading-[16px] text-[#99a0ae] mb-[4px] truncate">
         {{ item.commodityFacility.join(" ") }}
       </view>
       <view class="text-[12px] leading-[18px] color-43669A">
diff --git a/src/pages/ChatMain/HomeWelcome/index.vue b/src/pages/ChatMain/HomeWelcome/index.vue
index ec81ad7..9d2f333 100644
--- a/src/pages/ChatMain/HomeWelcome/index.vue
+++ b/src/pages/ChatMain/HomeWelcome/index.vue
@@ -1,7 +1,7 @@
 <template>
   <view class="home-welcome-panel">
-    <view class="home-welcome-header">
-      <text class="home-welcome-title truncate">
+    <view class="home-welcome-header w-full min-w-0">
+      <text class="home-welcome-title block w-0 min-w-0 truncate">
         {{ props.mainPageDataModel.welcomeContent || "小七欢迎你～" }}
       </text>
       <text v-if="weatherText" class="home-welcome-weather">
diff --git a/src/pages/ChatModule/FacilityLocationCard/index.vue b/src/pages/ChatModule/FacilityLocationCard/index.vue
index 39b4423..c557a63 100644
--- a/src/pages/ChatModule/FacilityLocationCard/index.vue
+++ b/src/pages/ChatModule/FacilityLocationCard/index.vue
@@ -3,11 +3,11 @@
     <image class="facility-location-card__image block w-full" :src="data.image" mode="aspectFill" />
 
     <view class="facility-location-card__body px-[24px] pb-[24px]">
-      <view class="facility-location-card__title-row flex items-center">
+      <view class="facility-location-card__title-row flex w-full min-w-0 items-center">
         <view class="facility-location-card__badge text-[#2563eb] bg-[#eff6ff] text-[12px] font-bold">
           {{ type.text }}
         </view>
-        <view class="facility-location-card__title text-[#1e293b] text-[18px] font-bold truncate">
+        <view class="facility-location-card__title w-0 min-w-0 text-[#1e293b] text-[18px] font-bold truncate">
           {{ data.title }}
         </view>
       </view>
diff --git a/src/pages/ChatModule/FaqHelpCard/index.vue b/src/pages/ChatModule/FaqHelpCard/index.vue
index 69867d1..65898f4 100644
--- a/src/pages/ChatModule/FaqHelpCard/index.vue
+++ b/src/pages/ChatModule/FaqHelpCard/index.vue
@@ -12,9 +12,9 @@
     <view class="faq-help-card__divider"></view>
 
     <view class="faq-help-card__list">
-      <view v-for="item in questions" :key="item.id || item.text" class="faq-help-card__item flex items-center"
+      <view v-for="item in questions" :key="item.id || item.text" class="faq-help-card__item flex w-full min-w-0 items-center"
         :class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
-        <view class="faq-help-card__question text-[#475569] text-[18px] font-bold truncate flex-1">
+        <view class="faq-help-card__question w-0 min-w-0 text-[#475569] text-[18px] font-bold truncate flex-1">
           {{ item.text }}
         </view>
         <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
diff --git a/src/pages/ChatModule/LongTextGuideCard/index.vue b/src/pages/ChatModule/LongTextGuideCard/index.vue
index e76c220..a642dc2 100644
--- a/src/pages/ChatModule/LongTextGuideCard/index.vue
+++ b/src/pages/ChatModule/LongTextGuideCard/index.vue
@@ -21,12 +21,12 @@
     </view>
 
     <view v-else class="long-text-guide-card__detail-card bg-white rounded-[24px] overflow-hidden">
-      <view class="long-text-guide-card__detail-header flex items-center border-bottom-F1F5F9">
+      <view class="long-text-guide-card__detail-header box-border flex w-full min-w-0 items-center border-bottom-F1F5F9">
         <view class="long-text-guide-card__back flex items-center justify-center rounded-full font-bold"
           @click="closeDetail">
           <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
         </view>
-        <view class="long-text-guide-card__detail-title text-[#1e293b] text-[18px] font-bold truncate">
+        <view class="long-text-guide-card__detail-title w-0 min-w-0 text-[#1e293b] text-[18px] font-bold truncate">
           {{ activeItem.title }}
         </view>
         <view class="long-text-guide-card__badge long-text-guide-card__detail-badge text-[12px] font-bold"
diff --git a/src/pages/ChatModule/MapNavigationCard/index.vue b/src/pages/ChatModule/MapNavigationCard/index.vue
index 88102f1..a6cc4ae 100644
--- a/src/pages/ChatModule/MapNavigationCard/index.vue
+++ b/src/pages/ChatModule/MapNavigationCard/index.vue
@@ -9,11 +9,11 @@
     </view>
 
     <view class="map-navigation-card__content flex items-center">
-      <view class="map-navigation-card__info flex-1">
-        <view class="map-navigation-card__title text-[#1e293b] text-[18px] font-bold truncate">
+      <view class="map-navigation-card__info min-w-0 flex-1">
+        <view class="map-navigation-card__title w-full text-[#1e293b] text-[18px] font-bold truncate">
           {{ data.title }}
         </view>
-        <view class="map-navigation-card__distance text-[#94a3b8] text-[14px] font-bold truncate">
+        <view class="map-navigation-card__distance w-full text-[#94a3b8] text-[14px] font-bold truncate">
           {{ data.distance }}
         </view>
       </view>
diff --git a/src/pages/ChatModule/PoiCompareCard/index.vue b/src/pages/ChatModule/PoiCompareCard/index.vue
index dee5364..0628088 100644
--- a/src/pages/ChatModule/PoiCompareCard/index.vue
+++ b/src/pages/ChatModule/PoiCompareCard/index.vue
@@ -1,11 +1,11 @@
 <template>
   <view class="poi-compare-card w-full">
     <view v-if="!isDetail" class="poi-compare-card__overview bg-white rounded-[24px] overflow-hidden">
-      <view class="poi-compare-card__head flex items-center">
+      <view class="poi-compare-card__head flex w-full min-w-0 items-center">
         <view class="poi-compare-card__mark flex items-center justify-center rounded-full shrink-0">
           {{ data.icon }}
         </view>
-        <view class="poi-compare-card__title text-[#1e293b] text-[18px] font-bold truncate flex-1">
+        <view class="poi-compare-card__title w-0 min-w-0 text-[#1e293b] text-[18px] font-bold truncate flex-1">
           {{ data.title }}
         </view>
       </view>
diff --git a/src/pages/ChatModule/RecommendPostsList/index.vue b/src/pages/ChatModule/RecommendPostsList/index.vue
index 7460b51..0983543 100644
--- a/src/pages/ChatModule/RecommendPostsList/index.vue
+++ b/src/pages/ChatModule/RecommendPostsList/index.vue
@@ -11,8 +11,8 @@
           <view class="shadow absolute rounded-[16px]"></view>
         </view>
 
-        <view class="card-text border-box">
-          <view class="text-[11px] text-[#99a0ae] truncate">
+        <view class="card-text border-box w-full min-w-0">
+          <view class="w-full text-[11px] text-[#99a0ae] truncate">
             {{ item.topic }}
           </view>
         </view>
diff --git a/src/pages/ChatModule/RecommendationListCard/index.vue b/src/pages/ChatModule/RecommendationListCard/index.vue
index 7af4e57..735e87d 100644
--- a/src/pages/ChatModule/RecommendationListCard/index.vue
+++ b/src/pages/ChatModule/RecommendationListCard/index.vue
@@ -6,8 +6,8 @@
         class="recommendation-list-card__item inline-block bg-white rounded-[20px] overflow-hidden"
         :class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
         <image class="recommendation-list-card__image block w-full" :src="item.image" mode="aspectFill" />
-        <view class="recommendation-list-card__body p-[16px]">
-          <view class="recommendation-list-card__name text-[#1e293b] text-[18px] font-bold truncate">
+        <view class="recommendation-list-card__body box-border w-full min-w-0 p-[16px]">
+          <view class="recommendation-list-card__name w-full text-[#1e293b] text-[18px] font-bold truncate">
             {{ item.title }}
           </view>
           <view
diff --git a/src/pages/ChatModule/RoutePlanCard/index.vue b/src/pages/ChatModule/RoutePlanCard/index.vue
index c5d4c7d..59355a4 100644
--- a/src/pages/ChatModule/RoutePlanCard/index.vue
+++ b/src/pages/ChatModule/RoutePlanCard/index.vue
@@ -4,8 +4,8 @@
       class="route-plan-card__summary flex items-center bg-white rounded-[24px] overflow-hidden w-full"
       :class="{ 'is-disabled': disabled }" @click="openDetail">
       <image class="route-plan-card__cover block shrink-0" :src="data.image" mode="aspectFill" />
-      <view class="route-plan-card__body flex-1">
-        <view class="route-plan-card__title text-[#1e293b] text-[18px] font-bold truncate">
+      <view class="route-plan-card__body min-w-0 flex-1">
+        <view class="route-plan-card__title w-full text-[#1e293b] text-[18px] font-bold truncate">
           {{ data.title }}
         </view>
         <view class="route-plan-card__tags flex items-center">
@@ -21,11 +21,11 @@
     </view>
 
     <view v-else class="route-plan-card__detail bg-white rounded-[24px] overflow-hidden w-full">
-      <view class="route-plan-card__detail-head flex items-center">
+      <view class="route-plan-card__detail-head flex w-full min-w-0 items-center">
         <view class="route-plan-card__back flex items-center justify-center rounded-full shrink-0" @click="closeDetail">
           <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
         </view>
-        <view class="route-plan-card__detail-title text-[#1e293b] text-[18px] font-bold truncate flex-1">
+        <view class="route-plan-card__detail-title w-0 min-w-0 text-[#1e293b] text-[18px] font-bold truncate flex-1">
           {{ data.title }}
         </view>
         <view class="route-plan-card__detail-badge text-[#047857] bg-[#ecfdf5] text-[12px] font-bold">
@@ -42,11 +42,11 @@
             </view>
             <view class="route-plan-card__node bg-white rounded-[20px] flex items-center">
               <image class="route-plan-card__node-image block shrink-0" :src="node.image" mode="aspectFill" />
-              <view class="route-plan-card__node-body flex-1">
-                <view class="route-plan-card__node-title text-[#1e293b] text-[16px] font-bold truncate">
+              <view class="route-plan-card__node-body min-w-0 flex-1">
+                <view class="route-plan-card__node-title w-full text-[#1e293b] text-[16px] font-bold truncate">
                   {{ node.title }}
                 </view>
-                <view class="route-plan-card__node-desc text-[#94a3b8] text-[12px] font-bold truncate">
+                <view class="route-plan-card__node-desc w-full text-[#94a3b8] text-[12px] font-bold truncate">
                   {{ node.description }}
                 </view>
                 <view v-if="node.tag"
diff --git a/src/pages/ChatModule/ScenicImageCard/index.vue b/src/pages/ChatModule/ScenicImageCard/index.vue
index 2a6860b..b5c2a74 100644
--- a/src/pages/ChatModule/ScenicImageCard/index.vue
+++ b/src/pages/ChatModule/ScenicImageCard/index.vue
@@ -9,11 +9,11 @@
       {{ action.icon }}
     </view>
 
-    <view v-if="hasCaption" class="scenic-image-card__caption">
-      <view v-if="caption.title" class="scenic-image-card__title text-white text-[18px] font-bold truncate">
+    <view v-if="hasCaption" class="scenic-image-card__caption box-border w-full min-w-0">
+      <view v-if="caption.title" class="scenic-image-card__title w-full text-white text-[18px] font-bold truncate">
         {{ caption.title }}
       </view>
-      <view v-if="caption.subtitle" class="scenic-image-card__subtitle text-white text-[14px] font-bold truncate">
+      <view v-if="caption.subtitle" class="scenic-image-card__subtitle w-full text-white text-[14px] font-bold truncate">
         {{ caption.subtitle }}
       </view>
     </view>
diff --git a/src/pages/ChatModule/SharedVisual/ActionRow.vue b/src/pages/ChatModule/SharedVisual/ActionRow.vue
index fe75a21..5280773 100644
--- a/src/pages/ChatModule/SharedVisual/ActionRow.vue
+++ b/src/pages/ChatModule/SharedVisual/ActionRow.vue
@@ -6,9 +6,9 @@
       :class="toneClass">
       <slot name="icon">{{ icon }}</slot>
     </view>
-    <view class="visual-action-row__body flex-1">
-      <view class="visual-action-row__title text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</view>
-      <view v-if="subtitle" class="visual-action-row__subtitle truncate">
+    <view class="visual-action-row__body min-w-0 flex-1">
+      <view class="visual-action-row__title w-full text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</view>
+      <view v-if="subtitle" class="visual-action-row__subtitle w-full truncate">
         {{ subtitle }}
       </view>
     </view>
diff --git a/src/pages/ChatModule/SharedVisual/DetailShell.vue b/src/pages/ChatModule/SharedVisual/DetailShell.vue
index 8053346..8d7df9a 100644
--- a/src/pages/ChatModule/SharedVisual/DetailShell.vue
+++ b/src/pages/ChatModule/SharedVisual/DetailShell.vue
@@ -1,11 +1,11 @@
 <template>
   <CardShell variant="detail">
-    <view class="visual-detail__header flex items-center px-[16px] border-bottom-F1F5F9">
+    <view class="visual-detail__header box-border flex w-full min-w-0 items-center px-[16px] border-bottom-F1F5F9">
       <view class="visual-detail__back mr-[8px] rounded-full bg-[#f8fafc] text-[#334155] font-bold text-center"
         @click="$emit('back')">
         <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
       </view>
-      <view class="visual-detail__title flex-1 text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</view>
+      <view class="visual-detail__title w-0 min-w-0 flex-1 text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</view>
       <BadgePill v-if="tag" :label="tag" :tone="tone" />
     </view>
     <slot />
diff --git a/src/pages/Discovery/components/CardSwiper/index.vue b/src/pages/Discovery/components/CardSwiper/index.vue
index 075e084..4f9ad5c 100644
--- a/src/pages/Discovery/components/CardSwiper/index.vue
+++ b/src/pages/Discovery/components/CardSwiper/index.vue
@@ -14,14 +14,14 @@
             <image class="card-image" :src="slot.item.coverImage" mode="aspectFill" />
           </view>
 
-          <view class="card-body">
+          <view class="card-body box-border w-full min-w-0">
             <view v-if="slot.item.tag" class="card-tag">
               {{ slot.item.tag }}
             </view>
-            <view class="card-title truncate">
+            <view class="card-title w-full truncate">
               {{ slot.item.title }}
             </view>
-            <view v-if="slot.item.subTitle" class="card-desc truncate">
+            <view v-if="slot.item.subTitle" class="card-desc w-full truncate">
               {{ slot.item.subTitle }}
             </view>
           </view>
diff --git a/src/pages/Discovery/components/DiscoveryAudioToolCard/index.vue b/src/pages/Discovery/components/DiscoveryAudioToolCard/index.vue
index 911bd6f..03a574f 100644
--- a/src/pages/Discovery/components/DiscoveryAudioToolCard/index.vue
+++ b/src/pages/Discovery/components/DiscoveryAudioToolCard/index.vue
@@ -8,15 +8,15 @@
       </view>
     </view>
 
-    <view class="audio-content">
-      <text class="audio-title truncate">{{ normalizedItem.title }}</text>
-      <text class="audio-subtitle truncate">{{ normalizedItem.subTitle }}</text>
+    <view class="audio-content min-w-0 flex-1">
+      <text class="audio-title block w-full truncate">{{ normalizedItem.title }}</text>
+      <text class="audio-subtitle block w-full truncate">{{ normalizedItem.subTitle }}</text>
 
-      <view class="audio-progress-row">
+      <view class="audio-progress-row w-full min-w-0">
         <view class="audio-progress-track">
           <view class="audio-progress-fill" :style="{ width: `${normalizedItem.progress}%` }" />
         </view>
-        <text class="audio-time truncate">
+        <text class="audio-time block w-[90px] truncate">
           {{ normalizedItem.currentTime }} / {{ normalizedItem.duration }}
         </text>
       </view>
diff --git a/src/pages/Discovery/components/DiscoveryGuideMapToolCard/index.vue b/src/pages/Discovery/components/DiscoveryGuideMapToolCard/index.vue
index a270748..10270aa 100644
--- a/src/pages/Discovery/components/DiscoveryGuideMapToolCard/index.vue
+++ b/src/pages/Discovery/components/DiscoveryGuideMapToolCard/index.vue
@@ -16,9 +16,9 @@
       </view>
     </view>
 
-    <view class="guide-map-content">
-      <text class="guide-map-title truncate">{{ normalizedItem.title }}</text>
-      <text class="guide-map-subtitle truncate">{{ normalizedItem.subTitle }}</text>
+    <view class="guide-map-content min-w-0 flex-1">
+      <text class="guide-map-title block w-full truncate">{{ normalizedItem.title }}</text>
+      <text class="guide-map-subtitle block w-full truncate">{{ normalizedItem.subTitle }}</text>
     </view>
   </view>
 </template>
diff --git a/src/pages/Discovery/components/DiscoveryPhotoToolCard/index.vue b/src/pages/Discovery/components/DiscoveryPhotoToolCard/index.vue
index 2e1d21a..e458118 100644
--- a/src/pages/Discovery/components/DiscoveryPhotoToolCard/index.vue
+++ b/src/pages/Discovery/components/DiscoveryPhotoToolCard/index.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="discovery-photo-tool-card" hover-class="is-pressed" hover-stay-time="80" @tap="handleSelect">
-    <view class="photo-visual">
+    <view class="photo-visual w-[88px] min-w-0">
       <view class="camera-illustration">
         <view class="camera-top" />
         <view class="camera-flash" />
@@ -12,21 +12,21 @@
           <view class="camera-dot is-small" />
         </view>
       </view>
-      <text class="photo-badge truncate">{{ normalizedItem.badge }}</text>
+      <text class="photo-badge w-[calc(100%_-_18px)] truncate">{{ normalizedItem.badge }}</text>
     </view>
 
-    <view class="photo-content">
-      <text class="photo-title truncate">{{ normalizedItem.title }}</text>
-      <text class="photo-subtitle truncate">{{ normalizedItem.subTitle }}</text>
+    <view class="photo-content min-w-0 flex-1">
+      <text class="photo-title block w-full truncate">{{ normalizedItem.title }}</text>
+      <text class="photo-subtitle block w-full truncate">{{ normalizedItem.subTitle }}</text>
 
       <view class="photo-options">
-        <view v-for="(option, index) in normalizedItem.options" :key="getOptionKey(option, index)" class="photo-option"
+        <view v-for="(option, index) in normalizedItem.options" :key="getOptionKey(option, index)" class="photo-option min-w-0 flex-1"
           hover-class="is-option-pressed" hover-stay-time="80" @tap.stop="handleOptionSelect(option, index)">
           <view class="photo-option-thumb">
             <image v-if="option.coverImage" class="photo-option-image" :src="option.coverImage" mode="aspectFill" />
             <view v-else class="photo-option-placeholder" :class="`is-${index}`" />
           </view>
-          <text class="photo-option-label truncate">{{ option.label }}</text>
+          <text class="photo-option-label block w-[76px] truncate">{{ option.label }}</text>
         </view>
       </view>
     </view>
diff --git a/src/pages/Discovery/components/ExploreCards/index.vue b/src/pages/Discovery/components/ExploreCards/index.vue
index 60975cf..0de33ca 100644
--- a/src/pages/Discovery/components/ExploreCards/index.vue
+++ b/src/pages/Discovery/components/ExploreCards/index.vue
@@ -9,10 +9,10 @@
 
           <view class="explore-card-gradient" />
 
-          <view class="explore-card-content">
-            <text class="explore-card-tag truncate">{{ item.tag }}</text>
-            <text class="explore-card-title truncate">{{ item.title }}</text>
-            <text v-if="item.subTitle" class="explore-card-desc truncate">
+          <view class="explore-card-content box-border w-full min-w-0">
+            <text class="explore-card-tag block w-full truncate">{{ item.tag }}</text>
+            <text class="explore-card-title block w-full truncate">{{ item.title }}</text>
+            <text v-if="item.subTitle" class="explore-card-desc block w-full truncate">
               {{ item.subTitle }}
             </text>
           </view>
diff --git a/src/pages/Discovery/components/HeritageQuickPrompts/index.vue b/src/pages/Discovery/components/HeritageQuickPrompts/index.vue
index b552eb3..ad8b2d5 100644
--- a/src/pages/Discovery/components/HeritageQuickPrompts/index.vue
+++ b/src/pages/Discovery/components/HeritageQuickPrompts/index.vue
@@ -4,9 +4,9 @@
       <view v-for="(item, index) in normalizedList" :key="getItemKey(item, index)" class="prompt-card"
         hover-class="is-pressed" hover-stay-time="80" @tap="handleTap(item.raw, index)">
         <view class="prompt-mark" />
-        <view class="prompt-copy">
-          <text class="prompt-title truncate">{{ item.title }}</text>
-          <text class="prompt-desc truncate">{{ item.subTitle }}</text>
+        <view class="prompt-copy min-w-0 flex-1">
+          <text class="prompt-title block w-full truncate">{{ item.title }}</text>
+          <text class="prompt-desc block w-full truncate">{{ item.subTitle }}</text>
         </view>
       </view>
     </view>
diff --git a/src/pages/Discovery/components/QuickQuestions/index.vue b/src/pages/Discovery/components/QuickQuestions/index.vue
index bd5ae43..e6c7f7b 100644
--- a/src/pages/Discovery/components/QuickQuestions/index.vue
+++ b/src/pages/Discovery/components/QuickQuestions/index.vue
@@ -2,13 +2,13 @@
   <view class="container pl-[12px]">
     <view class="container-scroll text-[0px] overflow-x-auto whitespace-nowrap">
 
-      <view class="card-item bg-white inline-block rounded-[20px] mr-[10px]" v-for="(item, index) in list" :key="index"
-        @click="sendReply(item)">
+      <view class="card-item inline-block w-[150px] mr-[10px] rounded-[20px] bg-white" v-for="(item, index) in list"
+        :key="index" @click="sendReply(item)">
 
-        <view class="flex flex-row justify-start p-[10px]">
+        <view class="box-border flex w-full min-w-0 flex-row justify-start overflow-hidden p-[10px]">
           <image class="card-img shrink-0 rounded-[14px]" :src="createSvgIndex(index)" />
 
-          <view class=" flex flex-col flex-1 pl-[8px] py-[4px]">
+          <view class="flex w-0 min-w-0 flex-1 flex-col overflow-hidden pl-[8px] py-[4px]">
             <view class="w-full text-[12px] font-[600] text-[#171717] truncate">
               {{ item.title }}
             </view>
diff --git a/src/pages/Discovery/components/QuickQuestions/styles/index.scss b/src/pages/Discovery/components/QuickQuestions/styles/index.scss
index e7f7791..a210c82 100644
--- a/src/pages/Discovery/components/QuickQuestions/styles/index.scss
+++ b/src/pages/Discovery/components/QuickQuestions/styles/index.scss
@@ -2,11 +2,6 @@
 
 }
 
-.card-item {
-  min-width: 130px;
-  max-width: 150px;
-}
-
 .card-img {
   height: 40px;
   width: 40px;