/* Add this ONCE to your global stylesheet (wwwroot/css/app.css or site.css).
   Then add "wrap-grid" to the Class of ANY RadzenDataGrid, anywhere in the app.
   No component, no code-behind, no per-page CSS needed. */

.wrap-grid .rz-data-row td,
.wrap-grid .rz-cell-data {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    vertical-align: middle;
}

/* Horizontal scroll instead of columns getting squeezed/cut off */
.wrap-grid .rz-data-grid-table-wrapper {
    overflow-x: auto;
}

/* Optional: put "wrap-grid clamp-2" to cap wrapped text at 2 lines
   instead of letting rows grow tall */
.wrap-grid.clamp-2 .rz-cell-data {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Optional: RadzenDataGridColumn has no Class parameter, so for columns
   you want to KEEP on one line (Status badge, Actions), wrap that column's
   Template content in <span class="no-wrap"> or <div class="no-wrap">
   instead of setting Class on the column itself. */
.wrap-grid .no-wrap {
    white-space: nowrap !important;
    display: inline-block;
}