react-calendar-heatmapライブラリでは、SVGのviewBoxの高さが実際に必要な高さよりも約30px大きく計算される問題がある。

問題の原因:

• getHeight()メソッドでgetWeekdayLabelSize()（約30px）が余分に追加される
• 結果としてviewBox="0 0 612 120"のような大きなviewBoxが生成される
• カレンダー下部に不要な空白が表示される

解決方法: ライブラリのprototypeを拡張してgetHeight()メソッドをオーバーライドする

(CalendarHeatmap as any).prototype.getHeight = function () {
  return (
    this.getWeekWidth() + (this.getMonthLabelSize() - this.props.gutterSize)
  );
};

効果:

• viewBoxの高さが120pxから約90pxに削減
• 下部の余分な空白（約30px）が削除される
• 他のコンポーネントとの干渉を防止