PrimeNG v13.0.1 issues with font size on Table and Accordion elements

[IanTheG]

I'm having issues with the font-size changing using the p-table, p-accordion, and p-accordionTab elements, specifically on iPhone and iPad.

I think both elements are affected by the same underlying issue: when resized to expand a row or rotate to landscape, the element's width or height property is updated (which is set using px in the minified code) and the text fills the space rather than remaining the same size.

For the p-table, I'm using an expandable content to display details. But when I click to open a second <tr> with details, both expanded details increase their font-size from 16px to 24px. In the html tag, I have the font-size: 16px set and no other code to increase the font-size for these elements. I'm not sure what's happening under the hood, but it's causing major UI problems.

Code: Select all

    <ng-template pTemplate="rowexpansion" let-m>
      <tr>
        <td colspan="8">
          {{ m.move.description[0].flavor_text }}
        </td>
      </tr>
    </ng-template>

A similar issue is happening with the accordion elements. When the device rotates, the font-size also increases from 16px to 24px. Hard coding the style to set the correct font-size does not resolve the issue. I think some javascript code may be working behind the scenes, but I'm not sure. This is definitely a bug and I've been unable to find answers elsewhere.

Code: Select all

<p-card header="Abilities" styleClass="p-card-style">
  <p-accordion>
    <p-accordionTab *ngFor="let a of selected_character_abilities">
      <ng-template pTemplate="header">
        <div style="display: flex; flex-direction: column">
          <h3 style="padding: 0">
            {{ displayFormattedName(a.ability.name) }} {{ a.is_hidden ? '(hidden)' : '' }}
          </h3>
          <p style="padding-bottom: 0; font-style: italic">
            {{ a.ability.description[0].flavor_text }}
          </p>
        </div>
      </ng-template>
      <ng-template pTemplate="body">
        <p>{{ a.ability.effects[0].effect }}</p>
      </ng-template>
    </p-accordionTab>
  </p-accordion>
</p-card>