Fix minor issues

src/app/components/pages/page/tower/tasks/tasks.component.scss

@@ -69,7 +69,7 @@
           text-align: left;
 
           @media (max-width: $mobile-width) {
-            font-size: var(--small-font-size);
+            font-size: calc(var(--small-font-size) / 2 + var(--medium-font-size) / 2);
           }
 
           position: relative;

src/app/components/pages/page/tower/tower.component.html

@@ -6,10 +6,12 @@
 
     <img src="assets/plus-sign.svg" alt="add item" (click)="addBlock()" />
 
-    <div class="block-container {{ isFalling ? 'falling' : '' }}">
+    <div class="block-container-container">
+      <div class="block-container falling">
         <app-block *ngFor="let block of drawableBlocks" [block]="block" [tower]="tower"></app-block>
       </div>
     </div>
+  </div>
 
   <label for="tower-name" class="hidden">Card name</label>
   <input

src/app/components/pages/page/tower/tower.component.scss

@@ -108,15 +108,19 @@
         }
       }
 
+      .block-container-container {
+        position: relative;
+        flex: 1;
         .block-container {
           display: flex;
           flex-flow: row wrap;
           justify-content: flex-start;
           align-content: flex-start;
           align-items: flex-end;
+          position: absolute;
+          bottom: 0;
+          width: 100%;
           transform: scaleY(-1);
-        flex: 1;
-
           &.falling > *:last-child {
             animation: falling 1.5s cubic-bezier(0.5, 0, 1, 0) forwards;
 
@@ -137,6 +141,7 @@
           }
         }
       }
+    }
 
     input[type='text'] {
       font-size: var(--small-font-size);

src/app/components/pages/page/tower/tower.component.ts

@@ -29,7 +29,9 @@ export class TowerComponent {
   }
 
   get tasks(): Block[] {
-    return this.tower.blocks.filter(block => !block.isDone);
+    return this.tower.blocks.filter(
+      block => this.dateRange.from <= block.created && block.created <= this.dateRange.to && !block.isDone
+    );
   }
 
   @Input() tower: Tower;

src/app/components/shared/double-slider/double-slider.component.scss

@@ -43,6 +43,7 @@ $slider-size: 40px;
           transform: translateY(-$slider-size / 2 + $line-height / 2) scale(1.1);
         }
       }
+
       cursor: pointer;
 
       position: relative;

src/app/components/shared/toggle/toggle.component.scss

@@ -50,6 +50,7 @@
       transition: box-shadow $long-animation-time, left $long-animation-time, transform $long-animation-time;
     }
 
+    @media (min-width: $mobile-width) {
       &:hover:after {
         box-shadow: $shadow;
         transform: translateX(2px);
@@ -58,6 +59,7 @@
       &.on:hover:after {
         transform: translateX(-2px);
       }
+    }
 
     &.on:after {
       left: $size;

src/app/services/data.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { ApplicationRef, Injectable } from '@angular/core';
 import { StoreService } from './store.service';
 import { Page } from '../model/page';
 
@@ -22,7 +22,7 @@ export class DataService {
   private hasLoaded = new Promise(resolve => (this.afterLoadFinished = resolve));
   private afterLoadFinished: () => void;
 
-  constructor(private storeService: StoreService) {
+  constructor(private storeService: StoreService, private applicationRef: ApplicationRef) {
     this.init();
   }
 
@@ -72,6 +72,7 @@ export class DataService {
 
   private update() {
     this.subscribers.map(f => f());
+    this.applicationRef.tick();
   }
 
   private loadActiveIndex() {