Webpage becoming unresponsive when reducing the size of window after upgrading to Angular 16

Question

One of my webpage in my angular project becomes unresponsive and Stucks when I try to decrease the size of the browser window. It has been working fine over the years and I am facing this issue only after I upgraded my angular 15 to angular 16.

Following is my code -

The functionality of the code is I have a table with 3-4 columns, where the values of my first column when clicked expands a card. So whenever I click on any element in my table, the table becomes one data element and card opens and becomes other element thus having 2 td

I have marked both the as 1 and 2.

How I know that this snippet of my entire code might be the reason -> When I am deleting any of the one td .. the page runs normally and does not hang up on decreasing window size... Page becoming unresponsive only happens on when both td are present.

<div class="card leftMargin rightMargin">
  <div class="card-body">

    <table>
      <!-- ***** First td ***** -->
      <td>
        <dx-data-grid
          id="grid"
          [(dataSource)]="some_file.dataSource"
          [showBorders]="true"
          height="calc(100vh - 255px)">
          <dxo-paging [enabled]="true" [pageSize]="15"></dxo-paging>
          <dxo-pager [visible]="true"></dxo-pager>
          <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
          <!-- ... Other dxo-columns ... -->

          <!-- Templates for dxo-columns -->
          <div *dxTemplate="let data of 'nwfHeaderCellTemplate-viewMenu'">
            Something
          </div>

          <div *dxTemplate="let cell of 'Iptemplate'">
            <a class="nwf-is-link-like pt-point15" (click)="OpenCellDetails(cell.data['name']);">Something </a>
          </div>

          <div *dxTemplate="let cell of 'spacetemplate'">
            <nwf-horizontal-bar-chart [currentValue]="some_data">
            </nwf-horizontal-bar-chart>
          </div>

          <div *dxTemplate="let cell of 'statusTemplate'">
            <div *ngIf="cell.data['analytics'] === 'yes' then thenBlock"></div>
            <ng-template #thenBlock>
              <!-- Something -->
            </ng-template>
          </div>

          <div *dxTemplate="let cell of 'LastScanHistorytemplate'">
            <div class="center_align">
              some value
            </div>
          </div>

          <div *dxTemplate="let cell of 'timetakentemplate'">
            <div *ngIf="cell.data['time_taken']!=='' then minutesBlock"></div>
            <ng-template #minutesBlock>
              <div class="center_align">
                some value
              </div>
            </ng-template>
          </div>
        </dx-data-grid>
      </td>
      <!-- ***** First td over***** -->

      <!-- ***** Second td ***** -->
      <td style="width: 80%;" *ngIf="some_file.some_function">
        <tr></tr>
        <div class="card" style="flex-basis: 250px; flex-grow: 0;">
          <div class="card-body">
            <h6>Some heading</h6>
            <br>

            <ul ngbNav #nav="ngbNav" class="nav-tabs">
              <li ngbNavItem="exp" id="exp">
                <a ngbNavLink>Some tag</a>
                <ng-template ngbNavContent>
                  <!-- Some data here -->
                </ng-template>
              </li>
            </ul>
            <div [ngbNavOutlet]="nav"></div>
          </div>
        </div>
      </td>
      <!-- ***** Second td over ***** -->
    </table>
  </div>
</div>

Parts of this snippet containing private info are removed but I have kept all the tags and css.

Also: Have tried playing around with the widths of different elements, does not seem to work.

P.S. The page used to run fine before the upgrade.

I have tried work around playing with the widths and sizes of all elements inside the table, does not seem to work.

I am not able to see any error on the browser console or cmd where hosted, the entire browser tab becomes unresponsive. I have tried with chrome and edge both.