fix(): miscl fixes and ui updates

src/components/Extension/CollectDataExtension/actions/RemoteSingleSelectAction/RemoteSingleSelectAction.tsx

@@ -1,11 +1,16 @@
 import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'
 import { mapActionFieldsToObject } from '../../../utils'
+import activityClasses from '../../../../../../styles/ActivityLayout.module.css'
 import classes from './remoteSingleSelectAction.module.css'
-
 import type { RemoteSingleSelectActionFields } from '../../types'
 import type { ExtensionActivityRecord } from '../../../types'
 import { useRemoteSingleSelectAction } from './hooks/useRemoteSingleSelectAction'
-import { Button, Option, Select } from '@awell-health/ui-library'
+import {
+  Button,
+  HostedPageFooter,
+  Option,
+  Select,
+} from '@awell-health/ui-library'
 import { useTranslation } from 'next-i18next'
 import { isNil, debounce } from 'lodash'
 import { OptionSchema, type SelectOption } from './types'
@@ -158,48 +163,69 @@ export const RemoteSingleSelectAction: FC<RemoteSingleSelectActionProps> = ({
     [options]
   )
 
+  const uiSelectOptions = useMemo(() => {
+    return options.map((o) => ({
+      id: o.id,
+      label: o.label,
+      value: o.value,
+      value_string: o.value_string,
+    }))
+  }, [options])
+
   useEffect(() => {
     fetchOptionsDebounced()
   }, [searchText])
 
   return (
-    <div className={classes.container}>
-      <div className={classes.selectContainer}>
-        <Select
-          id="select"
-          labels={{
-            questionLabel: label,
-            noOptions: t('activities.form.questions.select.no_options'),
-            placeholder: t('activities.form.questions.select.type_to_search'),
-            loading: t('activities.form.questions.select.loading'),
-          }}
-          loading={loading}
-          // @ts-expect-error value should be a number but is a string
-          options={options.map((o) => ({
-            id: o.id,
-            label: o.label,
-            value: o.value,
-            value_string: o.value_string,
-          }))}
-          onSearch={(value: string) => {
-            setSearchText(value)
-          }}
-          type="single"
-          value={selectedOption?.value ?? ''}
-          onChange={handleOptionChange}
-          mandatory={mandatory === 'true'}
-          filtering
-        />
-        {!isNil(error) && (
-          <div className={classes.error}>{String(error) as string}</div>
-        )}
-      </div>
-      <div className={classes.buttonContainer}>
-        <Button onClick={handleSubmit} disabled={isSubmitting}>
-          {t('activities.form.cta_submit')}
-        </Button>
-      </div>
-    </div>
+    <>
+      <main
+        id="ahp_main_content_with_scroll_hint"
+        className={activityClasses.main_content}
+      >
+        <div className={classes.container}>
+          <div>
+            <Select
+              id="select"
+              labels={{
+                questionLabel: label,
+                noOptions: t('activities.form.questions.select.no_options'),
+                placeholder: t(
+                  'activities.form.questions.select.type_to_search'
+                ),
+                loading: t('activities.form.questions.select.loading'),
+              }}
+              loading={loading}
+              // @ts-expect-error value should be a number but is a string
+              options={uiSelectOptions}
+              onSearch={(value: string) => {
+                setSearchText(value)
+              }}
+              type="single"
+              value={selectedOption?.value ?? ''}
+              onChange={handleOptionChange}
+              mandatory={mandatory === 'true'}
+              filtering
+            />
+            {!isNil(error) && (
+              <div className={classes.error}>{String(error) as string}</div>
+            )}
+          </div>
+        </div>
+      </main>
+      <HostedPageFooter showScrollHint={false}>
+        <div
+          className={`${activityClasses.button_wrapper} ${classes.container}`}
+        >
+          <Button
+            variant="primary"
+            onClick={handleSubmit}
+            disabled={isSubmitting}
+          >
+            {t('activities.form.cta_submit')}
+          </Button>
+        </div>
+      </HostedPageFooter>
+    </>
   )
 }
 

src/components/Extension/CollectDataExtension/actions/RemoteSingleSelectAction/remoteSingleSelectAction.module.css

@@ -1,34 +1,11 @@
 .container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  height: 100vh;
-  width: 70%;
+  width: 65ch;
   margin: 0 auto;
-  @media (max-width: 768px) {
-    padding: 0 20px;
-    width: 100%;
-  }
-}
-
-.selectContainer {
-  margin-top: 40px;
-  width: 100%;
-}
-
-.buttonContainer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  align-self: flex-end;
-  justify-content: center;
-  margin-bottom: 20px;
-  background-color: #f5f5f5;
+  padding: 0 var(--awell-spacing-4);
 }
 
 .error {
   color: red;
   font-size: 12px;
   margin-top: 10px;
-}
+}