Fix style of reset button on datepickers

Author: evilaliv3

client/app/css/main.css

@@ -1102,3 +1102,7 @@ i.fa-solid.fa-chevron-right {
   from { transform: rotate(0deg); }
   to { transform: rotate(359deg); }
 }
+
+.reset-button {
+  margin-top: 10px;
+}

client/app/src/shared/components/date-selector/date-selector.component.html

@@ -1,9 +1,15 @@
-<div class="ngb-datepicker-container-inner">
-    <ngb-datepicker class="bg-white" (dateSelect)="onDateSelection($event)" [displayMonths]="1" [dayTemplate]="t" outsideDays="hidden"></ngb-datepicker>
-    <ng-template #t let-date let-focused="focused">
-        <span class="custom-day" [class.focused]="focused" [class.range]="isRange(date)" [class.faded]="isHovered(date) || isInside(date)" (mouseenter)="hoveredDate = date" (mouseleave)="hoveredDate = null">
-            {{ date.day }}
-        </span>
-    </ng-template>
-    <button class="btn btn-danger position-absolute bottom-0 start-0 m-2" (click)="resetDatepicker()">Reset</button>
+<div class="ngb-datepicker-container-wrapper position-relative">
+    <div class="ngb-datepicker-container-inner">
+        <ngb-datepicker class="bg-white" (dateSelect)="onDateSelection($event)" [displayMonths]="1" [dayTemplate]="t" outsideDays="hidden"></ngb-datepicker>
+        <ng-template #t let-date let-focused="focused">
+            <span class="custom-day" [class.focused]="focused" [class.range]="isRange(date)" [class.faded]="isHovered(date) || isInside(date)"
+                (mouseenter)="hoveredDate = date"
+                (mouseleave)="hoveredDate = null">
+                {{ date.day }}
+            </span>
+        </ng-template>
+    </div>
+
+    <!-- Move the Reset button below the datepicker and change its positioning -->
+    <button *ngIf="fromDate && toDate" class="btn btn-danger reset-button" (click)="resetDatepicker()">Reset</button>
 </div>

client/app/src/shared/components/date-selector/date-selector.component.ts

@@ -1,12 +1,12 @@
 import {Component, EventEmitter, Input, Output} from "@angular/core";
 import {NgbDate, NgbDatepickerModule} from "@ng-bootstrap/ng-bootstrap";
 import {FormsModule} from "@angular/forms";
-import {JsonPipe} from "@angular/common";
+import {CommonModule, JsonPipe} from "@angular/common";
 
 @Component({
   selector: "ngbd-datepicker-range",
   standalone: true,
-  imports: [NgbDatepickerModule, FormsModule, JsonPipe],
+  imports: [CommonModule, NgbDatepickerModule, FormsModule, JsonPipe],
   templateUrl: "./date-selector.component.html"
 })
 export class DateRangeSelectorComponent {