Update table.css

assets/table.css

@@ -1,4 +1,3 @@
-
 #amily2_memorisation_forms_panel {
 
     --am2-font-size-base: 14px;
@@ -21,22 +20,19 @@
 
     --am2-table-bg: rgba(0,0,0,0.2);
     --am2-table-border: 1px solid rgba(255, 255, 255, 0.25);
-    --am2-table-cell-padding: 4px 6px;
+    --am2-table-cell-padding: 6px 8px;
     --am2-table-cell-font-size: 0.95em;
     
-
     --am2-header-bg: rgba(255, 255, 255, 0.1);
     --am2-header-color: #e0e0e0;
     --am2-header-editable-bg: rgba(172, 216, 255, 0.1);
     --am2-header-editable-focus-bg: rgba(172, 216, 255, 0.25);
     --am2-header-editable-focus-outline: 1px solid #79b8ff;
 
-
     --am2-cell-editable-bg: rgba(255, 255, 172, 0.1);
     --am2-cell-editable-focus-bg: rgba(255, 255, 172, 0.25);
     --am2-cell-editable-focus-outline: 1px solid #ffc107;
 
-
     --am2-index-col-bg: rgba(0, 0, 0, 0.3) !important;
     --am2-index-col-color: #aaa !important;
     --am2-index-col-width: 40px;
@@ -86,17 +82,28 @@
 
 #amily2_memorisation_forms_panel .table-controls {
     display: flex;
-    flex-direction: row; /* Explicitly horizontal */
+    flex-direction: row;
     gap: var(--am2-controls-gap);
     justify-content: flex-end;
     margin-bottom: var(--am2-controls-margin-bottom);
 }
 
+/* ===================================================================== */
+/* ================== 【V65.0】最终布局圣旨 - 智能兼容 ================== */
+/* ===================================================================== */
+
+#amily2_memorisation_forms_panel .table-instance-container {
+    margin-bottom: 20px;
+    /* 【V65.0 核心】为表格容器启用水平滚动，作为最终保险 */
+    overflow-x: auto;
+}
 
 #amily2_memorisation_forms_panel table[id^="amily2-table-"] {
     width: 100%;
     border-collapse: collapse;
     background-color: var(--am2-table-bg);
+    /* 【V65.0 修正】在桌面端，我们依然希望表格能自适应，而不是固定布局 */
+    /* table-layout: fixed; */ 
 }
 
 #amily2_memorisation_forms_panel table[id^="amily2-table-"] th,
@@ -105,11 +112,19 @@
     padding: var(--am2-table-cell-padding);
     text-align: left;
     font-size: var(--am2-table-cell-font-size);
+    
+    /* 【V65.0 核心】使用更智能的断词策略 */
+    overflow-wrap: break-word;
+    word-wrap: break-word; /* 兼容旧版浏览器 */
+    word-break: break-word; /* 优先在单词边界换行 */
 }
 
 #amily2_memorisation_forms_panel table[id^="amily2-table-"] th {
     background-color: var(--am2-header-bg);
     color: var(--am2-header-color);
+    /* 【V65.0 新增】为表头设置一个最小宽度，保证可读性 */
+    min-width: 120px;
+    font-weight: bold;
 }
 
 #amily2_memorisation_forms_panel .index-col {
@@ -117,8 +132,11 @@
     text-align: center !important;
     font-weight: bold;
     color: var(--am2-index-col-color);
-    width: var(--am2-index-col-width);
+    /* 【V72.0 谢罪圣旨】直接硬编码最终宽度，不再使用变量 */
-    padding: var(--am2-index-col-padding);
+    width: 30px !important;
+    min-width: 30px !important;
+    padding: var(--am2-table-cell-padding); 
+    word-break: normal;
 }
 
 #amily2_memorisation_forms_panel th[contenteditable="true"] {
@@ -174,11 +192,11 @@
 }
 
 #amily2_memorisation_forms_panel .menu_button.small_button {
-    padding: 5px 12px; /* Adjusted for a more horizontal look */
+    padding: 5px 12px;
     font-size: 0.9em;
     border-radius: 6px;
