Recharts: Yaxis label cutoff and not aligning in mobile screens

Question

Here is the recharts - Bar chart sample I have tried. https://codesandbox.io/s/simple-bar-chart-forked-8tu41b?file=/src/App.tsx

1. When width is lesser, Yaxis label is not started from the first, it seems to be cutoff like below. Example full email is "[email protected]" but it is starting from "[email protected]". (Note: Even if we add tickFormatter to add ellipse after certain characters in label, it is not aligning unless we give proper width meaning it is cut off at the start. I could not understand it. Please help me to understand and align it.)
2. And when viewing the chart in the Large and Small mobile screens, chart bars are overriding the labels like this,

I have wrapped the chart inside the responsive container still chart bars and labels are not fitting properly. Any suggestions for this problem would be very helpful.

Thank you in advance.