docs(ProjectTemplate): adjust labels & styles (SAP#6566)

Author: Lukas742

.storybook/components/ProjectTemplate.module.css

@@ -1,7 +1,6 @@
 .cardContainer {
   position: relative;
   width: 500px;
-  height: 20rem;
   margin-block-end: 2rem;
   flex-shrink: 0;
 }
@@ -38,3 +37,7 @@
 .popover::part(content) {
   padding: 0.5rem;
 }
+
+.verticalLine {
+  padding-inline: 0.1rem;
+}

.storybook/components/ProjectTemplate.tsx

@@ -13,7 +13,8 @@ import {
   ThemeProvider
 } from '@ui5/webcomponents-react';
 import { clsx } from 'clsx';
-import { ReactNode, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import { useRef, useState } from 'react';
 import { addCustomCSSWithScoping } from '../../packages/main/src/internal/addCustomCSSWithScoping';
 import classes from './ProjectTemplate.module.css';
 
@@ -84,9 +85,9 @@ export function ProjectTemplate(props: ProjectTemplatePropTypes) {
               }}
             >
               <Text>
-                Currently, the <code>BarcodeScannerDialog</code> web component isn't compatible with SSR environments.
-                For the Next.js Pages Router and Remix, this bug crashes the entire build process, even if the component
-                isn't imported.
+                Currently, the <code>BarcodeScannerDialog</code> web component isn&apos;t compatible with SSR
+                environments. For the Next.js Pages Router and Remix, this bug crashes the entire build process, even if
+                the component isn&apos;t imported.
                 <br />
                 This is <b>not</b> the case for the Next.js App Router; there, the build only crashes if the component
                 is used.
@@ -129,19 +130,16 @@ export function ProjectTemplate(props: ProjectTemplatePropTypes) {
         >
           <div className={classes.cardContent}>
             {deprecationNotice && (
-              <MessageStrip
-                hideCloseButton
-                design={MessageStripDesign.Critical}
-                children={deprecationNotice}
-                className={classes.deprecationNotice}
-              />
+              <MessageStrip hideCloseButton design={MessageStripDesign.Critical} className={classes.deprecationNotice}>
+                {deprecationNotice}
+              </MessageStrip>
             )}
             <Link design={LinkDesign.Emphasized} href={href}>
-              View Example
+              View{isTemplate ? ' Template' : ' Example'}
             </Link>
             {stackBlitzHref && (
               <>
-                |
+                <span className={classes.verticalLine}>|</span>
                 <Link design={LinkDesign.Emphasized} href={stackBlitzHref}>
                   View in StackBlitz
                 </Link>

docs/ProjectTemplates.mdx

@@ -17,7 +17,7 @@ A curated list of minimal project templates and examples to get started using UI
 
 <br />
 
-<FlexBox wrap={FlexBoxWrap.Wrap} style={{ width: '100%' }} justifyContent={FlexBoxJustifyContent.SpaceBetween}>
+<FlexBox wrap={FlexBoxWrap.Wrap} style={{ width: '100%', gap: '1rem' }} justifyContent={FlexBoxJustifyContent.Start}>
   <ProjectTemplate
     title={'Next.js'}
     subtitle={'App Router'}
@@ -52,7 +52,7 @@ A curated list of minimal project templates and examples to get started using UI
 
 <br />
 
-<FlexBox wrap={FlexBoxWrap.Wrap} style={{ width: '100%' }} justifyContent={FlexBoxJustifyContent.SpaceBetween}>
+<FlexBox wrap={FlexBoxWrap.Wrap} style={{ width: '100%', gap: '1rem' }} justifyContent={FlexBoxJustifyContent.Start}>
   <ProjectTemplate
     title={'Next.js'}
     subtitle={'App Router'}