diff --git a/ui/src/app/views/workflow/run/node/pipeline/variables/job.variable.html b/ui/src/app/views/workflow/run/node/pipeline/variables/job.variable.html
index 06473834bd..7569be1a88 100644
--- a/ui/src/app/views/workflow/run/node/pipeline/variables/job.variable.html
+++ b/ui/src/app/views/workflow/run/node/pipeline/variables/job.variable.html
@@ -1,4 +1,4 @@
-<sm-modal title="{{ 'pipeline_job_variable_title' | translate }}" #jobVariablesModal>
+<sm-modal class="variables-modal" title="{{ 'pipeline_job_variable_title' | translate }}" #jobVariablesModal>
     <modal-content>
         <h4 *ngIf="varGit.length > 0">{{ 'pipeline_job_variable_git' | translate }}</h4>
         <app-parameter-list *ngIf="varGit.length > 0" [parameters]="varGit" mode="job" ></app-parameter-list>
diff --git a/ui/src/app/views/workflow/run/node/pipeline/variables/job.variable.scss b/ui/src/app/views/workflow/run/node/pipeline/variables/job.variable.scss
index e69de29bb2..1a5c96b4b7 100644
--- a/ui/src/app/views/workflow/run/node/pipeline/variables/job.variable.scss
+++ b/ui/src/app/views/workflow/run/node/pipeline/variables/job.variable.scss
@@ -0,0 +1,14 @@
+::ng-deep .ui.modal.variables-modal,::ng-deep .modals.dimmer .ui.scrolling.modal.variables-modal {
+    > .content {
+        position: relative;
+        height: calc(100% - 7rem);
+        overflow: auto;
+        padding-bottom: 1rem;
+    }
+    position: absolute !important;
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+    margin-left: -25% !important;
+    top: 3.5rem !important;
+    bottom: 3.5rem;
+}
\ No newline at end of file