fix: proper 2-column layout with scroll, header above columns, side padding

src/lib/timeline/TimelineView.svelte

@@ -65,8 +65,7 @@
       />
     </div>
   {:else}
-    <div class="two-col">
+    <div class="list-view">
-      <div class="left-col">
       <div class="page-header">
         <h1 class="page-title">My Journey</h1>
         <button class="new-btn" onclick={() => { view = 'new'; }}>
@@ -77,6 +76,8 @@
         </button>
       </div>
 
+      <div class="two-col">
+        <div class="left-col">
           <TimelineToolbar {sortKey} onSort={(k) => (sortKey = k)} />
 
           {#if sortedEntries.length === 0}
@@ -114,6 +115,7 @@
           </div>
         {/if}
       </div>
+    </div>
   {/if}
 
 </div>
@@ -132,41 +134,42 @@
     overflow: hidden;
   }
 
-  /* ── Two-column layout ── */
+  /* ── List view wrapper (scrollable) ── */
-  .two-col {
+  .list-view {
     flex: 1;
+    overflow-y: auto;
+    padding: 48px 48px 80px;
+    box-sizing: border-box;
+    min-width: 0;
+  }
+
+  /* ── Two-column below header ── */
+  .two-col {
     display: flex;
     flex-direction: row;
-    min-width: 0;
+    gap: 32px;
-    height: 100%;
+    align-items: flex-start;
-    overflow: hidden;
+    margin-top: 24px;
   }
 
   .left-col {
     flex: 1;
     min-width: 0;
-    overflow-y: auto;
-    padding: 48px 48px 80px;
-    box-sizing: border-box;
-    max-width: 680px;
   }
 
   .right-col {
-    width: 280px;
+    width: 260px;
     flex-shrink: 0;
-    overflow-y: auto;
+    position: sticky;
-    padding: 48px 24px 80px;
+    top: 0;
-    border-left: 1px solid var(--border);
-    box-sizing: border-box;
   }
 
   @media (max-width: 900px) {
     .right-col { display: none; }
-    .left-col { max-width: 100%; }
   }
 
   @media (max-width: 760px) {
-    .left-col { padding: 32px 24px 60px; }
+    .list-view { padding: 32px 24px 60px; }
   }
 
   /* ── Detail view ── */