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/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>

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;