Fix scrolling section in Welcome page

Fixes #3384

Signed-off-by: David Thompson <davthomp@redhat.com>

Author: datho7561

src/webview/welcome/app/welcome.scss

@@ -45,15 +45,6 @@ header {
     }
 }
 
-.content__area--full-scroll {
-    background-color: unset !important;
-    margin-bottom: 90vh;
-
-    .section--settings {
-        margin: 0 0 1em 0;
-    }
-}
-
 .header__logo {
     display: flex;
     flex-direction: row;
@@ -78,23 +69,6 @@ header {
     max-height: 400px;
 }
 
-.last__image {
-    height: 30rem;
-    margin-left: 5rem;
-}
-
-.fixMargin {
-    margin-top: -70px;
-}
-
-.lastone {
-    max-height: 25rem;
-}
-
-.link__configure {
-    margin-left: 10px;
-}
-
 section {
     display: flex;
     flex-wrap: wrap;
@@ -111,50 +85,6 @@ section {
     }
 }
 
-.sticky-section-content .sticky-section-exten {
-    top: 0;
-    width: 100%;
-}
-
-@media screen and (min-width: 120px) and (max-width: 400px) {
-    .sticky-section-content .sticky-section-exten{
-        height: 8vh !important;
-    }
-
-    .sticky-section {
-        height: 50vh !important;
-    }
-}
-
-@media only screen and (min-width: 440px) and (max-width: 1080px) {
-    .sticky-section-content .sticky-section-exten{
-        height: 10vh !important;
-    }
-
-    .sticky-section {
-        height: 65vh !important;
-    }
-}
-
-@media only screen and (min-width: 1080px)  and (max-width: 2500px)  {
-    .sticky-section-content .sticky-section-exten{
-        height: 12vh !important;
-    }
-
-    .sticky-section {
-        height: 65vh !important;
-    }
-}
-
-.sticky-content-section {
-    height: 60vh;
-    padding-left: 3rem;
-}
-
-.section--full {
-    flex-flow: column;
-}
-
 .section--settings {
     flex: 0 1 auto;
     display: flex;
@@ -179,14 +109,6 @@ section {
     flex-flow: column wrap;
 }
 
-.extensionContainer {
-    margin: auto;
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    height: 50rem;
-}
-
 .section__header {
     display: flex;
     align-items: baseline;
@@ -200,19 +122,6 @@ section {
     h2 {
         margin-bottom: 0;
     }
-
-    .link__configure,
-    .link__learn-more {
-        visibility: hidden;
-    }
-
-    &:hover {
-
-        .link__configure,
-        .link__learn-more {
-            visibility: visible;
-        }
-    }
 }
 
 .section__header-hint {
@@ -236,11 +145,6 @@ section {
     width: 600px;
 }
 
-.sticky-section-hint {
-    width: 53.125rem;
-    word-spacing: 2px !important;
-}
-
 .section__footer {
     margin: 2rem;
     width: fit-content;
@@ -254,77 +158,12 @@ section {
     }
 }
 
-.scroll__content {
-    height: 27rem;
-    overflow-y: auto;
-}
-
-.scroll__content::-webkit-scrollbar {
-    width: 0;
-}
-
-.imageContent {
-    padding: 1em;
-}
-
-.conent--section--settings {
-    flex: 0 1 auto;
-    display: flex;
-    flex-wrap: wrap;
-    border-radius: 6px;
-    margin: 1em;
-    padding: 1em;
-
-    .vscode-dark & {
-        background: var(--color-background--lighten-075);
-    }
-
-    .vscode-light & {
-        background: var(--color-background--darken-05);
-    }
-}
-
-.section__brand__preview,
-.section__preview {
+.section__brand__preview {
     flex: 0 1 auto;
     position: relative;
     margin-left: 0rem;
 }
 
-.sticky-section {
-    display: flex;
-    flex-direction: row;
-    margin-left: 10rem;
-    top: 0%;
-    background: inherit;
-}
-
-.sticky-section-content {
-    display: flex;
-    flex-direction: column;
-    height: auto;
-}
-
-.sticky-section label {
-    margin: 0px;
-    position: sticky;
-    top: 50%;
-    transform: translate(0, -50%);
-    text-align: center;
-}
-
-
-.section__title {
-    flex: 1 0 auto;
-    margin: 0;
-}
-
-.section__title--primary {
-    font-size: 3rem;
-    margin: 1em;
-    justify-content: center;
-}
-
 .section__whatsnew {
     display: flex;
     flex-direction: column;

src/webview/welcome/app/welcomePage.tsx

@@ -2,25 +2,25 @@
  *  Copyright (c) Red Hat, Inc. All rights reserved.
  *  Licensed under the MIT License. See LICENSE file in the project root for license information.
  *-----------------------------------------------------------------------------------------------*/
-import React from 'react';
-import { VSCodeMessage } from './vsCodeMessage';
-import { Checkbox, FormControlLabel, Icon, Stack, SvgIcon, Typography } from '@mui/material';
-import HelpIcon from '@mui/icons-material/Help';
-import ChatIcon from '@mui/icons-material/Chat';
 import BugReportIcon from '@mui/icons-material/BugReport';
+import ChatIcon from '@mui/icons-material/Chat';
 import GitHubIcon from '@mui/icons-material/GitHub';
-import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';
+import HelpIcon from '@mui/icons-material/Help';
 import LaptopMacIcon from '@mui/icons-material/LaptopMac';
+import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';
+import { Box, Checkbox, FormControlLabel, Icon, Stack, SvgIcon, Typography } from '@mui/material';
+import React from 'react';
 import ScrollToTop from 'react-scroll-to-top';
-import './welcome.scss';
 import OpenShiftExtensionIcon from '../../../../images/openshift_extension.png';
-import OdoLogo from '../../../../images/welcome/odo.png';
-import MicrosoftLogo from '../../../../images/welcome/microsoft.svg';
 import OpenShiftLogo from '../../../../images/title/logo.svg';
-import DevfileBranding from '../../../../images/welcome/devfile.png';
-import ComponentBranding from '../../../../images/welcome/component.png';
-import CloudBranding from '../../../../images/welcome/cloud.svg';
 import OpenShiftBranding from '../../../../images/welcome/OpenShift-Branding-box.png';
+import CloudBranding from '../../../../images/welcome/cloud.svg';
+import ComponentBranding from '../../../../images/welcome/component.png';
+import DevfileBranding from '../../../../images/welcome/devfile.png';
+import MicrosoftLogo from '../../../../images/welcome/microsoft.svg';
+import OdoLogo from '../../../../images/welcome/odo.png';
+import { VSCodeMessage } from './vsCodeMessage';
+import './welcome.scss';
 
 export interface DefaultProps {
     analytics?: import('@segment/analytics-next').Analytics;
@@ -366,38 +366,36 @@ export class Welcome extends React.Component<DefaultProps, {
                             <img className='content__image__preview' src={DevfileBranding} />
                         </div>
                     </section>
-                    <section className='section--settings' style={{ gap: '3rem' }}>
-                        <div className='sticky-section'>
-                            <div className='setting__input setting__input--big' style={{ borderBottom: '0px' }}>
-                                <label style={{ display: 'flex', flexDirection: 'row' }}>
-                                    <Typography variant='h2' className='highlight'>OpenShift extension</Typography>
-                                </label>
+                    <Stack direction='row' width='100%' alignItems='stretch' justifyContent='center' gap='1em 2em' margin='1em' padding='1em' flexWrap='wrap'>
+                        <Stack alignSelf='stretch' flexShrink='1' marginY={1}>
+                            <Box position='sticky' top='calc(50vh - 37.5px)'>
+                                <Typography variant='h2' className='highlight' textAlign='right'>OpenShift extension</Typography>
+                            </Box>
+                        </Stack>
+                        <Stack direction='column' width='max(50%, 500px)' gap='1em'>
+                            <div>
+                                <p>Allows developers to easily <b>create, deploy and live debug</b> container applications running on OpenShift &#38; Kubernetes. Thus enhancing the development inner loop workflow through One-click actions right from IDE.</p>
                             </div>
-                        </div>
-                        <section className='sticky-section-content'>
-                            <div className='sticky-section-exten'>
-                                <p className='section__header-hint sticky-section-hint'>Allows developers to easily <b>create, deploy and live debug</b> container applications running on OpenShift &#38; Kubernetes. Thus enhancing the development inner loop workflow through One-click actions right from IDE.</p>
-                            </div>
-                            <div className='sticky-section-exten'>
-                                <p className='section__header-hint sticky-section-hint'>Allows developers to <b>Push code fast and often.</b> Spend less time maintaining your deployment infrastructure and more time coding. Immediately have your application running each time you compile.</p>
+                            <div>
+                                <p>Allows developers to <b>Push code fast and often.</b> Spend less time maintaining your deployment infrastructure and more time coding. Immediately have your application running each time you compile.</p>
                             </div>
-                            <div className='sticky-section-exten'>
-                                <p className='section__header-hint sticky-section-hint'><b>Import your code from git</b> and deploy on OpenShift using recommended devfile.</p>
+                            <div>
+                                <p><b>Import your code from git</b> and deploy on OpenShift using recommended devfile.</p>
                             </div>
-                            <div className='sticky-section-exten'>
-                                <p className='section__header-hint sticky-section-hint'>Allows to browse the catalog and discover <b>Helm Charts</b> and install them on the connected cluster.</p>
+                            <div>
+                                <p>Allows to browse the catalog and discover <b>Helm Charts</b> and install them on the connected cluster.</p>
                             </div>
-                            <div className='sticky-section-exten'>
-                                <p className='section__header-hint sticky-section-hint'>Allows to connect &#38; <b>provision free OpenShift cluster</b> from IDE, using a guided workflow. This workflow allows you to either Run OpenShift locally or provision a free 30 days Developer Sandbox.</p>
+                            <div>
+                                <p>Allows to connect &#38; <b>provision free OpenShift cluster</b> from IDE, using a guided workflow. This workflow allows you to either Run OpenShift locally or provision a free 30 days Developer Sandbox.</p>
                             </div>
-                            <div className='sticky-section-exten'>
-                                <p className='section__header-hint sticky-section-hint'>Allows Monitoring through <b>view and stream logs</b> from your deployments, pods and containers for Kubernetes resources, with One Click from IDE.
+                            <div>
+                                <p>Allows Monitoring through <b>view and stream logs</b> from your deployments, pods and containers for Kubernetes resources, with One Click from IDE.
                                 </p>
                             </div>
-                        </section>
-                    </section>
-                    {this.footer}
+                        </Stack>
+                    </Stack>
                 </div>
+                {this.footer}
             </div>
             <div className='header__logo'>
                 <FormControlLabel control={<Checkbox checked={isChecked} onChange={this.updateShowWelcomePageConfig} sx={{ color: 'var(--vscode-foreground)', '&.Mui-checked': { color: 'var(--vscode-foreground)' } }} />}