feat: improve planner styling by making it a vertical list

src/app/features/planner/planner-day/planner-day.component.html

@@ -67,7 +67,10 @@
   <add-task-inline [planForDay]="day.dayDate"></add-task-inline>
 </div>
 
-<div class="scheduled">
+<div
+  class="scheduled"
+  [class.no-items]="day.scheduledIItems.length === 0"
+>
   <div class="section-title">
     <mat-icon>alarm</mat-icon>
   </div>

src/app/features/planner/planner-day/planner-day.component.scss

@@ -10,6 +10,12 @@
 
   padding-bottom: 96px;
   margin-bottom: 32px;
+
+  @include mq(xs, max) {
+    width: auto;
+    padding: 0;
+    margin-bottom: 16px;
+  }
 }
 
 :host header {
@@ -89,6 +95,12 @@
   flex-grow: 1;
   /* Additional styles if needed */
   margin-top: 16px;
+
+  @include mq(xs, max) {
+    &.no-items {
+      display: none;
+    }
+  }
 }
 
 .normal-tasks-items,

src/app/features/planner/planner-plan-view/planner-plan-view.component.scss

@@ -17,4 +17,8 @@
   @include mq(xs) {
     gap: 24px;
   }
+
+  @include mq(xs, max) {
+    display: block;
+  }
 }

src/app/features/planner/planner-task/planner-task.component.scss

@@ -23,6 +23,12 @@ $h: $planner-item-height;
       text-decoration: line-through;
     }
   }
+
+  ::ng-deep tag-list {
+    margin-top: -2px;
+    margin-bottom: -2px;
+    margin-left: -4px;
+  }
 }
 
 :host-context(.isLightTheme).isCurrent {
@@ -37,13 +43,17 @@ $h: $planner-item-height;
 }
 
 .no-drag {
-  padding: 4px 0;
   display: flex;
   align-items: center;
   flex-grow: 1;
   flex-shrink: 1;
   min-width: 0;
   position: relative;
+  padding: 4px 0;
+
+  @include mq(xs) {
+    padding: 2px 0;
+  }
 }
 
 ::ng-deep .tag-title {