fix(练习): 优化移动端布局和样式

- 调整底部固定区域布局，输入框和辅助信息分层显示
- 压缩矩阵格子间距和内边距，适配小屏幕
- 辅助信息区域限高并可滚动，只显示前2个裁剪因素
- 减小字体大小和组件尺寸，提升移动端体验
- 修复表头吸顶位置偏移

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>

src/components/practice/HintInfo.tsx

@@ -1,4 +1,3 @@
-import { motion } from 'framer-motion'
 import type { CellInfo } from '@/utils/practice'
 import { knowledgeAreaMap, processMap } from '@/data'
 
@@ -13,72 +12,53 @@ export function HintInfo({ currentCell }: HintInfoProps) {
     const ka = knowledgeAreaMap.get(currentCell.knowledgeAreaId)
     if (!ka?.tailoringFactors || ka.tailoringFactors.length === 0) {
       return (
-        <motion.div
-          id="hint-info"
-          className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-3xl mx-auto"
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3 }}
-        >
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
-            敏捷裁剪因素
-          </h3>
-          <p className="text-gray-500 dark:text-gray-400">暂无裁剪因素信息</p>
-        </motion.div>
+        <div className="text-sm text-gray-500 dark:text-gray-400">
+          暂无裁剪因素信息
+        </div>
       )
     }
 
     return (
-      <motion.div
-        id="hint-info"
-        className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-3xl mx-auto"
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-      >
-        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+      <div className="space-y-2">
+        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
           敏捷裁剪因素
         </h3>
-        <div className="space-y-3">
-          {ka.tailoringFactors.map((factor, index) => (
-            <div
-              key={index}
-              className="border-l-4 border-blue-500 pl-4 py-2"
-            >
-              <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-1">
-                {factor.title}
-              </h4>
-              <p className="text-sm text-gray-600 dark:text-gray-400">
+        <div className="space-y-1.5 text-xs">
+          {ka.tailoringFactors.slice(0, 2).map((factor, index) => (
+            <div key={index} className="flex gap-2">
+              <span className="font-medium text-gray-700 dark:text-gray-300 shrink-0">
+                {factor.title}：
+              </span>
+              <span className="text-gray-600 dark:text-gray-400 line-clamp-1">
                 {factor.description}
-              </p>
+              </span>
             </div>
           ))}
+          {ka.tailoringFactors.length > 2 && (
+            <div className="text-gray-500 dark:text-gray-500">
+              +{ka.tailoringFactors.length - 2} 个因素...
+            </div>
+          )}
         </div>
-      </motion.div>
+      </div>
     )
   } else {
     const process = processMap.get(currentCell.processId!)
     const purpose = process?.purpose
 
     return (
-      <motion.div
-        id="hint-info"
-        className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-3xl mx-auto"
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.3 }}
-      >
-        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
+      <div>
+        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1">
           主要作用
         </h3>
         {purpose ? (
-          <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+          <p className="text-xs text-gray-700 dark:text-gray-300 line-clamp-2">
             {purpose}
           </p>
         ) : (
-          <p className="text-gray-500 dark:text-gray-400">暂无主要作用说明</p>
+          <p className="text-xs text-gray-500 dark:text-gray-400">暂无主要作用说明</p>
         )}
-      </motion.div>
+      </div>
     )
   }
 }