From bf8ce55eea58681d69434267eaf0b47e9517eedd Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Thu, 30 Dec 2021 23:03:33 +0100
Subject: [PATCH] web/admin: fix display when groups/users don't fit on a
 single row

closes #2030

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/pages/groups/GroupForm.ts | 13 ++++++++++++-
 web/src/pages/users/UserForm.ts   | 13 ++++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/groups/GroupForm.ts b/web/src/pages/groups/GroupForm.ts
index ba19d6b44..a867b89a5 100644
--- a/web/src/pages/groups/GroupForm.ts
+++ b/web/src/pages/groups/GroupForm.ts
@@ -2,7 +2,7 @@ import YAML from "yaml";
 
 import { t } from "@lingui/macro";
 
-import { TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { until } from "lit/directives/until.js";
@@ -21,6 +21,17 @@ import "./MemberSelectModal";
 
 @customElement("ak-group-form")
 export class GroupForm extends ModelForm<Group, string> {
+    static get styles(): CSSResult[] {
+        return super.styles.concat(css`
+            .pf-c-button.pf-m-control {
+                height: 100%;
+            }
+            .pf-c-form-control {
+                height: auto !important;
+            }
+        `);
+    }
+
     loadInstance(pk: string): Promise<Group> {
         return new CoreApi(DEFAULT_CONFIG).coreGroupsRetrieve({
             groupUuid: pk,
diff --git a/web/src/pages/users/UserForm.ts b/web/src/pages/users/UserForm.ts
index 5aefdcd79..87add8cfb 100644
--- a/web/src/pages/users/UserForm.ts
+++ b/web/src/pages/users/UserForm.ts
@@ -2,7 +2,7 @@ import YAML from "yaml";
 
 import { t } from "@lingui/macro";
 
-import { TemplateResult, html } from "lit";
+import { CSSResult, TemplateResult, css, html } from "lit";
 import { customElement } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { until } from "lit/directives/until.js";
@@ -18,6 +18,17 @@ import "./GroupSelectModal";
 
 @customElement("ak-user-form")
 export class UserForm extends ModelForm<User, number> {
+    static get styles(): CSSResult[] {
+        return super.styles.concat(css`
+            .pf-c-button.pf-m-control {
+                height: 100%;
+            }
+            .pf-c-form-control {
+                height: auto !important;
+            }
+        `);
+    }
+
     loadInstance(pk: number): Promise<User> {
         return new CoreApi(DEFAULT_CONFIG).coreUsersRetrieve({
             id: pk,