diff --git a/src/views/CriticalView.tsx b/src/views/CriticalView.tsx
index d42fe20..f28be8f 100644
--- a/src/views/CriticalView.tsx
+++ b/src/views/CriticalView.tsx
@@ -28,10 +28,10 @@ export const CriticalView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Your tasks ranked by highest urgency + priority.</p>
             </header>
 
-            <div class="grid gap-3" ref={listRef}>
+            <div class="grid grid-cols-1 gap-3 w-full" ref={listRef}>
                 <For each={displayedTasks()}>
                     {(task) => (
-                        <div class="animate-task-enter">
+                        <div class="animate-task-enter w-full min-w-0">
                             <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
                         </div>
                     )}
diff --git a/src/views/DigInView.tsx b/src/views/DigInView.tsx
index 813b864..ef86dde 100644
--- a/src/views/DigInView.tsx
+++ b/src/views/DigInView.tsx
@@ -33,10 +33,10 @@ export const DigInView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Largest tasks first. Tackle big projects head-on.</p>
             </header>
 
-            <div class="grid gap-3" ref={listRef}>
+            <div class="grid grid-cols-1 gap-3 w-full" ref={listRef}>
                 <For each={displayedTasks()}>
                     {(task) => (
-                        <div class="animate-task-enter">
+                        <div class="animate-task-enter w-full min-w-0">
                             <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
                         </div>
                     )}
diff --git a/src/views/PriorityView.tsx b/src/views/PriorityView.tsx
index 0c7ba78..6c31c5d 100644
--- a/src/views/PriorityView.tsx
+++ b/src/views/PriorityView.tsx
@@ -28,10 +28,10 @@ export const PriorityView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Your tasks ordered by priority.</p>
             </header>
 
-            <div class="grid gap-3" ref={listRef}>
+            <div class="grid grid-cols-1 gap-3 w-full" ref={listRef}>
                 <For each={displayedTasks()}>
                     {(task) => (
-                        <div class="animate-task-enter">
+                        <div class="animate-task-enter w-full min-w-0">
                             <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
                         </div>
                     )}
diff --git a/src/views/ProgressView.tsx b/src/views/ProgressView.tsx
index 5ad3931..d66dd32 100644
--- a/src/views/ProgressView.tsx
+++ b/src/views/ProgressView.tsx
@@ -35,10 +35,10 @@ export const ProgressView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Tasks sorted by progress status, then by focus score.</p>
             </header>
 
-            <div class="grid gap-3" ref={listRef}>
+            <div class="grid grid-cols-1 gap-3 w-full" ref={listRef}>
                 <For each={displayedTasks()}>
                     {(task) => (
-                        <div class="animate-task-enter">
+                        <div class="animate-task-enter w-full min-w-0">
                             <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
                         </div>
                     )}
diff --git a/src/views/SnowballView.tsx b/src/views/SnowballView.tsx
index 4296483..16135d8 100644
--- a/src/views/SnowballView.tsx
+++ b/src/views/SnowballView.tsx
@@ -33,10 +33,10 @@ export const SnowballView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Smallest tasks first. Build momentum with quick wins.</p>
             </header>
 
-            <div class="grid gap-3" ref={listRef}>
+            <div class="grid grid-cols-1 gap-3 w-full" ref={listRef}>
                 <For each={displayedTasks()}>
                     {(task) => (
-                        <div class="animate-task-enter">
+                        <div class="animate-task-enter w-full min-w-0">
                             <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
                         </div>
                     )}
diff --git a/src/views/UrgencyView.tsx b/src/views/UrgencyView.tsx
index c1ebad6..a9736bf 100644
--- a/src/views/UrgencyView.tsx
+++ b/src/views/UrgencyView.tsx
@@ -32,10 +32,10 @@ export const UrgencyView: Component = () => {
                 <p class="text-muted-foreground mt-1 text-lg">Your tasks ordered by deadline.</p>
             </header>
 
-            <div class="grid gap-3" ref={listRef}>
+            <div class="grid grid-cols-1 gap-3 w-full" ref={listRef}>
                 <For each={displayedTasks()}>
                     {(task) => (
-                        <div class="animate-task-enter">
+                        <div class="animate-task-enter w-full min-w-0">
                             <TaskCard task={task} isShaking={shakingTaskIds().includes(task.id)} />
                         </div>
                     )}