feat: refactor IMAP layout from top-bottom split to three-column

Author: margbug01-cyber

mail-viewer/imap-mail-app/public/index.html

@@ -222,15 +222,18 @@
 .mail-list-container {
   flex: 1;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   overflow: hidden;
 }
 
 .mail-list-pane {
-  height: 45%;
+  width: 320px;
+  min-width: 260px;
+  max-width: 400px;
   overflow-y: auto;
-  border-bottom: 1px solid var(--embed-border);
+  border-right: 1px solid var(--embed-border);
   background: transparent;
+  flex-shrink: 0;
 }
 
 .mail-row {
@@ -289,6 +292,7 @@
   flex: 1;
   overflow-y: auto;
   background: rgba(255,255,255,0.96);
+  height: 100%;
 }
 
 .load-more-btn {
@@ -789,6 +793,19 @@
     border-radius: var(--embed-radius-sm);
   }
 
+  .mail-list-container {
+    flex-direction: column;
+  }
+
+  .mail-list-pane {
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+    border-right: none;
+    border-bottom: 1px solid var(--embed-border);
+    flex-shrink: 1;
+  }
+
   .mail-list-pane,
   .mail-detail {
     min-height: calc(100dvh - 280px);