responsive improvements

frontend/src/Theme/theme.js

@@ -15,7 +15,7 @@ import { createBreakpoints } from "@chakra-ui/theme-tools";
 
 const breakpointsCustom = createBreakpoints({
   sm: "24em", //Mobile phone
-  md: "64em", //Tablet or rotated phone
+  md: "64.01em", //Tablet or rotated phone
   lg: "89.9em", //QHD
   xl: "160em", //4k monitor
   "2xl": "192em", // Mac Book 16" and above

frontend/src/components/Report.js

@@ -81,8 +81,8 @@ const Report = ({ data, timeRange }) => {
         format: axis_format[timeRange],
         tickValues: tickValues_format[timeRange],
         legend: "time",
-        tickRotation: 0,
-        legendOffset: 35,
+        tickRotation: 65,
+        legendOffset: 45,
         legendPosition: "middle",
       }}
       curve={"monotoneY"}