ui

listify-api/src/tasks/tasks.module.ts

@@ -9,6 +9,7 @@ import { TaskPushService } from './task-push.service';
 import { TasksController } from './tasks.controller';
 import { TasksService } from './tasks.service';
 import { UserTaskEntity } from './user-task.entity';
+import { AuthModule } from 'src/auth/auth.module';
 
 @Module({
   imports: [
@@ -19,6 +20,7 @@ import { UserTaskEntity } from './user-task.entity';
       TaskPushSubscriptionEntity,
       UserTaskEntity,
     ]),
+    AuthModule
   ],
   controllers: [TasksController],
   providers: [TaskDigestService, TaskPushService, TasksService],

listify-client/src/app/tasks/tasks.component.scss

@@ -20,10 +20,6 @@
   width: 100%;
 }
 
-.task-create-card button {
-  justify-self: start;
-}
-
 .task-controls {
   display: grid;
   gap: 0.75rem;
@@ -62,10 +58,6 @@
   max-width: 100%;
 }
 
-.status-filter-row button {
-  justify-self: start;
-}
-
 .task-summary {
   display: flex;
   flex-wrap: wrap;
@@ -166,7 +158,7 @@
 
 .task-card mat-card-content {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-columns: auto minmax(0, 1fr) max-content;
   align-items: start;
   gap: 0.75rem;
   padding: 0.85rem 1rem;
@@ -209,17 +201,39 @@
 
 .task-edit-actions {
   display: flex;
-  flex-wrap: wrap;
   gap: 0.5rem;
 }
 
+.task-edit-actions button {
+  white-space: nowrap;
+}
+
+.task-create-card button,
+.status-filter-row button {
+  justify-self: start;
+}
+
+.task-create-card button,
+.status-filter-row button,
+.task-edit-actions button {
+  white-space: nowrap;
+}
+
+.task-actions button,
+.task-edit-actions button {
+  flex: 0 0 auto;
+}
+
 @media (max-width: 520px) {
   .task-card mat-card-content {
-    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-columns: auto minmax(0, 1fr) max-content;
+    gap: 0.6rem;
+    padding-inline: 0.75rem;
   }
 
   .task-actions {
-    grid-column: 2;
+    grid-column: 3;
+    grid-row: 1;
   }
 }