From 800afb104648416adfa7219a668a90442f91c76d Mon Sep 17 00:00:00 2001
From: Vlad Arama <vlad.arama@ericsson.com>
Date: Fri, 11 Aug 2023 08:25:49 -0400
Subject: [PATCH] fix checkbox overlapping with other content

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>
---
 .../src/browser/getting-started-widget.tsx          |  4 ++--
 .../getting-started/src/browser/style/index.css     | 13 ++++++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/getting-started/src/browser/getting-started-widget.tsx b/packages/getting-started/src/browser/getting-started-widget.tsx
index c833471122e8e..4da274562f0e8 100644
--- a/packages/getting-started/src/browser/getting-started-widget.tsx
+++ b/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'>
diff --git a/packages/getting-started/src/browser/style/index.css b/packages/getting-started/src/browser/style/index.css
index ba828730c4c0a..17216da4df9da 100644
--- a/packages/getting-started/src/browser/style/index.css
+++ b/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;