Client - style fix on charts

fittrackee_client/src/components/Common/StatsChart/Chart.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="chart">
+  <div class="bar-chart" :class="{ minimal: !fullStats }">
-    <Bar :data="chartData" :options="options" class="bar-chart" />
+    <Bar :data="chartData" :options="options" />
   </div>
 </template>
 
@@ -41,7 +41,7 @@
   }))
   const options = computed<ChartOptions<'bar'>>(() => ({
     responsive: true,
-    maintainAspectRatio: true,
+    maintainAspectRatio: false,
     animation: false,
     layout: {
       padding: {
@@ -198,3 +198,20 @@
       : 'km'
   }
 </script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/vars.scss';
+
+  .bar-chart {
+    min-height: 400px;
+    &.minimal {
+      min-height: 300px;
+    }
+
+    @media screen and (max-width: $small-limit) {
+      &.minimal {
+        min-height: 290px;
+      }
+    }
+  }
+</style>

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutChart/index.vue

@@ -24,13 +24,14 @@
           </label>
         </div>
         <div id="chart-legend" />
-        <Line
+        <div class="line-chart">
-          class="line-chart"
+          <Line
-          :data="chartData"
+            :data="chartData"
-          :options="options"
+            :options="options"
-          :plugins="plugins"
+            :plugins="plugins"
-          @mouseleave="emitEmptyCoordinates"
+            @mouseleave="emitEmptyCoordinates"
-        />
+          />
+        </div>
         <div class="chart-info">
           <div class="no-data-cleaning">
             {{ $t('workouts.NO_DATA_CLEANING') }}
@@ -107,7 +108,7 @@
   )
   const options = computed<ChartOptions<'line'>>(() => ({
     responsive: true,
-    maintainAspectRatio: true,
+    maintainAspectRatio: false,
     animation: false,
     layout: {
       padding: {
@@ -278,6 +279,9 @@
             }
           }
         }
+        .line-chart {
+          min-height: 400px;
+        }
       }
 
       @media screen and (max-width: $small-limit) {
@@ -293,6 +297,9 @@
               padding: 0 $default-padding * 2;
             }
           }
+          .line-chart {
+            min-height: 338px;
+          }
         }
       }
     }