diabled selected wg and fixed a style issue

src/main/www/src/App.css

@@ -170,7 +170,8 @@ html {
   margin: 0 14px;
 }
 .eclipsefdn-membership-webform .msg-popup {
-  position: absolute;
+  z-index: 1000;
+  position: fixed;
   top: -70px;
   left: calc(50vw - 200px);
   width: 400px;

src/main/www/src/components/Application/WorkingGroups/WorkingGroup.js

@@ -92,6 +92,14 @@ const WorkingGroup = ({ formik, fullWorkingGroupList, isLoading }) => {
                   getOptionSelected={(option, value) =>
                     option.value === value.value
                   }
+                  getOptionDisabled={(option) => {
+                    // disable all selected WGs
+                    const selectedWG = !!formik.values.workingGroups.find(
+                      (selectedWG) =>
+                        selectedWG.workingGroup.label === option.label
+                    );
+                    return selectedWG;
+                  }}
                   fullWidth={true}
                   onChange={(ev, value) => {
                     // this to clear the participation level when user selects another working group

src/main/www/src/less/App.less

@@ -256,7 +256,8 @@ html {
 
   .msg-popup {
     & {
-      position: absolute;
+      z-index: 1000;
+      position: fixed;
       top: -70px;
       left: calc(50vw - 200px);
       width: 400px;