Style Blazor movie dB tutorial app QuickGrid

aspnetcore/blazor/tutorials/movie-database-app/part-8.md

@@ -89,42 +89,6 @@ To see how making a component interactive enhances the user experience, let's pr
   * Runs on the server.
   * Renders content interactively over the underlying SignalR connection.
 
-## Add pagination to the `QuickGrid`
-
-The `QuickGrid` component can page data from the database.
-
-Open the `Index` component (`Components/Pages/Movies/Index.razor`). Add a <xref:Microsoft.AspNetCore.Components.QuickGrid.PaginationState> instance to the `@code` block. Because the tutorial only uses five movie records for demonstration, set the <xref:Microsoft.AspNetCore.Components.QuickGrid.PaginationState.ItemsPerPage%2A> to `2` items in order to demonstrate pagination. Normally, the number of items to display would be set to a higher value or set dynamically via a dropdown list.
-
-```csharp
-private PaginationState pagination = new PaginationState { ItemsPerPage = 2 };
-```
-
-Set the `QuickGrid` component's <xref:Microsoft.AspNetCore.Components.QuickGrid.QuickGrid`1.Pagination> property to `pagination`:
-
-```diff
-- <QuickGrid Class="table" Items="FilteredMovies">
-+ <QuickGrid Class="table" Items="FilteredMovies" Pagination="pagination">
-```
-
-To provide a UI for pagination below the `QuickGrid` component, add a [`Paginator` component](xref:Microsoft.AspNetCore.Components.QuickGrid.Paginator) below the `QuickGrid` component.  Set the <xref:Microsoft.AspNetCore.Components.QuickGrid.Paginator.State%2A?displayProperty=nameWithType> to `pagination`:
-
-```razor
-<Paginator State="pagination" />
-```
-
-Run the app and navigate to the movies `Index` page. You can page through the movie items at two movies per page:
-
-![Movie list showing the second page of two items](~/blazor/tutorials/movie-database-app/part-8/_static/paging-movies.png)
-
-The component is *interactive*. The page doesn't reload for paging to occur. The paging is performed live over the SignalR connection between the browser and the server, where the paging operation is performed on the server with the rendered result sent back to the client for the browser to display.
-
-Change <xref:Microsoft.AspNetCore.Components.QuickGrid.PaginationState.ItemsPerPage%2A> to a more reasonable value, such as 10 items per page:
-
-```diff
-- private PaginationState pagination = new PaginationState { ItemsPerPage = 2 };
-+ private PaginationState pagination = new PaginationState { ItemsPerPage = 10 };
-```
-
 ## Sortable `QuickGrid`
 
 Open the `Index` component (`Components/Pages/Movies/Index.razor`).
@@ -199,6 +163,78 @@ Filtering database records is performed on the server, and the server interactiv
 
 Instead of an HTML form, submitting a GET request in this scenario could've also used JavaScript to submit the request to the server, either using the [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API)` or [XMLHttpRequest API](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest). In most cases, JavaScript can be replaced by using Blazor and C# in an interactive component.
 
+## Add pagination to the `QuickGrid`
+
+The `QuickGrid` component can page data from the database.
+
+Open the `Index` component (`Components/Pages/Movies/Index.razor`). Add a <xref:Microsoft.AspNetCore.Components.QuickGrid.PaginationState> instance to the `@code` block. Because the tutorial only uses five movie records for demonstration, set the <xref:Microsoft.AspNetCore.Components.QuickGrid.PaginationState.ItemsPerPage%2A> to `2` items in order to demonstrate pagination. Normally, the number of items to display would be set to a higher value or set dynamically via a dropdown list.
+
+```csharp
+private PaginationState pagination = new PaginationState { ItemsPerPage = 2 };
+```
+
+Set the `QuickGrid` component's <xref:Microsoft.AspNetCore.Components.QuickGrid.QuickGrid`1.Pagination> property to `pagination`:
+
+```diff
+- <QuickGrid Class="table" Items="FilteredMovies">
++ <QuickGrid Class="table" Items="FilteredMovies" Pagination="pagination">
+```
+
+To provide a UI for pagination below the `QuickGrid` component, add a [`Paginator` component](xref:Microsoft.AspNetCore.Components.QuickGrid.Paginator) below the `QuickGrid` component. Set the <xref:Microsoft.AspNetCore.Components.QuickGrid.Paginator.State%2A?displayProperty=nameWithType> to `pagination`:
+
+```razor
+<Paginator State="pagination" />
+```
+
+Run the app and navigate to the movies `Index` page. You can page through the movie items at two movies per page:
+
+![Movie list showing the second page of two items](~/blazor/tutorials/movie-database-app/part-8/_static/paging-movies.png)
+
+The component is *interactive*. The page doesn't reload for paging to occur. The paging is performed live over the SignalR connection between the browser and the server, where the paging operation is performed on the server with the rendered result sent back to the client for the browser to display.
+
+Change <xref:Microsoft.AspNetCore.Components.QuickGrid.PaginationState.ItemsPerPage%2A> to a more reasonable value, such as 5 items per page:
+
+```diff
+- private PaginationState pagination = new PaginationState { ItemsPerPage = 2 };
++ private PaginationState pagination = new PaginationState { ItemsPerPage = 5 };
+```
+
+## Style `QuickGrid` rows and cells
+
+You can apply table row and cell styles to the rendered `QuickGrid` component with a stylesheet isolated to the `Index` component using *CSS isolation*.
+
+CSS isolation only applies to the component you associate with the format `{COMPONENT NAME}.razor.css`, where the `{COMPONENT NAME}` placeholder is the component name. The filename is `Index.razor.css` to apply the isolated styles to the `Index` component.
+
+To apply changes to a child component, such as the `QuickGrid` component of the `Index` component, use the `::deep` pseudo-element for element styles in the stylesheet. The `::deep` pseudo-element only works with descendant elements, so the `QuickGrid` component must be wrapped with a `<div>` in order to apply the styles to it.
+
+In `Components/Pages/MoviePages/Index.razor`, place `<div>` tags around the `QuickGrid` component:
+
+```diff
++ <div>
+    <QuickGrid ...>
+        ...
+    </QuickGrid>
++ </div>
+```
+
+In the `MoviePages` folder, add a new isolated stylesheet for the `Index` component. Use `::deep` pseudo-elements to make the row height `3em` and vertically-center the table cell content.
+
+`Components/Pages/MoviePages/Index.razor.css`:
+
+```css
+::deep tr {
+    height: 3em;
+}
+
+    ::deep tr > td {
+        vertical-align: middle;
+    }
+```
+
+Blazor rewrites CSS selectors to match the markup rendered by the component. The rewritten CSS styles are bundled and produced as a static asset for you, so you don't need to take further action to apply the styles to the `QuickGrid` component when it's rendered.
+
+![Movie list showing row heights at 3em with vertically-centered content](~/blazor/tutorials/movie-database-app/part-8/_static/styled-quickgrid.png)
+
 ## Clean up
 
 :::zone pivot="vs"