Timesheet Workspace, before vs after

Manual visual diff of the optimization deployed to ERP•AI. Red is previous behavior, green is current behavior.

CSS rendering containment

Before

.ppp-associate-item {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-control);
  background: hsl(var(--background));
  overflow: hidden;
  transition: border-color 140ms, box-shadow 140ms, transform 140ms;
}
.ppp-associate-head {
  grid-template-columns: 22px 28px minmax(190px, 1fr) auto auto auto;
}

After

.ppp-associate-item {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-control);
  background: hsl(var(--background));
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 132px;
  transition: border-color 140ms, box-shadow 140ms;
}
.ppp-associate-head {
  grid-template-columns: 22px 28px minmax(190px, 1fr) minmax(170px, auto) minmax(180px, auto) minmax(180px, auto);
  min-width: 0;
}

Detail panel containment

Before

.ppp-associate-detail {
  display: none;
  padding: 0 14px 14px 64px;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.14);
}

After

.ppp-associate-detail {
  display: none;
  padding: 0 14px 14px 64px;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.14);
  contain: layout paint;
  content-visibility: auto;
  contain-intrinsic-size: 180px;
}

Pagination render load

Before

let refreshToken = 0;
const pageSize = 25;

After

let refreshToken = 0;
let detailRenderFrame = 0;
const pageSize = 12;

Heavy row details

Before

<div class="ppp-associate-detail">
  ${renderGroupDetails(group)}
</div>

After

<div class="ppp-associate-detail" id="associate-detail-${globalIndex}" data-group-detail="${globalIndex}" aria-live="polite"></div>

// Details are hydrated after the list paints, or when a row is expanded.
hydrateVisibleGroupDetails(slice, start);

Accessibility on expansion

Before

<button class="ppp-associate-toggle" type="button" data-toggle-group="${globalIndex}" aria-label="Show exceptions for ${esc(group.associateName)}">

After

<button class="ppp-associate-toggle" type="button" data-toggle-group="${globalIndex}" aria-expanded="false" aria-controls="associate-detail-${globalIndex}" aria-label="Show exceptions for ${esc(group.associateName)}">