[Cases] Fix bug with emotion styles (#148065)

## Summary

In the new edit tags & edit assignees flyouts, I use `emotion` to add
CSS that makes the flyout body 100% in height. PR
#146212 introduces some changes
where `emotion` runs in development mode. Before this PR it wasn't. This
had as a result to break the styles in Cases. Our e2e tests did not
catch it because all tests in CI run in production mode.

### For maintainers

- [x] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

x-pack/plugins/cases/public/components/actions/assignees/edit_assignees_flyout.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useCallback, useState } from 'react';
-import { css } from '@emotion/react';
+import styled from 'styled-components';
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -32,7 +32,7 @@ interface Props {
   onSaveAssignees: (args: ItemsSelectionState) => void;
 }
 
-const fullHeight = css`
+const FlyoutBody = styled(EuiFlyoutBody)`
   ${euiFullHeight()}
 
   .euiFlyoutBody__overflowContent {
@@ -75,12 +75,12 @@ const EditAssigneesFlyoutComponent: React.FC<Props> = ({
           <p>{headerSubtitle}</p>
         </EuiText>
       </EuiFlyoutHeader>
-      <EuiFlyoutBody css={fullHeight}>
+      <FlyoutBody>
         <EditAssigneesSelectable
           selectedCases={selectedCases}
           onChangeAssignees={setAssigneesSelection}
         />
-      </EuiFlyoutBody>
+      </FlyoutBody>
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>

x-pack/plugins/cases/public/components/actions/tags/edit_tags_flyout.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useCallback, useState } from 'react';
-import { css } from '@emotion/react';
+import styled from 'styled-components';
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -34,7 +34,7 @@ interface Props {
   onSaveTags: (args: ItemsSelectionState) => void;
 }
 
-const fullHeight = css`
+const FlyoutBody = styled(EuiFlyoutBody)`
   ${euiFullHeight()}
 
   .euiFlyoutBody__overflowContent {
@@ -72,7 +72,7 @@ const EditTagsFlyoutComponent: React.FC<Props> = ({ selectedCases, onClose, onSa
           <p>{headerSubtitle}</p>
         </EuiText>
       </EuiFlyoutHeader>
-      <EuiFlyoutBody css={fullHeight}>
+      <FlyoutBody>
         {isLoading ? (
           <EuiLoadingSpinner />
         ) : (
@@ -83,7 +83,7 @@ const EditTagsFlyoutComponent: React.FC<Props> = ({ selectedCases, onClose, onSa
             onChangeTags={setTagsSelection}
           />
         )}
-      </EuiFlyoutBody>
+      </FlyoutBody>
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>