Calendar dashboard responsivity

src/app/unit/components/unit.component.html

@@ -16,6 +16,8 @@
     </div>
     <div class="graph-range-dates">
       <div class="input-group form-group">
+          <label for="from">From:</label>
+
           <p-calendar
                   id="from"
                   [style]="{'width':'100%'}"
@@ -28,10 +30,9 @@
                   showButtonBar=true>
           </p-calendar>
       </div>
-      <div class="graph-range-dates-separator">
-        <div></div>
-      </div>
+
       <div class="input-group form-group">
+          To:
           <p-calendar
                   id="to"
                   [style]="{'width':'100%'}"

src/app/unit/components/unit.component.scss

@@ -38,3 +38,9 @@
 ::ng-deep .interval-alert {
     margin: 5px !important;
 }
+
+::ng-deep .input-group {
+    display: flex;
+    flex-direction: column;
+    padding-right: 50px;
+}

src/app/unit/components/unit.component.ts

@@ -84,12 +84,11 @@ export class UnitComponent implements OnInit, OnDestroy {
     this.onResize();
   }
 
-  private onResize(): void {
+  private onResize() {
     const itemCount = Object.keys(this.graphViews).length;
     console.log('Number of entries:', itemCount);
 
     Object.entries(this.graphViews).forEach(([key, view]) => {
-      console.log('Key:', key, 'View:', view);
       // Process each pair here
 
       const sensorGroupElement = '#vega_container_' + key;
@@ -99,6 +98,7 @@ export class UnitComponent implements OnInit, OnDestroy {
 
       if (view) {
         const newWidth = box.getBoundingClientRect().width - 50;
+        console.log('Key:', key, 'NewWidth:', newWidth);
         view.width(newWidth).height(300).runAsync();
       }
     });

src/assets/scss/_dashboard.scss

@@ -14,7 +14,6 @@
   }
 }
 
-
 .dashboard {
   padding: $grid-gutter-width 0;
 

src/assets/scss/_graph.scss

@@ -12,9 +12,10 @@
     margin: 0;
     width: auto;
 
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(md) {
       justify-content: center;
       width: 100%;
+      padding: 0;
     }
   }