optimized scrollbar behaviour and some spaces.

src/frontend/app.tsx

@@ -42,7 +42,7 @@ export function getApp() {
                                 <div style={{overflow: 'hidden', paddingLeft: '5px'}}>
                                     {/* @ts-ignore */}
                                     <ScrollArea scrollbarSize='7px' style={{height: '100%'}}>
-                                        <div style={{paddingRight: '10px'}}>
+                                        <div style={{paddingRight: '17px'}}>
                                             <Tabs.Panel value="welcome" style={{height: '100%'}}>
                                                 {demo_Welcome_description}
                                             </Tabs.Panel>

src/frontend/demo_editor.tsx

@@ -63,6 +63,7 @@ export const demo_Editor_description =
         <Text>
             Feel free to play around with the editor and watch the changes in the other views.
         </Text>
+        <Space h="20px"/>
     </>;
 
 export function getDemoEditor() {

src/frontend/demo_pd.tsx

@@ -89,7 +89,7 @@ export const demo_PD_description =
         <Resultblock>
             In the History, you can now choose between two "Restore" actions, but they cannot be applied simultaneously due to the conflict.
         </Resultblock>
-
+        <Space h="20px"/>
     </>;
 
 

src/frontend/welcome.tsx

@@ -52,6 +52,7 @@ export const demo_Welcome_description =
         <Text>
             Please select one of the demos above. We recommend that you complete the demos in the order listed.
         </Text>
+        <Space h="20px"/>
     </>;