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,138 +159,136 @@ export const AdminEvents = () => {
   const adminEventSearchFormDisplay = () => {
     return (
       <>
-        <Flex direction={{ default: "column" }}>
+        <ToolbarItem>
-          <FlexItem>
+          <Dropdown
-            <Dropdown
+            id="admin-events-search-select"
-              id="admin-events-search-select"
+            data-testid="AdminEventsSearchSelector"
-              data-testid="AdminEventsSearchSelector"
+            className="pf-u-ml-md"
-              className="pf-u-mt-md pf-u-ml-md pf-u-mb-md"
+            toggle={
-              toggle={
+              <DropdownToggle
-                <DropdownToggle
+                data-testid="adminEventsSearchSelectorToggle"
-                  data-testid="adminEventsSearchSelectorToggle"
+                onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
-                  onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
+                className="keycloak__events_search_selector_dropdown__toggle"
-                  className="keycloak__events_search_selector_dropdown__toggle"
-                >
-                  {t("searchForAdminEvent")}
-                </DropdownToggle>
-              }
-              isOpen={searchDropdownOpen}
-            >
-              <Form
-                isHorizontal
-                className="keycloak__events_search__form"
-                data-testid="searchForm"
               >
-                <FormGroup
+                {t("searchForAdminEvent")}
-                  label={t("resourceType")}
+              </DropdownToggle>
-                  fieldId="kc-resourceType"
+            }
-                  className="keycloak__events_search__form_label"
+            isOpen={searchDropdownOpen}
-                >
+          >
-                  <Select
+            <Form
-                    variant={SelectVariant.single}
+              isHorizontal
-                    onToggle={(isOpen) => setSelectOpen(isOpen)}
+              className="keycloak__admin_events_search__form"
-                    isOpen={selectOpen}
+              data-testid="searchForm"
-                  ></Select>
-                </FormGroup>
-                <FormGroup
-                  label={t("operationType")}
-                  fieldId="kc-operationType"
-                  className="keycloak__events_search__form_label"
-                >
-                  <Select
-                    variant={SelectVariant.single}
-                    onToggle={(isOpen) => setSelectOpen(isOpen)}
-                    isOpen={selectOpen}
-                  ></Select>
-                </FormGroup>
-                <FormGroup
-                  label={t("user")}
-                  fieldId="kc-user"
-                  className="keycloak__events_search__form_label"
-                >
-                  <TextInput
-                    ref={register()}
-                    type="text"
-                    id="kc-user"
-                    name="user"
-                    data-testid="user-searchField"
-                  />
-                </FormGroup>
-                <FormGroup
-                  label={t("realm")}
-                  fieldId="kc-realm"
-                  className="keycloak__events_search__form_label"
-                >
-                  <Select
-                    variant={SelectVariant.single}
-                    onToggle={(isOpen) => setSelectOpen(isOpen)}
-                    isOpen={selectOpen}
-                  ></Select>
-                </FormGroup>
-                <FormGroup
-                  label={t("ipAddress")}
-                  fieldId="kc-ipAddress"
-                  className="keycloak__events_search__form_label"
-                >
-                  <TextInput
-                    ref={register()}
-                    type="text"
-                    id="kc-ipAddress"
-                    name="ipAddress"
-                    data-testid="ipAddress-searchField"
-                  />
-                </FormGroup>
-                <FormGroup
-                  label={t("dateFrom")}
-                  fieldId="kc-dateFrom"
-                  className="keycloak__events_search__form_label"
-                >
-                  <TextInput
-                    ref={register()}
-                    type="text"
-                    id="kc-dateFrom"
-                    name="dateFrom"
-                    className="pf-c-form-control pf-m-icon pf-m-calendar"
-                    placeholder="yyyy-MM-dd"
-                    data-testid="dateFrom-searchField"
-                  />
-                </FormGroup>
-                <FormGroup
-                  label={t("dateTo")}
-                  fieldId="kc-dateTo"
-                  className="keycloak__events_search__form_label"
-                >
-                  <TextInput
-                    ref={register()}
-                    type="text"
-                    id="kc-dateTo"
-                    name="dateTo"
-                    className="pf-c-form-control pf-m-icon pf-m-calendar"
-                    placeholder="yyyy-MM-dd"
-                    data-testid="dateTo-searchField"
-                  />
-                </FormGroup>
-                <ActionGroup>
-                  <Button
-                    className="keycloak__admin_events_search__form_btn"
-                    variant={"primary"}
-                    data-testid="search-events-btn"
-                    isDisabled={!isDirty}
-                  >
-                    {t("searchAdminEventsBtn")}
-                  </Button>
-                </ActionGroup>
-              </Form>
-            </Dropdown>
-            <Button
-              className="pf-u-ml-md"
-              onClick={refresh}
-              data-testid="refresh-btn"
             >
-              {t("refresh")}
+              <FormGroup
-            </Button>
+                label={t("resourceType")}
-          </FlexItem>
+                fieldId="kc-resourceType"
-        </Flex>
+                className="keycloak__events_search__form_multiline_label"
+              >
+                <Select
+                  variant={SelectVariant.single}
+                  onToggle={(isOpen) => setSelectOpen(isOpen)}
+                  isOpen={selectOpen}
+                ></Select>
+              </FormGroup>
+              <FormGroup
+                label={t("operationType")}
+                fieldId="kc-operationType"
+                className="keycloak__events_search__form_multiline_label"
+              >
+                <Select
+                  variant={SelectVariant.single}
+                  onToggle={(isOpen) => setSelectOpen(isOpen)}
+                  isOpen={selectOpen}
+                ></Select>
+              </FormGroup>
+              <FormGroup
+                label={t("user")}
+                fieldId="kc-user"
+                className="keycloak__events_search__form_label"
+              >
+                <TextInput
+                  ref={register()}
+                  type="text"
+                  id="kc-user"
+                  name="user"
+                  data-testid="user-searchField"
+                />
+              </FormGroup>
+              <FormGroup
+                label={t("realm")}
+                fieldId="kc-realm"
+                className="keycloak__events_search__form_label"
+              >
+                <Select
+                  variant={SelectVariant.single}
+                  onToggle={(isOpen) => setSelectOpen(isOpen)}
+                  isOpen={selectOpen}
+                ></Select>
+              </FormGroup>
+              <FormGroup
+                label={t("ipAddress")}
+                fieldId="kc-ipAddress"
+                className="keycloak__events_search__form_label"
+              >
+                <TextInput
+                  ref={register()}
+                  type="text"
+                  id="kc-ipAddress"
+                  name="ipAddress"
+                  data-testid="ipAddress-searchField"
+                />
+              </FormGroup>
+              <FormGroup
+                label={t("dateFrom")}
+                fieldId="kc-dateFrom"
+                className="keycloak__events_search__form_label"
+              >
+                <TextInput
+                  ref={register()}
+                  type="text"
+                  id="kc-dateFrom"
+                  name="dateFrom"
+                  className="pf-c-form-control pf-m-icon pf-m-calendar"
+                  placeholder="yyyy-MM-dd"
+                  data-testid="dateFrom-searchField"
+                />
+              </FormGroup>
+              <FormGroup
+                label={t("dateTo")}
+                fieldId="kc-dateTo"
+                className="keycloak__events_search__form_label"
+              >
+                <TextInput
+                  ref={register()}
+                  type="text"
+                  id="kc-dateTo"
+                  name="dateTo"
+                  className="pf-c-form-control pf-m-icon pf-m-calendar"
+                  placeholder="yyyy-MM-dd"
+                  data-testid="dateTo-searchField"
+                />
+              </FormGroup>
+              <ActionGroup>
+                <Button
+                  className="keycloak__admin_events_search__form_btn"
+                  variant={"primary"}
+                  data-testid="search-events-btn"
+                  isDisabled={!isDirty}
+                >
+                  {t("searchAdminEventsBtn")}
+                </Button>
+              </ActionGroup>
+            </Form>
+          </Dropdown>
+          <Button
+            className="pf-u-ml-md"
+            onClick={refresh}
+            data-testid="refresh-btn"
+          >
+            {t("refresh")}
+          </Button>
+        </ToolbarItem>
       </>
     );
   };

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,206 +184,204 @@ export const EventsSection = () => {
   const userEventSearchFormDisplay = () => {
     return (
       <>
-        <Flex direction={{ default: "column" }}>
+        <ToolbarItem>
-          <FlexItem>
+          <Dropdown
-            <Dropdown
+            id="user-events-search-select"
-              id="user-events-search-select"
+            data-testid="UserEventsSearchSelector"
-              data-testid="UserEventsSearchSelector"
+            className="pf-u-ml-md"
-              className="pf-u-mt-md pf-u-ml-md"
+            toggle={
-              toggle={
+              <DropdownToggle
-                <DropdownToggle
+                data-testid="userEventsSearchSelectorToggle"
-                  data-testid="userEventsSearchSelectorToggle"
+                onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
-                  onToggle={(isOpen) => setSearchDropdownOpen(isOpen)}
+                className="keycloak__events_search_selector_dropdown__toggle"
-                  className="keycloak__events_search_selector_dropdown__toggle"
-                >
-                  {t("searchForUserEvent")}
-                </DropdownToggle>
-              }
-              isOpen={searchDropdownOpen}
-            >
-              <Form
-                isHorizontal
-                className="keycloak__events_search__form"
-                data-testid="searchForm"
               >
-                <FormGroup
+                {t("searchForUserEvent")}
-                  label={t("userId")}
+              </DropdownToggle>
-                  fieldId="kc-userId"
+            }
-                  className="keycloak__events_search__form_label"
+            isOpen={searchDropdownOpen}
-                >
+          >
-                  <TextInput
+            <Form
-                    ref={register()}
+              isHorizontal
-                    type="text"
+              className="keycloak__user_events_search__form"
-                    id="kc-userId"
+              data-testid="searchForm"
-                    name="user"
-                    data-testid="userId-searchField"
-                  />
-                </FormGroup>
-                <FormGroup
-                  label={t("eventType")}
-                  fieldId="kc-eventType"
-                  className="keycloak__events_search__form_label"
-                >
-                  <Controller
-                    name="type"
-                    control={control}
-                    render={({
-                      onChange,
-                      value,
-                    }: {
-                      onChange: (newValue: EventType[]) => void;
-                      value: EventType[];
-                    }) => (
-                      <Select
-                        className="keycloak__events_search__event_type_select"
-                        name="eventType"
-                        data-testid="event-type-searchField"
-                        chipGroupProps={{
-                          numChips: 1,
-                          expandedText: "Hide",
-                          collapsedText: "Show ${remaining}",
-                        }}
-                        variant={SelectVariant.typeaheadMulti}
-                        typeAheadAriaLabel="Select"
-                        onToggle={(isOpen) => setSelectOpen(isOpen)}
-                        selections={value}
-                        onSelect={(_, selectedValue) => {
-                          const option = selectedValue.toString() as EventType;
-                          const changedValue = value.includes(option)
-                            ? value.filter((item) => item !== option)
-                            : [...value, option];
-
-                          onChange(changedValue);
-                        }}
-                        onClear={(event) => {
-                          event.stopPropagation();
-                          onChange([]);
-                        }}
-                        isOpen={selectOpen}
-                        aria-labelledby={"eventType"}
-                        chipGroupComponent={
-                          <ChipGroup>
-                            {value.map((chip) => (
-                              <Chip
-                                key={chip}
-                                onClick={(event) => {
-                                  event.stopPropagation();
-                                  onChange(value.filter((val) => val !== chip));
-                                }}
-                              >
-                                {chip}
-                              </Chip>
-                            ))}
-                          </ChipGroup>
-                        }
-                      >
-                        {events?.enabledEventTypes?.map((option) => (
-                          <SelectOption key={option} value={option} />
-                        ))}
-                      </Select>
-                    )}
-                  />
-                </FormGroup>
-                <FormGroup
-                  label={t("client")}
-                  fieldId="kc-client"
-                  className="keycloak__events_search__form_label"
-                >
-                  <TextInput
-                    ref={register()}
-                    type="text"
-                    id="kc-client"
-                    name="client"
-                    data-testid="client-searchField"
-                  />
-                </FormGroup>
-                <FormGroup
-                  label={t("dateFrom")}
-                  fieldId="kc-dateFrom"
-                  className="keycloak__events_search__form_label"
-                >
-                  <TextInput
-                    ref={register()}
-                    type="text"
-                    id="kc-dateFrom"
-                    name="dateFrom"
-                    className="pf-c-form-control pf-m-icon pf-m-calendar"
-                    placeholder="yyyy-MM-dd"
-                    data-testid="dateFrom-searchField"
-                  />
-                </FormGroup>
-                <FormGroup
-                  label={t("dateTo")}
-                  fieldId="kc-dateTo"
-                  className="keycloak__events_search__form_label"
-                >
-                  <TextInput
-                    ref={register()}
-                    type="text"
-                    id="kc-dateTo"
-                    name="dateTo"
-                    className="pf-c-form-control pf-m-icon pf-m-calendar"
-                    placeholder="yyyy-MM-dd"
-                    data-testid="dateTo-searchField"
-                  />
-                </FormGroup>
-                <ActionGroup>
-                  <Button
-                    className="keycloak__user_events_search__form_btn"
-                    variant={"primary"}
-                    onClick={submitSearch}
-                    data-testid="search-events-btn"
-                    isDisabled={!isDirty}
-                  >
-                    {t("searchUserEventsBtn")}
-                  </Button>
-                </ActionGroup>
-              </Form>
-            </Dropdown>
-            <Button
-              className="pf-u-ml-md"
-              onClick={refresh}
-              data-testid="refresh-btn"
             >
-              {t("refresh")}
+              <FormGroup
-            </Button>
+                label={t("userId")}
-          </FlexItem>
+                fieldId="kc-userId"
-          <FlexItem>
+                className="keycloak__events_search__form_label"
-            {Object.entries(activeFilters).length > 0 && (
+              >
-              <div className="keycloak__searchChips pf-u-ml-md">
+                <TextInput
-                {Object.entries(activeFilters).map((filter) => {
+                  ref={register()}
-                  const [key, value] = filter as [
+                  type="text"
-                    keyof UserEventSearchForm,
+                  id="kc-userId"
-                    string | EventType[]
+                  name="user"
-                  ];
+                  data-testid="userId-searchField"
+                />
+              </FormGroup>
+              <FormGroup
+                label={t("eventType")}
+                fieldId="kc-eventType"
+                className="keycloak__events_search__form_label"
+              >
+                <Controller
+                  name="type"
+                  control={control}
+                  render={({
+                    onChange,
+                    value,
+                  }: {
+                    onChange: (newValue: EventType[]) => void;
+                    value: EventType[];
+                  }) => (
+                    <Select
+                      className="keycloak__events_search__event_type_select"
+                      name="eventType"
+                      data-testid="event-type-searchField"
+                      chipGroupProps={{
+                        numChips: 1,
+                        expandedText: "Hide",
+                        collapsedText: "Show ${remaining}",
+                      }}
+                      variant={SelectVariant.typeaheadMulti}
+                      typeAheadAriaLabel="Select"
+                      onToggle={(isOpen) => setSelectOpen(isOpen)}
+                      selections={value}
+                      onSelect={(_, selectedValue) => {
+                        const option = selectedValue.toString() as EventType;
+                        const changedValue = value.includes(option)
+                          ? value.filter((item) => item !== option)
+                          : [...value, option];
 
-                  return (
+                        onChange(changedValue);
-                    <ChipGroup
+                      }}
-                      className="pf-u-mr-md pf-u-mb-md"
+                      onClear={(event) => {
-                      key={key}
+                        event.stopPropagation();
-                      categoryName={filterLabels[key]}
+                        onChange([]);
-                      isClosable
+                      }}
-                      onClick={() => removeFilter(key)}
+                      isOpen={selectOpen}
+                      aria-labelledby={"eventType"}
+                      chipGroupComponent={
+                        <ChipGroup>
+                          {value.map((chip) => (
+                            <Chip
+                              key={chip}
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                onChange(value.filter((val) => val !== chip));
+                              }}
+                            >
+                              {chip}
+                            </Chip>
+                          ))}
+                        </ChipGroup>
+                      }
                     >
-                      {typeof value === "string" ? (
+                      {events?.enabledEventTypes?.map((option) => (
-                        <Chip isReadOnly>{value}</Chip>
+                        <SelectOption key={option} value={option} />
-                      ) : (
+                      ))}
-                        value.map((entry) => (
+                    </Select>
-                          <Chip
+                  )}
-                            key={entry}
+                />
-                            onClick={() => removeFilterValue(key, entry)}
+              </FormGroup>
-                          >
+              <FormGroup
-                            {entry}
+                label={t("client")}
-                          </Chip>
+                fieldId="kc-client"
-                        ))
+                className="keycloak__events_search__form_label"
-                      )}
+              >
-                    </ChipGroup>
+                <TextInput
-                  );
+                  ref={register()}
-                })}
+                  type="text"
-              </div>
+                  id="kc-client"
-            )}
+                  name="client"
-          </FlexItem>
+                  data-testid="client-searchField"
-        </Flex>
+                />
+              </FormGroup>
+              <FormGroup
+                label={t("dateFrom")}
+                fieldId="kc-dateFrom"
+                className="keycloak__events_search__form_label"
+              >
+                <TextInput
+                  ref={register()}
+                  type="text"
+                  id="kc-dateFrom"
+                  name="dateFrom"
+                  className="pf-c-form-control pf-m-icon pf-m-calendar"
+                  placeholder="yyyy-MM-dd"
+                  data-testid="dateFrom-searchField"
+                />
+              </FormGroup>
+              <FormGroup
+                label={t("dateTo")}
+                fieldId="kc-dateTo"
+                className="keycloak__events_search__form_label"
+              >
+                <TextInput
+                  ref={register()}
+                  type="text"
+                  id="kc-dateTo"
+                  name="dateTo"
+                  className="pf-c-form-control pf-m-icon pf-m-calendar"
+                  placeholder="yyyy-MM-dd"
+                  data-testid="dateTo-searchField"
+                />
+              </FormGroup>
+              <ActionGroup>
+                <Button
+                  className="keycloak__user_events_search__form_btn"
+                  variant={"primary"}
+                  onClick={submitSearch}
+                  data-testid="search-events-btn"
+                  isDisabled={!isDirty}
+                >
+                  {t("searchUserEventsBtn")}
+                </Button>
+              </ActionGroup>
+            </Form>
+          </Dropdown>
+          <Button
+            className="pf-u-ml-md"
+            onClick={refresh}
+            data-testid="refresh-btn"
+          >
+            {t("refresh")}
+          </Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          {Object.entries(activeFilters).length > 0 && (
+            <div className="keycloak__searchChips pf-u-ml-md">
+              {Object.entries(activeFilters).map((filter) => {
+                const [key, value] = filter as [
+                  keyof UserEventSearchForm,
+                  string | EventType[]
+                ];
+
+                return (
+                  <ChipGroup
+                    className="pf-u-mr-md pf-u-mb-md"
+                    key={key}
+                    categoryName={filterLabels[key]}
+                    isClosable
+                    onClick={() => removeFilter(key)}
+                  >
+                    {typeof value === "string" ? (
+                      <Chip isReadOnly>{value}</Chip>
+                    ) : (
+                      value.map((entry) => (
+                        <Chip
+                          key={entry}
+                          onClick={() => removeFilterValue(key, entry)}
+                        >
+                          {entry}
+                        </Chip>
+                      ))
+                    )}
+                  </ChipGroup>
+                );
+              })}
+            </div>
+          )}
+        </ToolbarItem>
       </>
     );
   };
