Reduce card padding on small viewports + chart padding (always)

benvinegar · Dec 17, 2024 · 7216053 · 7216053
1 parent a5e4a93
commit 7216053
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/app/components/TimeSeriesChart.tsx b/app/components/TimeSeriesChart.tsx
@@ -115,6 +115,12 @@ export default function TimeSeriesChart({
         return ticks;
     }, [data]);
 
+    // omit first and last
+    const xAxisTicks = useMemo(
+        () => data.slice(1, -1).map((entry) => entry.date),
+        [data],
+    );
+
     // chart doesn't really work no data points, so just bail out
     if (data.length === 0) {
         return null;
@@ -136,10 +142,11 @@ export default function TimeSeriesChart({
                 <CartesianGrid strokeDasharray="3 3" />
                 <XAxis
                     dataKey="date"
+                    // tickLine={false}
+                    tickMargin={8}
+                    ticks={xAxisTicks}
                     tickFormatter={xAxisDateFormatter}
-                    tickLine={false}
-                    tickMargin={5}
-                    minTickGap={20}
+                    tick={{ fill: "grey", fontSize: 14 }}
                 />
 
                 {/* manually setting maxViews vs using recharts "dataMax" key cause it doesnt seem to work */}
@@ -150,6 +157,7 @@ export default function TimeSeriesChart({
                     tickLine={false}
                     tickMargin={5}
                     ticks={yAxisCountTicks}
+                    tick={{ fill: "grey", fontSize: 14 }}
                 />
                 <YAxis
                     yAxisId="bounceRate"

diff --git a/app/root.tsx b/app/root.tsx
@@ -71,7 +71,9 @@ export const Layout = ({ children = [] }: { children: React.ReactNode }) => {
                 <Links />
             </head>
             <body>
-                <div className="container mx-auto">{children}</div>
+                <div className="container mx-auto pl-2 pr-2 sm:pl-8 sm:pr-8">
+                    {children}
+                </div>
                 <ScrollRestoration />
                 <Scripts />
                 <script
@@ -89,7 +91,7 @@ export default function App() {
     const data = useLoaderData<typeof loader>();
 
     return (
-        <div className="mt-4">
+        <div className="mt-0 sm:mt-4">
             <header className="border-b-2 mb-8 py-2">
                 <nav className="flex justify-between items-center">
                     <div className="flex items-center">

diff --git a/app/routes/resources.timeseries.tsx b/app/routes/resources.timeseries.tsx
@@ -90,7 +90,7 @@ export const TimeSeriesCard = ({
     return (
         <Card>
             <CardContent>
-                <div className="h-72 pt-6 -m-4 -ml-8 sm:m-0">
+                <div className="h-72 pt-6 -m-4 -mr-10 -ml-10 sm:-m-2 sm:-ml-6 sm:-mr-6">
                     {chartData && (
                         <TimeSeriesChart
                             data={chartData}