From 195bedd41567c3e98fcba6052cadedfcc0a8a1cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 12 Jul 2024 13:03:47 +0100
Subject: [PATCH 1/3] fix(web): make core/EmptyState children flow in the right
 direction

They are in a flex container that was laying out them horizontally
instead of vertically. The issue was quite notable in the login screen.
---
 web/src/components/core/EmptyState.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/components/core/EmptyState.jsx b/web/src/components/core/EmptyState.jsx
index 487a9279c4..90a3191ebd 100644
--- a/web/src/components/core/EmptyState.jsx
+++ b/web/src/components/core/EmptyState.jsx
@@ -68,7 +68,11 @@ export default function EmptyStateWrapper({
         icon={<Icon name={icon} size="xxl" color={color} />}
       />
       <EmptyStateBody>
-        <Flex rowGap={{ default: "rowGapMd" }} justifyContent={{ default: "justifyContentCenter" }}>
+        <Flex
+          direction={{ default: "column" }}
+          rowGap={{ default: "rowGapMd" }}
+          justifyContent={{ default: "justifyContentCenter" }}
+        >
           {children}
         </Flex>
       </EmptyStateBody>

From 9f724363fc0e91e1eed647e20c3b21bd7a7defd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 12 Jul 2024 13:12:47 +0100
Subject: [PATCH 2/3] fix(web): change wrapper for core/EmptyState children

Using PF/Stack instead of a PF/Flex configured to (almost) the same than
the former.
---
 web/src/components/core/EmptyState.jsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/web/src/components/core/EmptyState.jsx b/web/src/components/core/EmptyState.jsx
index 90a3191ebd..e147766895 100644
--- a/web/src/components/core/EmptyState.jsx
+++ b/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,13 +68,7 @@ export default function EmptyStateWrapper({
         icon={<Icon name={icon} size="xxl" color={color} />}
       />
       <EmptyStateBody>
-        <Flex
-          direction={{ default: "column" }}
-          rowGap={{ default: "rowGapMd" }}
-          justifyContent={{ default: "justifyContentCenter" }}
-        >
-          {children}
-        </Flex>
+        <Stack hasGutter>{children}</Stack>
       </EmptyStateBody>
     </EmptyState>
   );

From 9449a959efaba7109290bd602f272e0d9e055ab0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= <dgonzalez@suse.de>
Date: Fri, 12 Jul 2024 13:21:32 +0100
Subject: [PATCH 3/3] fix(web): remove not needed Stack in LoginPage

---
 web/src/components/core/LoginPage.jsx | 36 +++++++++++++--------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/web/src/components/core/LoginPage.jsx b/web/src/components/core/LoginPage.jsx
index 76acd31cb8..1ff500b7c1 100644
--- a/web/src/components/core/LoginPage.jsx
+++ b/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" }}>