-    writing-mode: horizontal-tb !important; /* Override global vertical writing mode */
+    writing-mode: horizontal-tb !important;
-    white-space: nowrap; /* Prevent text from wrapping */
+    white-space: nowrap;
 }
 
 /* ================== 起居注 (日志) 样式 ================== */
@@ -187,14 +205,14 @@
     border-radius: 8px;
     padding: 12px;
     border: 1px solid #444;
-    max-height: 100px; /* 调整为较小的高度 */
+    max-height: 100px;
     overflow-y: auto;
     font-size: 0.9em;
     color: #ccc;
     display: flex;
     flex-direction: column;
     gap: 5px;
-    margin-bottom: 10px; /* 与下方内容隔开 */
+    margin-bottom: 10px;
 }
 
 #amily2_memorisation_forms_panel .hly-log-entry {
@@ -399,7 +417,7 @@
 
 .action-center-buttons .menu_button {
     flex-grow: 1;
-    min-width: 180px; /* 保证按钮不会过窄 */
+    min-width: 180px;
 }
 
 .notes {
@@ -476,3 +494,97 @@ input:focus + .slider {
 input:checked + .slider:before {
     transform: translateX(22px);
 }
+
+/* ===================================================================== */
+/* ================== 【V65.0】最终布局圣旨 - 移动端优化 ================== */
+/* ===================================================================== */
+
+@media (max-width: 768px) {
+    /* 【V65.0 修正】在移动端，不再需要容器的水平滚动 */
+    #amily2_memorisation_forms_panel .table-instance-container {
+        overflow-x: initial;
+    }
+
+    #amily2_memorisation_forms_panel table[id^="amily2-table-"], 
+    #amily2_memorisation_forms_panel table[id^="amily2-table-"] thead, 
+    #amily2_memorisation_forms_panel table[id^="amily2-table-"] tbody, 
+    #amily2_memorisation_forms_panel table[id^="amily2-table-"] th, 
+    #amily2_memorisation_forms_panel table[id^="amily2-table-"] td, 
+    #amily2_memorisation_forms_panel table[id^="amily2-table-"] tr {
+        display: block;
+    }
+
+    #amily2_memorisation_forms_panel table[id^="amily2-table-"] thead tr {
+        position: absolute;
+        top: -9999px;
+        left: -9999px;
+    }
+
+    #amily2_memorisation_forms_panel table[id^="amily2-table-"] tr {
+        border: 1px solid var(--am2-table-border, #444);
+        border-radius: 8px;
+        margin-bottom: 15px;
+        background: rgba(0,0,0,0.1);
+        position: relative;
+        padding-top: 35px;
+    }
+
+    #amily2_memorisation_forms_panel table[id^="amily2-table-"] td {
+        border: none;
+        border-bottom: 1px dotted rgba(255, 255, 255, 0.15);
+        position: relative;
+        padding-left: 45% !important;
+        text-align: right !important;
+        min-height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        /* 【V65.0 核心】确保在移动端也能正确断词 */
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-word;
+    }
+
+    #amily2_memorisation_forms_panel table[id^="amily2-table-"] td:last-child {
+        border-bottom: none;
+    }
+
+    #amily2_memorisation_forms_panel table[id^="amily2-table-"] td:before {
+        content: attr(data-label);
+        position: absolute;
+        left: 10px;
+        width: 40%;
+        padding-right: 10px;
+        white-space: nowrap;
+        text-align: left !important;
+        font-weight: bold;
+        color: var(--am2-header-color, #e0e0e0);
+    }
+
+    #amily2_memorisation_forms_panel table[id^="amily2-table-"] td.index-col {
+        display: none;
+    }
+    
+    #amily2_memorisation_forms_panel table[id^="amily2-table-"] tr .delete-row-handle {
+        display: block;
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        width: 28px;
+        height: 28px;
+        background-color: rgba(255, 82, 82, 0.5) !important;
+        color: white !important;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 28px;
+        font-size: 16px;
+        cursor: pointer;
+        padding: 0 !important;
+        border: none;
+        z-index: 10;
+    }
+    
+    #amily2_memorisation_forms_panel table[id^="amily2-table-"] tr .delete-row-handle:before {
+        content: "×";
+    }
+}