Adjust styling of dashboard widgets

Author: paulpopus

demo/src/payload.config.ts

@@ -61,7 +61,8 @@ export default buildConfig({
         ],
       },
       dashboard: {
-        beforeDashboard: ["topPages", "viewsChart"],
+        beforeDashboard: ["viewsChart"],
+        afterDashboard: ["topPages"],
       },
       globals: [
         {

src/components/Charts/GlobalViewsChart.tsx

@@ -25,7 +25,7 @@ const GlobalViewsChart: React.FC<Props> = ({}) => {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        timeframe: "30d",
+        timeframe: "currentMonth",
         metrics: ["views"],
       }),
     }).then((response) => response.json());
@@ -41,7 +41,7 @@ const GlobalViewsChart: React.FC<Props> = ({}) => {
   }, []);
 
   const chartLabel = useMemo(() => {
-    return "Sitewide views";
+    return "Views";
   }, []);
 
   const primaryAxis = React.useMemo<AxisOptions<ChartDataPoint>>(() => {
@@ -69,6 +69,7 @@ const GlobalViewsChart: React.FC<Props> = ({}) => {
     <section
       style={{
         marginBottom: "1.5rem",
+        maxWidth: "70rem",
       }}
     >
       {chartData?.length && chartData.length > 0 ? (

src/components/Reports/TopPages.tsx

@@ -42,8 +42,9 @@ const TopPages: React.FC<Props> = () => {
         marginBottom: "1.5rem",
         border: "1px solid",
         borderColor: "var(--theme-elevation-100)",
-        padding: "0.5rem",
+        padding: "1rem",
         width: "100%",
+        maxWidth: "70rem",
       }}
     >
       <h1 style={{ fontSize: "1.25rem", marginBottom: "0.75rem" }}>
@@ -63,6 +64,7 @@ const TopPages: React.FC<Props> = () => {
                     display: "flex",
                     justifyContent: "space-between",
                     width: "100%",
+                    marginBottom: "0.5rem",
                   }}
                   key={itemIndex}
                 >