.actions-cell{
  display:flex;
  gap:.5rem;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
}

/* Ensure grid cells can expand height to fit wrapped actions */
:root .fluent-data-grid-row .fluent-data-grid-cell{
  white-space:normal;
}

/* Make action buttons compact but not clipped */
.ws-icon-btn{
  min-width: auto;
  padding-inline: 8px;
}

/* === Universal action column fix (added) === */
/* Allow any button groups inside data grid cells to wrap and not clip */
.fluent-data-grid-cell .btn-group,
.fluent-data-grid-cell .actions-column,
.fluent-data-grid-cell .actions-cell,
.fluent-data-grid-cell .ws-wrap {
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem;
  align-items:center;
  justify-content:flex-end;
  overflow:visible;
}

/* Let the action cell grow vertically when wrapping occurs */
.fluent-data-grid-row {
  height:auto !important; /* override fixed row height so wrapped buttons are visible */
}

/* Prevent clipping of overflowing content in cells (some themes hide overflow) */
.fluent-data-grid-cell {
  overflow:visible !important;
}

/* Slightly reduce padding for wrapped buttons to fit better on narrow widths */
.fluent-data-grid-cell .btn.btn-icon,
.fluent-data-grid-cell .ws-icon-btn {
  padding:0.4rem 0.5rem;
  min-height:32px;
  min-width:32px;
}

/* Mobile: ensure full width stacking still works */
@media (max-width: 600px) {
  .fluent-data-grid-cell .btn-group,
  .fluent-data-grid-cell .actions-column,
  .fluent-data-grid-cell .actions-cell,
  .fluent-data-grid-cell .ws-wrap {
    justify-content:flex-start;
  }
}