Events css fixes (#1074)

* admin events: decreased form width and spaces between fields

* events: css fixes

Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>

src/events/AdminEvents.tsx

@@ -3,8 +3,6 @@ import {
   Button,
   Dropdown,
   DropdownToggle,
-  Flex,
-  FlexItem,
   Form,
   FormGroup,
   Modal,
@@ -13,6 +11,7 @@ import {
   SelectVariant,
   TextInput,
   Tooltip,
+  ToolbarItem,
 } from "@patternfly/react-core";
 import {
   cellWidth,
@@ -160,12 +159,11 @@ export const AdminEvents = () => {
   const adminEventSearchFormDisplay = () => {
     return (
       <>
-        <Flex direction={{ default: "column" }}>
+        <ToolbarItem>
-          <FlexItem>
           <Dropdown
             id="admin-events-search-select"
             data-testid="AdminEventsSearchSelector"
-              className="pf-u-mt-md pf-u-ml-md pf-u-mb-md"
+            className="pf-u-ml-md"
             toggle={
               <DropdownToggle
                 data-testid="adminEventsSearchSelectorToggle"
@@ -179,13 +177,13 @@ export const AdminEvents = () => {
           >
             <Form
               isHorizontal
-                className="keycloak__events_search__form"
+              className="keycloak__admin_events_search__form"
               data-testid="searchForm"
             >
               <FormGroup
                 label={t("resourceType")}
                 fieldId="kc-resourceType"
-                  className="keycloak__events_search__form_label"
+                className="keycloak__events_search__form_multiline_label"
               >
                 <Select
                   variant={SelectVariant.single}
@@ -196,7 +194,7 @@ export const AdminEvents = () => {
               <FormGroup
                 label={t("operationType")}
                 fieldId="kc-operationType"
-                  className="keycloak__events_search__form_label"
+                className="keycloak__events_search__form_multiline_label"
               >
                 <Select
                   variant={SelectVariant.single}
@@ -290,8 +288,7 @@ export const AdminEvents = () => {
           >
             {t("refresh")}
           </Button>
-          </FlexItem>
+        </ToolbarItem>
-        </Flex>
       </>
     );
   };

src/events/EventsSection.tsx

@@ -9,8 +9,6 @@ import {
   DescriptionListTerm,
   Dropdown,
   DropdownToggle,
-  Flex,
-  FlexItem,
   Form,
   FormGroup,
   PageSection,
@@ -21,6 +19,7 @@ import {
   TabTitleText,
   TextInput,
   Tooltip,
+  ToolbarItem,
 } from "@patternfly/react-core";
 import { CheckCircleIcon, WarningTriangleIcon } from "@patternfly/react-icons";
 import { cellWidth, expandable } from "@patternfly/react-table";
@@ -185,12 +184,11 @@ export const EventsSection = () => {
   const userEventSearchFormDisplay = () => {
     return (
       <>
-        <Flex direction={{ default: "column" }}>
+        <ToolbarItem>
-          <FlexItem>
           <Dropdown
             id="user-events-search-select"
             data-testid="UserEventsSearchSelector"
-              className="pf-u-mt-md pf-u-ml-md"
+            className="pf-u-ml-md"
             toggle={
               <DropdownToggle
                 data-testid="userEventsSearchSelectorToggle"
@@ -204,7 +202,7 @@ export const EventsSection = () => {
           >
             <Form
               isHorizontal
-                className="keycloak__events_search__form"
+              className="keycloak__user_events_search__form"
               data-testid="searchForm"
             >
               <FormGroup
@@ -348,8 +346,8 @@ export const EventsSection = () => {
           >
             {t("refresh")}
           </Button>
-          </FlexItem>
+        </ToolbarItem>
-          <FlexItem>
+        <ToolbarItem>
           {Object.entries(activeFilters).length > 0 && (
             <div className="keycloak__searchChips pf-u-ml-md">
               {Object.entries(activeFilters).map((filter) => {
@@ -383,8 +381,7 @@ export const EventsSection = () => {
               })}
             </div>
           )}
-          </FlexItem>
+        </ToolbarItem>
-        </Flex>
       </>
     );
   };
@@ -411,7 +408,6 @@ export const EventsSection = () => {
             eventKey="userEvents"
             title={<TabTitleText>{t("userEvents")}</TabTitleText>}
           >
-            <div className="keycloak__events_table">
             <KeycloakDataTable
               key={key}
               loader={loader}
@@ -461,7 +457,6 @@ export const EventsSection = () => {
                 </div>
               }
             />
-            </div>
           </Tab>
           <Tab
             eventKey="adminEvents"

src/events/events.css

@@ -8,10 +8,18 @@
   z-index: 1;
 }
 
-.keycloak__events_search__form {
+.keycloak__user_events_search__form {
+  --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 24rem;
+}
+
+.keycloak__admin_events_search__form {
+  --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 12rem;
+}
+
+.keycloak__user_events_search__form,
+.keycloak__admin_events_search__form {
   margin: 0 var(--pf-global--spacer--lg) var(--pf-global--spacer--lg) var(--pf-global--spacer--lg);
   --pf-c-form__group--m-action--MarginTop: 0rem;
-  --pf-c-form--m-horizontal__group-control--md--GridColumnWidth: 24rem;
   --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 5rem;
 }
 
@@ -19,13 +27,11 @@
   --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 5rem;
 }
 
+.keycloak__events_search__form_multiline_label {
+  height: 2.2rem;
+}
+
 .keycloak__events_search__event_type_select .pf-c-select__menu {
   max-height: 200px;
   overflow: auto;
 }
-
-.pf-c-toolbar {
-  background-color: transparent;
-  --pf-c-toolbar--PaddingTop: 0;
-  --pf-c-toolbar--PaddingBottom: 0;
-}