Fix message list workspace layout

Author: genz27

static/app.js

@@ -114,6 +114,7 @@ const elements = {
     batchMoveButton: document.getElementById("batchMoveButton"),
     batchArchiveButton: document.getElementById("batchArchiveButton"),
     batchDeleteButton: document.getElementById("batchDeleteButton"),
+    messageBatchPanel: document.getElementById("messageBatchPanel"),
     messageList: document.getElementById("messageList"),
     messageItemTemplate: document.getElementById("messageItemTemplate"),
     messageCount: document.getElementById("messageCount"),
@@ -1565,6 +1566,9 @@ function syncFolderSelectOptions() {
 
 function renderMessageBatchActions() {
     const selectedCount = state.selectedMessageIds.size;
+    if (elements.messageBatchPanel) {
+        elements.messageBatchPanel.hidden = selectedCount === 0;
+    }
     setElementText(elements.selectedMessageCount, `已选 ${selectedCount} 封邮件`);
     [
         elements.clearSelectedMessagesButton,

static/styles.css

@@ -236,11 +236,14 @@ h2 {
     grid-area: workspace;
     display: flex;
     flex-direction: column;
-    gap: var(--space-sm);
+    gap: 0.55rem;
     padding: 0;
     background: transparent;
     border: 0;
     box-shadow: none;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 0.15rem;
 }
 
 .detail-column {
@@ -800,7 +803,17 @@ h2 {
 .message-filter-panel,
 .message-batch-panel {
     display: grid;
-    gap: 0.65rem;
+    gap: 0.45rem;
+    flex-shrink: 0;
+}
+
+.folder-strip {
+    padding: 0.62rem 0.72rem;
+}
+
+.message-filter-panel,
+.message-batch-panel {
+    padding: 0.68rem 0.78rem;
 }
 
 .folder-list {
@@ -966,6 +979,11 @@ h2 {
     padding: 0 0.9rem 0.9rem;
 }
 
+.message-column {
+    flex: 1 0 18rem;
+    min-height: 18rem;
+}
+
 .detail-empty {
     display: grid;
     place-items: center;

templates/index.html

@@ -274,7 +274,7 @@ <h2>批量导入邮箱</h2>
                         </div>
                     </section>
 
-                    <section class="message-batch-panel panel compact-panel">
+                    <section class="message-batch-panel panel compact-panel" id="messageBatchPanel" hidden>
                         <div class="message-batch-meta">
                             <span id="selectedMessageCount">已选 0 封邮件</span>
                             <button type="button" class="button ghost compact" id="clearSelectedMessagesButton">清空选择</button>