diff --git a/ui/suite/tasks/taskmd.css b/ui/suite/tasks/taskmd.css
index 016067b..c0c071f 100644
--- a/ui/suite/tasks/taskmd.css
+++ b/ui/suite/tasks/taskmd.css
@@ -52,14 +52,15 @@
 
 /* Header - visible and prominent */
 .taskmd-header {
-    padding: 20px 24px;
+    padding: 16px 20px;
     border-bottom: 1px solid var(--border, #2a2a2a);
     flex-shrink: 0;
     background: var(--surface, #111);
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 16px;
+    gap: 12px;
+    min-width: 0;
 }
 
 .taskmd-url {
@@ -81,22 +82,28 @@
 }
 
 .taskmd-title {
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 600;
     color: var(--text, #fff);
     margin: 0;
     flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .taskmd-status-badge {
-    display: inline-block;
-    padding: 8px 20px;
-    border-radius: 6px;
-    font-size: 12px;
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 14px;
+    border-radius: 4px;
+    font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     flex-shrink: 0;
+    white-space: nowrap;
 }
 
 .taskmd-status-badge.status-running {
diff --git a/ui/suite/tasks/tasks.css b/ui/suite/tasks/tasks.css
index 0b1cf0b..f915a06 100644
--- a/ui/suite/tasks/tasks.css
+++ b/ui/suite/tasks/tasks.css
@@ -294,22 +294,28 @@ body:has(.tasks-app) {
    ============================================================================= */
 
 .tasks-main {
-    display: grid;
-    grid-template-columns: 320px 6px 1fr;
+    display: flex;
+    flex-direction: row;
     flex: 1;
-    overflow: hidden !important;
+    overflow: hidden;
     height: 100%;
     max-height: 100%;
     min-height: 0;
+    width: 100%;
+    position: relative;
 }
 
 /* Splitter between panels */
 .tasks-splitter {
     width: 6px;
+    min-width: 6px;
+    max-width: 6px;
+    flex: 0 0 6px;
     background: var(--border, #2a2a2a);
     cursor: col-resize;
     transition: background 0.2s;
     position: relative;
+    z-index: 10;
 }
 
 .tasks-splitter:hover {
@@ -339,22 +345,25 @@ body:has(.tasks-app) {
 .tasks-list-panel {
     display: flex;
     flex-direction: column;
-    overflow: hidden !important;
-    border-right: 1px solid var(--border, #2a2a2a);
+    overflow: hidden;
+    border-right: none;
     height: 100%;
     max-height: 100%;
     min-height: 0;
+    flex: 0 0 280px;
+    width: 280px;
+    background: var(--bg, #0a0a0a);
 }
 
 .tasks-list-scroll {
     flex: 1;
-    overflow-y: scroll;
+    overflow-y: auto;
     overflow-x: hidden;
-    padding: 16px;
-    padding-right: 4px;
+    padding: 12px;
+    padding-right: 6px;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 8px;
 }
 
 /* ============================================ */
@@ -412,15 +421,16 @@ body:has(.tasks-app) {
 
 .task-card {
     background: var(--surface-hover, #141414);
-    border: 2px solid var(--border, #2a2a2a);
-    border-radius: 12px;
-    padding: 32px 32px;
-    padding-left: 40px;
+    border: 1px solid var(--border, #2a2a2a);
+    border-radius: 8px;
+    padding: 16px 14px;
+    padding-left: 18px;
     cursor: pointer;
     transition: all 0.2s ease;
     position: relative;
     overflow: hidden;
-    min-height: 200px;
+    min-height: 60px;
+    height: auto;
 }
 
 .task-card::before {
@@ -428,7 +438,7 @@ body:has(.tasks-app) {
     position: absolute;
     top: 0;
     left: 0;
-    width: 5px;
+    width: 3px;
     height: 100%;
     background: var(--text-secondary, #666);
     transition: background 0.2s ease;
@@ -465,23 +475,23 @@ body:has(.tasks-app) {
 
 .task-card.selected {
     border-color: var(--primary, #c5f82a);
-    box-shadow: 0 0 0 2px var(--primary, #c5f82a);
+    box-shadow: 0 0 0 1px var(--primary, #c5f82a);
 }
 
 .task-card-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: 20px;
-    margin-bottom: 0;
+    gap: 10px;
+    margin-bottom: 8px;
 }
 
 .task-card-title {
-    font-size: 18px;
+    font-size: 14px;
     font-weight: 600;
     color: var(--text, #fff);
     margin: 0;
-    line-height: 1.5;
+    line-height: 1.4;
     flex: 1;
     white-space: nowrap;
     overflow: hidden;
@@ -490,10 +500,10 @@ body:has(.tasks-app) {
 }
 
 .task-card-status {
-    font-size: 13px;
+    font-size: 10px;
     font-weight: 700;
-    padding: 10px 20px;
-    border-radius: 8px;
+    padding: 4px 8px;
+    border-radius: 4px;
     text-transform: uppercase;
     white-space: nowrap;
     background: var(--surface, #1a1a1a);
@@ -558,17 +568,18 @@ body:has(.tasks-app) {
 .task-card-footer {
     display: flex;
     justify-content: flex-end;
-    gap: 10px;
-    padding-top: 14px;
-    border-top: 2px solid var(--border, #2a2a2a);
+    gap: 6px;
+    padding-top: 8px;
+    margin-top: 8px;
+    border-top: 1px solid var(--border, #2a2a2a);
 }
 
 .task-action-btn {
     background: transparent;
     border: none;
-    padding: 4px 8px;
+    padding: 2px 6px;
     cursor: pointer;
-    font-size: 14px;
+    font-size: 12px;
     opacity: 0.5;
     transition: opacity 0.2s ease;
 }
@@ -579,24 +590,24 @@ body:has(.tasks-app) {
 
 /* Task Card Progress */
 .task-card-progress {
-    margin-bottom: 18px;
+    margin-bottom: 8px;
 }
 
 .progress-bar {
-    height: 10px;
+    height: 4px;
     background: var(--surface, #1a1a1a);
-    border-radius: 6px;
+    border-radius: 2px;
     overflow: hidden;
-    margin-bottom: 10px;
-    border: 2px solid var(--border, #2a2a2a);
+    margin-bottom: 6px;
+    border: none;
 }
 
 .progress-fill {
     height: 100%;
     background: var(--primary, #c5f82a);
-    border-radius: 4px;
+    border-radius: 2px;
     transition: width 0.3s ease;
-    box-shadow: 0 0 8px rgba(197, 248, 42, 0.4);
+    box-shadow: none;
 }
 
 .task-card.awaiting .progress-fill {
@@ -610,24 +621,24 @@ body:has(.tasks-app) {
 }
 
 .progress-steps {
-    font-size: 14px;
+    font-size: 11px;
     font-weight: 500;
     color: var(--text-secondary, #a1a1a1);
 }
 
 .progress-percent {
-    font-size: 14px;
-    font-weight: 700;
+    font-size: 11px;
+    font-weight: 600;
     color: var(--primary, #c5f82a);
-    background: var(--primary-light, rgba(197, 248, 42, 0.15));
-    padding: 4px 12px;
-    border-radius: 6px;
-    border: 2px solid var(--primary, #c5f82a);
+    background: transparent;
+    padding: 0;
+    border-radius: 0;
+    border: none;
 }
 
 .task-card.awaiting .progress-percent {
     color: var(--warning, #f59e0b);
-    background: rgba(245, 158, 11, 0.15);
+    background: transparent;
 }
 
 /* Task Card Status */
@@ -751,7 +762,9 @@ body:has(.tasks-app) {
     font-weight: 600;
     color: var(--text, #fff);
     margin: 0;
-    line-height: 1.4;
+    line-height: 1.3;
+    flex: 1;
+    min-width: 200px;
 }
 
 .task-detail-header .task-status {
@@ -912,10 +925,13 @@ body:has(.tasks-app) {
     display: flex;
     flex-direction: column;
     background: var(--surface, #111);
-    overflow: hidden !important;
+    overflow-y: auto;
+    overflow-x: hidden;
     height: 100%;
     max-height: 100%;
     min-height: 0;
+    min-width: 0;
+    flex: 1 1 0%;
     position: relative;
 }
 
@@ -1400,6 +1416,10 @@ body:has(.tasks-app) {
     justify-content: center;
     padding: 60px 24px;
     text-align: center;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background: var(--surface, #111);
 }
 
 .empty-icon {
@@ -1688,8 +1708,9 @@ body:has(.tasks-app) {
 
 /* Responsive Design */
 @media (max-width: 1200px) {
-    .tasks-main {
-        grid-template-columns: 35% 65%;
+    .tasks-list-panel {
+        flex: 0 0 250px;
+        width: 250px;
     }
 
     .terminal-stats {
@@ -1699,7 +1720,18 @@ body:has(.tasks-app) {
 
 @media (max-width: 1024px) {
     .tasks-main {
-        grid-template-columns: 1fr;
+        flex-direction: column;
+    }
+
+    .tasks-list-panel {
+        flex: 0 0 auto;
+        width: 100%;
+        max-width: none;
+        max-height: 40vh;
+    }
+
+    .tasks-splitter {
+        display: none;
     }
 
     .task-detail-panel {
@@ -3220,15 +3252,9 @@ body:has(.tasks-app) {
 }
 
 /* =============================================================================
-   TASK DETAIL PANEL - LARGER & MORE PROMINENT
+   TASK DETAIL RICH VIEW OVERRIDES
    ============================================================================= */
 
-.task-detail-panel {
-    flex: 1;
-    min-width: 0;
-    max-width: none;
-}
-
 .task-detail-rich {
     display: flex;
     flex-direction: column;
diff --git a/ui/suite/tasks/tasks.html b/ui/suite/tasks/tasks.html
index c9fee0b..39df325 100644
--- a/ui/suite/tasks/tasks.html
+++ b/ui/suite/tasks/tasks.html
@@ -586,7 +586,8 @@
 
             const diff = e.clientX - startX;
             const newWidth = Math.max(200, Math.min(600, startWidth + diff));
-            main.style.gridTemplateColumns = `${newWidth}px 6px 1fr`;
+            leftPanel.style.flex = `0 0 ${newWidth}px`;
+            leftPanel.style.width = `${newWidth}px`;
         });
 
         document.addEventListener("mouseup", function () {