From 6b0f9d0f80b1f5f2ac34f32546d2db90af4f67df Mon Sep 17 00:00:00 2001
From: ittoview <ittoview@example.com>
Date: Sun, 26 Apr 2026 08:02:54 +0100
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=9F=A5=E8=AF=86=E9=A2=86?=
 =?UTF-8?q?=E5=9F=9F=E8=A3=81=E5=89=AA=E5=9B=A0=E7=B4=A0=E9=A1=B5=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/KnowledgeAreasTailoringPage.tsx | 64 ++++++++++++++---------
 1 file changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/pages/KnowledgeAreasTailoringPage.tsx b/src/pages/KnowledgeAreasTailoringPage.tsx
index d6c6c01..e21421d 100644
--- a/src/pages/KnowledgeAreasTailoringPage.tsx
+++ b/src/pages/KnowledgeAreasTailoringPage.tsx
@@ -629,24 +629,31 @@ export default function KnowledgeAreasTailoringPage() {
 
       <div
         className={clsx(
-          'overflow-hidden border border-gray-100 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800',
+          'relative overflow-hidden border border-gray-100 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800',
           isFullScreen ? 'flex h-full flex-col border-0 rounded-none shadow-none' : 'rounded-2xl min-h-[calc(100vh-12rem)] flex flex-col'
         )}
       >
         {renderToolbar(isFullScreen)}
 
-        <div className={clsx('flex-1 overflow-auto', isFullScreen && 'tailoring-no-scrollbar')}>
-          <table className="min-w-[1120px] w-full border-collapse">
+        <div
+          className={clsx(
+            'flex-1 overflow-y-auto overflow-x-hidden',
+            isPracticeMode && currentItem && 'pb-56 md:pb-52',
+            isFullScreen && 'tailoring-no-scrollbar'
+          )}
+        >
+          <table className="w-full table-fixed border-collapse">
+            <colgroup>
+              <col className="w-[12rem] sm:w-[14rem] lg:w-[16rem]" />
+              <col />
+            </colgroup>
             <thead>
               <tr>
-                <th className="sticky left-0 top-0 z-20 min-w-[220px] border border-gray-200 bg-gray-100 px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
+                <th className="sticky left-0 top-0 z-20 border border-gray-200 bg-gray-100 px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
                   知识领域
                 </th>
-                <th className="sticky top-0 z-10 min-w-[260px] border border-gray-200 bg-gray-100 px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
-                  敏捷裁剪因素
-                </th>
-                <th className="sticky top-0 z-10 min-w-[640px] border border-gray-200 bg-gray-100 px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
-                  说明
+                <th className="sticky top-0 z-10 border border-gray-200 bg-gray-100 px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
+                  裁剪因素与说明
                 </th>
               </tr>
             </thead>
@@ -707,26 +714,31 @@ export default function KnowledgeAreasTailoringPage() {
                       )}
 
                       <td className="border border-gray-200 p-0 align-top dark:border-gray-700">
-                        <FactorTitleCell
-                          item={item}
-                          isPracticeMode={isPracticeMode}
-                          isAnswered={isAnswered}
-                          isCurrent={isCurrent}
-                          showAnswer={isShowingAnswer}
-                          onLongPress={handleLongPress}
-                          onLongPressEnd={handleLongPressEnd}
-                          onClick={handleFactorClick}
-                        />
-                      </td>
-
-                      <td className="border border-gray-200 align-top dark:border-gray-700">
                         <div
                           className={clsx(
-                            'min-h-[72px] px-4 py-4 text-sm leading-7 text-gray-700 dark:text-gray-200',
-                            isCurrent && 'border-l-2 border-indigo-500 bg-indigo-50/50 dark:bg-indigo-900/10'
+                            'overflow-hidden bg-white dark:bg-gray-800',
+                            isCurrent && 'bg-indigo-50/30 dark:bg-indigo-900/10'
                           )}
                         >
-                          {item.description}
+                          <FactorTitleCell
+                            item={item}
+                            isPracticeMode={isPracticeMode}
+                            isAnswered={isAnswered}
+                            isCurrent={isCurrent}
+                            showAnswer={isShowingAnswer}
+                            onLongPress={handleLongPress}
+                            onLongPressEnd={handleLongPressEnd}
+                            onClick={handleFactorClick}
+                          />
+
+                          <div
+                            className={clsx(
+                              'border-t border-gray-100 px-4 py-4 text-sm leading-7 text-gray-700 dark:border-gray-700 dark:text-gray-200',
+                              isCurrent && 'border-l-2 border-indigo-500 bg-indigo-50/50 dark:bg-indigo-900/10'
+                            )}
+                          >
+                            {item.description}
+                          </div>
                         </div>
                       </td>
                     </tr>
@@ -738,7 +750,7 @@ export default function KnowledgeAreasTailoringPage() {
         </div>
 
         {isPracticeMode && currentItem && (
-          <div className="border-t border-gray-200 bg-white/90 backdrop-blur-md dark:border-gray-700 dark:bg-gray-800/90">
+          <div className="absolute inset-x-0 bottom-0 z-20 border-t border-gray-200 bg-white/92 shadow-[0_-12px_32px_rgba(15,23,42,0.08)] backdrop-blur-md dark:border-gray-700 dark:bg-gray-800/92 dark:shadow-none">
             <div className="px-6 py-4">
               <div className="border-b border-gray-200/70 pb-4 dark:border-gray-700/70">
                 <div className="flex items-center justify-center gap-3">