getting-started: fix styling for small viewports (#12825)

This commit adds a `className` and styling to the main div containing the
getting-started content and the preferences which fixes the overlapping
checkbox for small viewports.

Signed-off-by: Vlad Arama <vlad.arama@ericsson.com>

packages/getting-started/src/browser/getting-started-widget.tsx

@@ -129,8 +129,8 @@ export class GettingStartedWidget extends ReactWidget {
      * Render the content of the widget.
      */
     protected render(): React.ReactNode {
-        return <div>
-            <div className='gs-container'>
+        return <div className='gs-container'>
+            <div className='gs-content-container'>
                 {this.renderHeader()}
                 <hr className='gs-hr' />
                 <div className='flex-grid'>

packages/getting-started/src/browser/style/index.css

@@ -39,10 +39,17 @@ body {
 }
 
 .gs-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.gs-content-container {
   padding: 20px;
 }
 
-.gs-container a {
+.gs-content-container a {
   cursor: pointer;
 }
 
@@ -92,14 +99,10 @@ body {
 
 .gs-preference-container {
   display: flex;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
   justify-content: center;
 }
 
 .gs-preference {
-  margin-top: 20px;
   margin-bottom: 20px;
   display: flex;
   align-items: center;