Improve tasks UI: scroll-to-focus picker, landscape layout, height alignment

- Complete tasks now displayed in scroll view alongside unfinished tasks
- Priority order: completed tasks first (by finished_time desc), then unfinished (by order asc)
- Time picker-style scroll: wheel scroll snaps per task, center item gets visual focus
- Landscape mode (>=1024px): scroll view + edit panel side by side, panel always visible
- Portrait mode: edit panel slides in from right on tap
- Fixed flex layout so scroll view and edit panel align perfectly in height

static/css/tasks.css

@@ -42,7 +42,7 @@
 
 .scroll-view {
     flex: 1;
-    height: 300px;
+    height: 600px;
     overflow-y: auto;
     background: white;
     border-radius: 8px;
@@ -50,7 +50,7 @@
 }
 
 .tasks-list {
-    padding: 120px 1rem;
+    padding: 45vh 2rem;
 }
 
 .task-item {
@@ -165,63 +165,6 @@
     opacity: 1;
 }
 
-.finished-section {
-    flex: 0 0 300px;
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    padding: 1rem;
-    max-height: 600px;
-    overflow-y: auto;
-}
-
-.finished-section h2 {
-    color: #2c3e50;
-    margin-bottom: 1rem;
-    font-size: 1.2rem;
-}
-
-.finished-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.finished-item {
-    padding: 0.75rem;
-    background: #f8f9fa;
-    border-radius: 4px;
-    border-left: 3px solid #28a745;
-}
-
-.finished-item-title {
-    font-weight: 500;
-    margin-bottom: 0.25rem;
-}
-
-.finished-item-time {
-    font-size: 0.8rem;
-    color: #6c757d;
-}
-
-.side-panel {
-    position: fixed;
-    top: 0;
-    right: -400px;
-    width: 400px;
-    height: 100%;
-    background: white;
-    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
-    transition: right 0.3s ease;
-    z-index: 1000;
-    display: flex;
-    flex-direction: column;
-}
-
-.side-panel.active {
-    right: 0;
-}
-
 .side-panel-header {
     padding: 1rem;
     border-bottom: 1px solid #ddd;
@@ -259,6 +202,82 @@
     margin-top: 1rem;
 }
 
+@media (orientation: portrait), (max-width: 1023px) {
+    .side-panel {
+        position: fixed;
+        top: 0;
+        right: -400px;
+        width: 400px;
+        height: 100%;
+        background: white;
+        box-shadow: -2px 0 8px rgba(0,0,0,0.1);
+        transition: right 0.3s ease;
+        z-index: 1000;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .side-panel.active {
+        right: 0;
+    }
+}
+
+@media (orientation: landscape) and (min-width: 1024px) {
+    .tasks-page {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        height: calc(100vh - 2rem);
+    }
+
+    .tasks-header {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        flex-shrink: 0;
+    }
+
+    .tasks-main {
+        display: flex;
+        gap: 1rem;
+        flex: 1;
+        min-height: 0;
+    }
+
+    .tasks-container {
+        flex: 1;
+        display: flex;
+        margin-bottom: 0;
+        overflow: hidden;
+    }
+
+    .scroll-view {
+        height: auto;
+        flex: 1;
+    }
+
+    .side-panel {
+        position: relative;
+        right: 0;
+        width: 350px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        border-radius: 8px;
+        z-index: 1;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .side-panel-close {
+        display: none;
+    }
+
+    .create-task-container {
+        flex-shrink: 0;
+    }
+}
+
 .empty-state {
     text-align: center;
     padding: 3rem;