Blazor QuickGrid how to make pager the same width as grid?

Question

I am using Blazor Server .NET 7 with Blazor Quick Grid(0.1.0-alpha.22351.1). My Pager is full width of the Browser Window but my grid width is very small. how can i make my pager to be of the same width as my Grid ?

Here is my Code

 <QuickGrid ItemsProvider="UserStoryProvider"  Pagination="_PaginationState">
     <PropertyColumn Property="@(p => p.PracticeAreaName)" Sortable="true" IsDefaultSort="SortDirection.Ascending" />
     <PropertyColumn Property="@(p => p.StateName)" Sortable="true"  />
     <PropertyColumn Property="@(c => c.UserStory)" Sortable="true" />
   
     <PropertyColumn Property="@(p => p.IsCaseWithAnotherAttorney)" Sortable="true" Title="Assinged?" />
     <PropertyColumn Property="@(p => p.DateOfIncident)" Sortable="true" Format="dd MMM yyyy" />
     <TemplateColumn Title="Action" Align="Align.Center">
         <ChildContent Context="templateContext">
         
             <button type="button" class="btn btn-primary ms-2 mt-1" @onclick="@(()=> EditUserStory(templateContext.UserStoryID_PK))">view</button>
        
         </ChildContent>
     </TemplateColumn>

 </QuickGrid>

 <Paginator Value="@_PaginationState"></Paginator>

Answer 1

You can wrap the whole thing in a div and set the width to fit-content:

<div style="width:fit-content">
    <QuickGrid ItemsProvider="UserStoryProvider"  Pagination="_PaginationState">
     <PropertyColumn Property="@(p => p.PracticeAreaName)" Sortable="true" IsDefaultSort="SortDirection.Ascending" />
     <PropertyColumn Property="@(p => p.StateName)" Sortable="true"  />
     <PropertyColumn Property="@(c => c.UserStory)" Sortable="true" />
   
     <PropertyColumn Property="@(p => p.IsCaseWithAnotherAttorney)" Sortable="true" Title="Assinged?" />
     <PropertyColumn Property="@(p => p.DateOfIncident)" Sortable="true" Format="dd MMM yyyy" />
     <TemplateColumn Title="Action" Align="Align.Center">
         <ChildContent Context="templateContext">
         
             <button type="button" class="btn btn-primary ms-2 mt-1" @onclick="@(()=> EditUserStory(templateContext.UserStoryID_PK))">view</button>
        
         </ChildContent>
     </TemplateColumn>

 </QuickGrid>

 <Paginator Value="@_PaginationState"></Paginator>
</div>