Merge pull request #212 from openshift/fix-pf6-tooltip

COO-1685: fix: fix search tooltip and time pickers clipping

Author: openshift-merge-bot[bot]

web/src/components/AdvancedSearchForm.tsx

@@ -263,25 +263,27 @@ export const AdvancedSearchForm: React.FC<AdvancedSearchFormProps> = ({
       </FormGroup>
 
       <ActionGroup>
-        <Tooltip
-          content={
-            !isValid
-              ? t('Fix validation errors before searching')
-              : hasChanged
-              ? t('Update the correlation graph')
-              : t('Correlation graph already matches search')
-          }
-        >
-          <Button
-            type="submit"
-            variant="primary"
-            isAriaDisabled={!hasChanged || !isValid}
-            size="sm"
+        <div>
+          <Tooltip
+            content={
+              !isValid
+                ? t('Fix validation errors before searching')
+                : hasChanged
+                ? t('Update the correlation graph')
+                : t('Correlation graph already matches search')
+            }
           >
-            {t('Search')}
-          </Button>
-        </Tooltip>
-        <Button variant="secondary" onClick={onCancel}>
+            <Button
+              type="submit"
+              variant="primary"
+              isAriaDisabled={!hasChanged || !isValid}
+              size="sm"
+            >
+              {t('Search')}
+            </Button>
+          </Tooltip>
+        </div>
+        <Button variant="secondary" size="sm" onClick={onCancel}>
           {t('Cancel')}
         </Button>
       </ActionGroup>

web/src/components/DateTimePicker.tsx

@@ -21,6 +21,7 @@ export const DateTimePicker: React.FC<{
         <DatePicker
           value={isValidDate(date) ? yyyyMMddFormat(date) : ''}
           onChange={(_event, _inputDate, newDate) => onChange(copyTime(newDate, date))}
+          appendTo={() => document.body}
         />
       </InputGroupItem>
       <InputGroupItem>
@@ -30,6 +31,7 @@ export const DateTimePicker: React.FC<{
             if (isValid) onChange(setTime(date, hour, minute, second));
           }}
           is24Hour={true}
+          menuAppendTo={() => document.body}
           width="80px"
         />
       </InputGroupItem>