fix：修改猜你想问区域的样式错乱问题

src/pages/Home/HomeNew.tsx

@@ -169,11 +169,11 @@ useEffect(() => {
       )}
       <div className="h-full w-full">
         <div className="box flex flex-col h-full w-full">
-          <div className="flex-1 items-center pt-[24px]  overflow-y-scroll sm:pt-[32px] scrollbar-hide sm:overflow-hidden">
+          <div className="flex-1 items-center pt-[24px] overflow-y-scroll sm:pt-[32px] scrollbar-hide">
             <div className="w-full">
               <div className="flex justify-center gap-[20px] mt-[22px] sm:mt-[62px]">
                 {/* 左侧区域 - 产品问答和您可以试着问我 */}
-                <div className="flex flex-col gap-[20px] sm:mt-[-62px] justify-center">
+                <div className="flex flex-col gap-[20px] justify-center mt-0 sm:mt-[-62px]">
                   <motion.div className="w-full hidden sm:block sm:w-auto" {...getAnimationProps(2)}>
                     <QuestionList
                       questions={productQuestions.content}

src/pages/Home/components/QuestionList/QuestionList.tsx

@@ -50,7 +50,16 @@ function getRandomIndices(total: number, count: number): number[] {
   return Array.from(indices)
 }
 
-const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAuth, questions, dotColor, background, title, iconImg, showRefresh = true, displayCount = 4 }) => {
+const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({
+  checkAuth,
+  questions,
+  dotColor,
+  background,
+  title,
+  iconImg,
+  showRefresh = true,
+  displayCount = 4,
+}) => {
   const [isRotating, setIsRotating] = useState(false)
   const [displayedItems, setDisplayedItems] = useState<string[]>([])
   const [isClicking, setIsClicking] = useState(false)
@@ -69,11 +78,13 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu
   const handleClick = (item: string) => {
     if (checkAuth() && !isClicking) {
       setIsClicking(true)
-      dispatch(createConversation({
+      dispatch(
+        createConversation({
           conversationData: {},
           shouldNavigate: true,
           shouldSendQuestion: item,
-      }))
+        }),
+      )
       // 防止重复点击
       setTimeout(() => {
         setIsClicking(false)
@@ -85,22 +96,21 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu
     updateDisplayedItems()
   }, [updateDisplayedItems])
   return (
-    <div className="h-[276px] bg-white box-border px-[20px] py-[24px] rounded-[24px] w-full sm:w-[360px] md:w-[300px]" style={{ background }}>
-      <h3 className="h-[32px] flex items-center justify-between">
-        <div className="flex items-center">
-          <Image className="w-[32px] h-[32px]" src={iconImg} alt="" />
-          <span className="text-[18px] ml-[12px] font-medium">{title}</span>
-        </div>
-        {
-          showRefresh
-            ? (
-              <Button
-                onPress={handleRefresh}
-                isDisabled={isRotating}
-                isIconOnly
-                color="primary"
-                variant="light"
+    <div
+      className="bg-white box-border px-[20px] py-[24px] rounded-[24px] w-full sm:w-[360px] md:w-[300px]"
+      style={{ background }}
     >
+      <h3 className="min-h-[32px] flex items-center justify-between whitespace-nowrap">
+        <div className="flex items-center min-w-0 flex-1">
+          <Image className="w-[32px] h-[32px] flex-shrink-0" src={iconImg} alt="" />
+          <div className="text-[18px] ml-[12px] font-medium overflow-hidden text-ellipsis whitespace-nowrap flex-1 min-w-0">
+            {title}
+          </div>
+        </div>
+        {showRefresh
+? (
+          <div className="flex-shrink-0 ml-[8px]">
+            <Button onPress={handleRefresh} isDisabled={isRotating} isIconOnly color="primary" variant="light">
               <motion.div
                 animate={{ rotate: isRotating ? -360 : 0 }}
                 transition={{
@@ -112,11 +122,9 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu
                 <Refresh />
               </motion.div>
             </Button>
+          </div>
         )
-            : null
-
-        }
-
+: null}
       </h3>
       <motion.ul
         key={displayedItems.join(',')}
@@ -125,8 +133,7 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu
         animate="visible"
         className="mt-[18px] flex flex-col gap-[8px] w-full"
       >
-        {
-          displayedItems.map((item, index) => (
+        {displayedItems.map((item, index) => (
           <motion.li
             key={`question-${item}`}
             custom={index}
@@ -137,15 +144,19 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu
             layout
             className="w-full"
           >
-              <Button onPress={() => handleClick(item)} color="primary" variant="light" className="text-left bg-[#F7FCFF] w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
+            <Button
+              onPress={() => handleClick(item)}
+              color="primary"
+              variant="light"
+              className="text-left bg-[#F7FCFF] w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary"
+            >
               <div className="w-full text-nowrap text-ellipsis overflow-hidden">
                 <span style={{ color: dotColor }}>·</span>
                 <span className="ml-[8px]">{item}</span>
               </div>
             </Button>
           </motion.li>
-          ))
-        }
+        ))}
       </motion.ul>
     </div>
   )