diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 33b2a8020..cdfe20916 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -316,7 +316,11 @@ export const draw = function (text, id, version, diagObj) {
       // .attr('height', theBarHeight)
       .attr('height', function (d) {
         if (d.vert) {
-          return 1000.5 * theBarHeight;
+          return (
+            conf.gridLineStartPadding +
+            taskArray.length * (conf.barHeight + conf.barGap) +
+            conf.barHeight * 2
+          );
         }
         return theBarHeight;
       })
@@ -426,7 +430,7 @@ export const draw = function (text, id, version, diagObj) {
       .attr('y', function (d, i) {
         // Ignore the incoming i value and use our order instead
         if (d.vert) {
-          return conf.gridLineStartPadding + taskArray.length * (conf.barHeight + conf.barGap) + 50;
+          return conf.gridLineStartPadding + taskArray.length * (conf.barHeight + conf.barGap) + 60;
         }
         i = d.order;
         return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad;
diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index 5b53a1b07..c8a9c1660 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -237,6 +237,10 @@ const getStyles = (options) =>
     fill: ${options.taskTextDarkColor} !important;
   }
 
+  .vertText {
+    font-size: 15px;
+  }
+
   .activeCritText0,
   .activeCritText1,
   .activeCritText2,