bloodchart resize

src/components/BloodChart.vue

@@ -127,11 +127,11 @@ function onSwiper(swiper) {
 
 const token = computed(() => props.data?.token);
 
-//start with visual 5% of the filled bar, because otherwise the percentage number is not visible
+//start with visual 8% of the filled bar, because otherwise the percentage number is not visible
 function getPercentageBloodChart(amount, goal) {
-	let returnNumber = 5;
-	if ((Number(amount) / Number(goal)) * 100 < 5) {
-		returnNumber = 5;
+	let returnNumber = 8;
+	if ((Number(amount) / Number(goal)) * 100 < 8) {
+		returnNumber = 8;
 	} else {
 		returnNumber = (Number(amount) / Number(goal)) * 100;
 	}
@@ -147,7 +147,7 @@ function getPercentageBloodChart(amount, goal) {
     // margin-bottom: 80px
     position: relative
 .blood-chart
-    height: 750px
+    height: 560px
     width: 100%
     justify-content: space-around
     display: inline-flex
@@ -186,7 +186,7 @@ function getPercentageBloodChart(amount, goal) {
                 margin-bottom: 32px
         .blood-chart-element-body
             background-color: rgba(233, 233, 233, 0.2)
-            flex: 0 0 500px
+            flex: 1 1 100%
             width: 60px
             border-radius: 8px 8px 40px 40px
             text-align: left