docs(nextjs-pages): fix app shell layout (#4727)

Author: MarcusNotheis

.github/workflows/examples.yml

@@ -0,0 +1,39 @@
+name: Examples
+
+on:
+  push:
+    branches:
+      - 'main'
+    paths:
+      - 'examples/**/*'
+  pull_request:
+    paths:
+      - 'examples/**/*'
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        path:
+          - nextjs-pages
+          - vite-ts
+      fail-fast: false
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/[email protected]
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Install
+        run: npm ci
+        working-directory: examples/${{ matrix.path }}
+
+      - name: Build
+        run: npm run build
+        working-directory: examples/${{ matrix.path }}
+
+      - name: Test
+        run: npm run test --if-present
+        working-directory: examples/${{ matrix.path }}

.github/workflows/test.yml

@@ -19,6 +19,7 @@ jobs:
           - charts
           - cypress-commands
           - main/src/components
+      fail-fast: false
 
     steps:
       - name: Checkout

examples/nextjs-pages/README.md

@@ -1,7 +1,7 @@
 ## UI5 Web Components React - Next.js Pages Router Example
 
 This example shows how to use the [Next.js](https://nextjs.org/) Pages Router with UI5 Web Components for React.
-It includes the required adjustments in `src/pages/_app.tsx` and `src/pages/_document.tsx` as well as a very simple Todo
+It includes the required adjustments in `pages/_app.tsx` and `pages/_document.tsx` as well as a very simple Todo
 App.
 
 ## How to use this template
@@ -35,13 +35,13 @@ pnpm dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `src/pages/index.tsx`. The page auto-updates as you edit the file.
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
 [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed
 on [http://localhost:3000/api/todods](http://localhost:3000/api/todos). This endpoint can be edited
-in `src/pages/api/todos.ts`.
+in `pages/api/todos.ts`.
 
-The `src/pages/api` directory is mapped to `/api/*`. Files in this directory are treated
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated
 as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
 ## Learn More

examples/nextjs-pages/components/AppShell/AppShell.module.css

@@ -5,7 +5,7 @@
 }
 
 .scrollContainer {
-    height: calc(100vh - var(--_ui5_shellbar_root_height));
+    height: calc(100vh - 3.25rem);
     overflow-y: auto;
     position: relative;
 }

examples/nextjs-pages/pages/todos/[id].tsx

@@ -29,7 +29,7 @@ export default function TodoDetails({ todo }: Props) {
     <>
       <DynamicPage showHideHeaderButton={false} headerTitle={<DynamicPageTitle header={todo?.title} />}>
         <MessageStrip design={MessageStripDesign.Information}>
-          Since this is only a demo app, adjustments made here on this page won't be reflected in the todo list.
+          {`Since this is only a demo app, adjustments made here on this page won't be reflected in the todo list.`}
         </MessageStrip>
         <Form>
           <FormItem label={'Title'}>

examples/nextjs-pages/styles/globals.css

@@ -8,9 +8,4 @@ body {
   overflow-x: hidden;
   padding: 0;
   margin: 0;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
+}