From 165b9012dae42353a40407ec542fa37d196dc3a4 Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Thu, 23 Feb 2023 07:17:18 +0000
Subject: [PATCH] improve users responsiveness

---
 frontend/src/components/users/Users.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/users/Users.tsx b/frontend/src/components/users/Users.tsx
index 36ef2f556..4697f89c5 100644
--- a/frontend/src/components/users/Users.tsx
+++ b/frontend/src/components/users/Users.tsx
@@ -8,6 +8,7 @@ import {
   Show,
 } from "solid-js";
 import { client } from "../..";
+import { useAppDimensions } from "../../state/DimensionProvider";
 import { useAppState } from "../../state/StateProvider";
 import { Operation } from "../../types";
 import { combineClasses, getId } from "../../util/helpers";
@@ -18,6 +19,7 @@ import Loading from "../shared/loading/Loading";
 import s from "./users.module.scss";
 
 const Users: Component<{}> = (p) => {
+  const { isMobile } = useAppDimensions();
   const { ws } = useAppState();
   const [users, { refetch }] = createResource(() => client.list_users());
   onCleanup(
@@ -60,10 +62,13 @@ const Users: Component<{}> = (p) => {
           {(user) => (
             <Flex class={combineClasses(s.User, "shadow")}>
               <div class={s.Username}>{user.username}</div>
-              <Flex alignItems="center">
+              <Grid
+                placeItems="center end"
+                gridTemplateColumns={!isMobile() ? "1fr 1fr 1fr" : undefined}
+              >
                 <button
                   class={user.enabled ? "green" : "red"}
-                  style={{ width: "6rem" }}
+                  style={{ width: isMobile() ? "11rem" : "6rem" }}
                   onClick={() => {
                     client.modify_user_enabled({
                       user_id: getId(user),
@@ -108,7 +113,7 @@ const Users: Component<{}> = (p) => {
                   >
                     <Icon type="trash" />
                   </ConfirmButton> */}
-              </Flex>
+              </Grid>
             </Flex>
           )}
         </For>