Merge pull request #446 from bugout-dev/improve-dashboard-responsivness

Imrove dashboard responsivness

frontend/pages/dashboard/[dashboardId].js

@@ -152,7 +152,7 @@ const Analytics = () => {
   )
     return <Spinner />;
 
-  const plotMinW = "500px";
+  const plotMinW = "250px";
 
   return (
     <Scrollable>
@@ -160,7 +160,7 @@ const Analytics = () => {
         h="100%"
         w="100%"
         m={0}
-        px="7%"
+        px={["10px", "20px", "7%", null]}
         direction="column"
         alignItems="center"
         minH="100vh"
@@ -202,7 +202,7 @@ const Analytics = () => {
                 minH="320px"
                 direction="column"
                 boxShadow="md"
-                m={2}
+                m={["1px", 2]}
               >
                 <Text
                   w="100%"

frontend/src/components/Report.js

@@ -54,7 +54,7 @@ const Report = ({ data, timeRange }) => {
     <ResponsiveLineCanvas
       {...commonProperties}
       data={plotData}
-      margin={{ top: 50, right: 110, bottom: 70, left: 60 }}
+      margin={{ top: 50, right: 5, bottom: 70, left: 60 }}
       isInteractive={true}
       xScale={{
         type: "time",

frontend/src/components/SubscriptionReport.js

@@ -20,15 +20,24 @@ const SubscriptionReport = ({ timeRange, url, id, type, refetchLinks }) => {
     type: type,
     requestNewURLCallback: refetchLinks,
   });
-  const plotMinW = "500px";
+  const plotMinW = "250px";
   if (!data || isLoading) return <Spinner />;
   return (
-    <Flex w="100%" h="auto" flexGrow={1} flexBasis="420px" direction="column">
+    <Flex
+      w="100%"
+      h="auto"
+      flexGrow={1}
+      flexBasis={plotMinW}
+      direction="column"
+    >
       <Stack
         bgColor="blue.50"
         direction={["column", "row", null]}
         spacing={4}
         flexGrow={1}
+        flexBasis={plotMinW}
+        m={1}
+        p={2}
       >
         {data?.web3_metric.map((metric) => {
           return (
@@ -38,13 +47,10 @@ const SubscriptionReport = ({ timeRange, url, id, type, refetchLinks }) => {
               placeSelf="center"
               p={2}
               bgColor="blue.100"
-              m={4}
               key={v4()}
               size="sm"
               fontWeight="600"
               boxShadow="sm"
-              w="75px"
-              maxH="150px"
               direction="column"
             >
               <Text placeSelf="center">{metric.display_name}</Text>
@@ -64,7 +70,7 @@ const SubscriptionReport = ({ timeRange, url, id, type, refetchLinks }) => {
           w="100%"
           h="auto"
           flexGrow={1}
-          flexBasis="420px"
+          flexBasis={plotMinW}
           direction="column"
         >
           <Heading size="sm">Events</Heading>