fix(dashboard): improve solar card responsiveness

src/app/pages/dashboard/solar/solar.component.scss

@@ -1,4 +1,6 @@
 @import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+@import '~bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
 
@@ -12,6 +14,13 @@
     width: 40%;
   }
 
+  .info {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    align-self: center;
+  }
+
   .date {
     font-size: 1.25rem;
     font-weight: nb-theme(font-weight-bolder);
@@ -39,13 +48,6 @@
     font-size: 1rem;
   }
 
-  .info {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    align-self: center;
-  }
-
   @include nb-for-theme(cosmic) {
     color: nb-theme(color-fg-heading);
 
@@ -57,4 +59,10 @@
       color: nb-theme(color-fg);
     }
   }
+
+  @include media-breakpoint-down(xs) {
+    .value {
+      font-size: 1.75rem;
+    }
+  }
 }

src/app/pages/dashboard/solar/solar.component.ts

@@ -51,7 +51,7 @@ export class SolarComponent implements AfterViewInit {
             clockWise: true,
             hoverAnimation: false,
             type: 'pie',
-            center: ['35%', '50%'],
+            center: ['45%', '50%'],
             radius: solarTheme.radius,
             data: [
               {
@@ -116,7 +116,7 @@ export class SolarComponent implements AfterViewInit {
             clockWise: true,
             hoverAnimation: false,
             type: 'pie',
-            center: ['35%', '50%'],
+            center: ['45%', '50%'],
             radius: solarTheme.radius,
             data: [
               {