Pop up for options and save not opening up on fullscreen

I have some custom buttons on my table save and options that are not popping open when the screen is on Fullscreen. They are popping up on the back of the full screen so to get access you need to minimize the screen. This is how the html file looks like.

  <ng-template [laTemplate]="templateTypes.DONE" let-state>

        <div class="flexmonster" style="width: 90vw">
          <form [formGroup]="saveForm">
            <div class="card flex justify-content-center">
              <p-dialog
                header="{{ 'REPORTBUILDER.FILL_REQUIRED_FIELDS' | transloco }}"
                [(visible)]="visible"
                [style]="{ width: '25rem' }"
              >
                <div
                  class="flex align-items-center gap-3 mb-3"
                  style="margin-bottom: 15px"
                >
                  <label for="reportname" class="font-semibold w-6rem"
                    >{{ 'REPORTBUILDER.REPORT_NAME' | transloco }}</label
                  >
                  <div
                    class="error"
                    style="margin-top: -18px; margin-left: -80px"
                  >
                    *
                  </div>
                  <input
                    pInputText
                    name="reportname"
                    class="flex-auto"
                    autocomplete="off"
                    type="text"
                    formControlName="reportname"
                  />
                </div>
                <div
                  class="flex align-items-center gap-3 mb-5"
                  style="margin-bottom: 15px"
                >
                  <label for="reportdescription" class="font-semibold w-6rem"
                    >{{ 'REPORTBUILDER.REPORT_DESCRIPTION' | transloco }}
                  </label>
                  <div class="error" style="margin-top: -18px">*</div>
                  <input
                    pInputText
                    name="reportdescription"
                    class="flex-auto"
                    autocomplete="off"
                    formControlName="reportdescription"
                  />
                </div>
                <div class="display: flex; justify-content: center;">
                  <p-button
                    label="{{ 'REPORTBUILDER.CANCEL' | transloco }}"
                    severity="secondary"
                    (click)="handleCancel()"
                    severity="secondary"
                    class="flex-button"
                  ></p-button>
                  <p-button
                    label="{{ 'REPORTBUILDER.SAVE' | transloco }}"
                    (click)="saveToServer()"
                    [disabled]="!saveForm.valid"
                    severity="success"
                  ></p-button>
                </div>
              </p-dialog>
            </div>
          </form>
          <fm-pivot
            #pivot
            [toolbar]="true"
            [global]= "globalReport"
            (ready)="LoadReportBuilder($event)"
            (beforetoolbarcreated)="customizeToolbar($event)"
            (reportcomplete)="onReportCompleteAction()"
            [licenseKey]="flexmonsterLicenseKey"
            style="width: 100%"
          ></fm-pivot>
        </div>

        <div class="options-container">
          <div id="popupOverlay" class="hideCustomPopup"></div>
          <div id="custom-options-popup" class="hideCustomPopup">
            <div id="custom-options-popup-title">{{ 'REPORTBUILDER.LAYOUT_OPTIONS' | transloco }}</div>
            <h4>{{ 'REPORTBUILDER.GRAND_TOTALS' | transloco }}</h4>
            <p-dropdown
              placeholder="{{ 'REPORTBUILDER.SELECT' | transloco }}"
              [(ngModel)]="selectedGrandTotal"
              [options]="grandTotalsoptions"
              optionValue="value"
            >
            </p-dropdown>

            <h4>{{ 'REPORTBUILDER.SUBTOTALS' | transloco }}</h4>
            <p-dropdown
              placeholder="{{ 'REPORTBUILDER.SELECT' | transloco }}"
              [(ngModel)]="selectedSubtTotal"
              [options]="subTotalsoptions"
              optionValue="value"
            >
            </p-dropdown>

            <h4>{{ 'REPORTBUILDER.LAYOUT' | transloco }}</h4>
            <p-dropdown
              placeholder="{{ 'REPORTBUILDER.SELECT' | transloco }}"
              [(ngModel)]="selectedLayout"
              [options]="layoutOptions"
              styleClass=" select-selected"
              optionValue="value"
            >
            </p-dropdown>

            <div class="custom-options-popup-buttons-container">
              <button (click)="closeOptionsPopup()" class="clear-btn">
                {{ 'REPORTBUILDER.CANCEL' | transloco }}
              </button>
              <button (click)="submitOptions()" class="submit-btn">
                {{ 'REPORTBUILDER.SUBMIT' | transloco }}
              </button>
            </div>
          </div>
        </div>
      </ng-template>