fix(web): change element wrapping core/EmptyState children (#1462)

## Problem

The elements in the login page are rendered wrongly since
#1441. That's because the `Flex`
component used for wrapping the `core/EmptyState` children. It is
missing the "direction" prop for telling it to layout children
vertically instead of horizontally. Moreover, it looks like a `Stack`
element is a better choice for this case.

## Solution

Adapt `core/EmptyState` for using an `<Stack hasGutter>` instead of a
`<Flex>` configured to behave almost the same.

## Testing

- Tested manually

web/src/components/core/EmptyState.jsx

@@ -22,7 +22,7 @@
 // @ts-check
 
 import React from "react";
-import { EmptyState, EmptyStateHeader, EmptyStateBody, Flex } from "@patternfly/react-core";
+import { EmptyState, EmptyStateHeader, EmptyStateBody, Stack } from "@patternfly/react-core";
 import { Icon } from "~/components/layout";
 
 /**
@@ -68,9 +68,7 @@ export default function EmptyStateWrapper({
         icon={<Icon name={icon} size="xxl" color={color} />}
       />
       <EmptyStateBody>
-        <Flex rowGap={{ default: "rowGapMd" }} justifyContent={{ default: "justifyContentCenter" }}>
-          {children}
-        </Flex>
+        <Stack hasGutter>{children}</Stack>
       </EmptyStateBody>
     </EmptyState>
   );

web/src/components/core/LoginPage.jsx

@@ -92,27 +92,25 @@ user privileges.",
                   {rootExplanationStart} <b>{rootUser}</b> {rootExplanationEnd}
                 </p>
                 <p>{_("Please, provide its password to log in to the system.")}</p>
-                <Stack hasGutter>
-                  <Form id="login" onSubmit={login} aria-label={_("Login form")}>
-                    <FormGroup fieldId="password">
-                      <PasswordInput
-                        id="password"
-                        name="password"
-                        value={password}
-                        aria-label={_("Password input")}
-                        onChange={(_, v) => setPassword(v)}
-                      />
-                    </FormGroup>
+                <Form id="login" onSubmit={login} aria-label={_("Login form")}>
+                  <FormGroup fieldId="password">
+                    <PasswordInput
+                      id="password"
+                      name="password"
+                      value={password}
+                      aria-label={_("Password input")}
+                      onChange={(_, v) => setPassword(v)}
+                    />
+                  </FormGroup>
 
-                    {error && <FormValidationError message={errorMessage(loginError)} />}
+                  {error && <FormValidationError message={errorMessage(loginError)} />}
 
-                    <ActionGroup>
-                      <Button type="submit" variant="primary">
-                        {_("Log in")}
-                      </Button>
-                    </ActionGroup>
-                  </Form>
-                </Stack>
+                  <ActionGroup>
+                    <Button type="submit" variant="primary">
+                      {_("Log in")}
+                    </Button>
+                  </ActionGroup>
+                </Form>
               </EmptyState>
               <Flex>
                 <FlexItem align={{ default: "alignRight" }}>