UI improvements part 4

resources/js/components/UI/Bar.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="2xl:w-3 md:w-2 w-1 block lg:mr-2 mr-1.5 relative cursor-pointer"
+		class="2xl:w-3 lg:w-2 block lg:mr-2 relative cursor-pointer"
 		:style="{height: bar.percentage + '%'}"
 		@mouseover="isVisible = true"
 		@mouseleave="isVisible = false"

resources/js/components/UI/BarChart.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="flex items-end justify-between sm:h-28 h-20">
+	<div class="lg:flex lg:items-end lg:justify-between grid grid-flow-col lg:gap-0 sm:gap-2 gap-1 items-end sm:h-28 h-20">
 		<!--Data bar-->
 		<Bar
 			v-for="(item, i) in data"