Unexpected padding when using shadcn/chart's YAxis

[Embers-of-the-Fire]

Using YAxis may result in unexpected left padding:

Screen shot

• With YAxis:
  
• Without YAxis:
  

Code

Chart

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
];
const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "hsl(173 58% 39%)",
  },
  mobile: {
    label: "Mobile",
    color: "hsl(12 76% 61%)",
  },
} satisfies ChartConfig;

export const ArenaChart: React.FC = () => {
  return (
    <ChartContainer className="w-full h-full" config={chartConfig}>
      <LineChart
        accessibilityLayer
        data={chartData}
        margin={{
          right: 6,
        }}
      >
        <YAxis />
        <CartesianGrid vertical={false} />
        <ChartTooltip
          cursor={false}
          content={
            <ChartTooltipContent
              hideLabel
              indicator="dot"
              className="text-lg"
            />
          }
          labelClassName="text-lg"
        />
        <Legend />
        <Line
          dataKey="mobile"
          type="monotone"
          fill="var(--color-mobile)"
          fillOpacity={0.4}
          stroke="var(--color-mobile)"
        />
        <Line
          dataKey="desktop"
          type="monotone"
          fill="var(--color-desktop)"
          fillOpacity={0.4}
          stroke="var(--color-desktop)"
        />
      </LineChart>
    </ChartContainer>
  );
};

Container

<ResizablePanel defaultSize={60} minSize={30}>
  <div className="h-full items-center justify-center p-6">
    <ArenaChart />
  </div>
</ResizablePanel>

[citizenhicks]

you can set the 'width' property to override the default 60. i use 20. e.g.:

<YAxis 
width={20}
/>