Client - fix chart display on mobile

This commit is contained in:
Sam 2023-11-19 11:58:45 +01:00
parent bb01ee30fe
commit 0c4b8f1b98
2 changed files with 10 additions and 2 deletions

View File

@ -203,15 +203,22 @@
@import '~@/scss/vars.scss'; @import '~@/scss/vars.scss';
.bar-chart { .bar-chart {
position: relative;
min-height: 400px; min-height: 400px;
width: 100%;
&.minimal { &.minimal {
min-height: 300px; min-height: 300px;
} }
@media screen and (max-width: $small-limit) { @media screen and (max-width: $small-limit) {
min-height: 268px;
&.minimal { &.minimal {
min-height: 290px; min-height: 290px;
} }
} }
@media screen and (max-width: 420px) {
width: calc(100vw - 95px);
}
} }
</style> </style>

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="start-chart"> <div class="stats-chart">
<div v-if="hideChartIfNoData && emptyStats"> <div v-if="hideChartIfNoData && emptyStats">
{{ $t('workouts.NO_WORKOUTS') }} {{ $t('workouts.NO_WORKOUTS') }}
</div> </div>
@ -185,7 +185,8 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~@/scss/vars'; @import '~@/scss/vars';
.start-chart { .stats-chart {
width: 100%;
.chart-radio { .chart-radio {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;