@@ -411,57 +408,55 @@ export const EventsSection = () => {
             eventKey="userEvents"
             title={<TabTitleText>{t("userEvents")}</TabTitleText>}
           >
-            <div className="keycloak__events_table">
+            <KeycloakDataTable
-              <KeycloakDataTable
+              key={key}
-                key={key}
+              loader={loader}
-                loader={loader}
+              detailColumns={[
-                detailColumns={[
+                {
-                  {
+                  name: "details",
-                    name: "details",
+                  enabled: (event) => event.details !== undefined,
-                    enabled: (event) => event.details !== undefined,
+                  cellRenderer: DetailCell,
-                    cellRenderer: DetailCell,
+                },
-                  },
+              ]}
-                ]}
+              isPaginated
-                isPaginated
+              ariaLabelKey="events:title"
-                ariaLabelKey="events:title"
+              toolbarItem={userEventSearchFormDisplay()}
-                toolbarItem={userEventSearchFormDisplay()}
+              columns={[
-                columns={[
+                {
-                  {
+                  name: "time",
-                    name: "time",
+                  displayKey: "events:time",
-                    displayKey: "events:time",
+                  cellRenderer: (row) => moment(row.time).format("LLL"),
-                    cellRenderer: (row) => moment(row.time).format("LLL"),
+                  cellFormatters: [expandable],
-                    cellFormatters: [expandable],
+                },
-                  },
+                {
-                  {
+                  name: "userId",
-                    name: "userId",
+                  displayKey: "events:user",
-                    displayKey: "events:user",
+                  cellRenderer: UserDetailLink,
-                    cellRenderer: UserDetailLink,
+                },
-                  },
+                {
-                  {
+                  name: "type",
-                    name: "type",
+                  displayKey: "events:eventType",
-                    displayKey: "events:eventType",
+                  cellRenderer: StatusRow,
-                    cellRenderer: StatusRow,
+                },
-                  },
+                {
-                  {
+                  name: "ipAddress",
-                    name: "ipAddress",
+                  displayKey: "events:ipAddress",
-                    displayKey: "events:ipAddress",
+                  transforms: [cellWidth(10)],
-                    transforms: [cellWidth(10)],
+                },
-                  },
+                {
-                  {
+                  name: "clientId",
-                    name: "clientId",
+                  displayKey: "events:client",
-                    displayKey: "events:client",
+                },
-                  },
+              ]}
-                ]}
+              emptyState={
-                emptyState={
+                <div className="pf-u-mt-md">
-                  <div className="pf-u-mt-md">
+                  <ListEmptyState
-                    <ListEmptyState
+                    message={t("emptyEvents")}
-                      message={t("emptyEvents")}
+                    instructions={t("emptyEventsInstructions")}
-                      instructions={t("emptyEventsInstructions")}
+                  />
-                    />
+                </div>
-                  </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;
 }