Give columns a bit more space and fix overlaying issues

Signed-off-by: Julius Härtl <jus@bitgrid.net>

diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index 9ba3f01e5e3f1c00c5ef929edd3c82c1eef0d4f2..a07072aa8f368408ca3453e8082e9588de59b877 100644 (file)
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -1412,12 +1412,11 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 /* USERS LIST -------------------------------------------------------------- */
 #body-settings {
        $grid-row-height: 60px;
-       $grid-col-min-width: 150px;
+       $grid-col-min-width: 160px;
+       overflow-x: scroll;
 
        #app-content.user-list-grid {
                display: grid;
-               grid-auto-columns: 1fr;
-               grid-auto-rows: $grid-row-height;
                grid-column-gap: 20px;
 
                .row {
@@ -1425,13 +1424,20 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
                        // fallback for ie11 no grid
                        display: flex;
                        display: grid;
+                       min-height: $grid-row-height;
                        grid-row-start: span 1;
                        grid-gap: 3px;
                        align-items: center;
-                       z-index: 0;
                        /* let's define the column until storage path,
                           what follows will be manually defined  */
-                       grid-template-columns: 44px minmax($grid-col-min-width + 30px, 1fr) repeat(auto-fit, minmax($grid-col-min-width, 1fr));
+                       grid-template-columns:
+                                       44px
+                                       minmax($grid-col-min-width + 30px, 1fr) // username, displayname
+                                       minmax($grid-col-min-width, 1fr) // password
+                                       minmax($grid-col-min-width, 1fr) // email
+                                       minmax(1.5*$grid-col-min-width, 1fr) // groups
+                                       minmax(1.5*$grid-col-min-width, 1fr) // group admins
+                                       repeat(auto-fit, minmax($grid-col-min-width, 1fr));
                        border-bottom: var(--color-border) 1px solid;
 
                        &.disabled {
@@ -1447,16 +1453,20 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
                        .userBackend,
                        .lastLogin {
                                min-width: $grid-col-min-width;
-                               display: flex;
+
                                color: var(--color-text-dark);
                                vertical-align: baseline;
+                               text-overflow: ellipsis;
+                               overflow: hidden;
                        }
 
                        .groups,
                        .subadmins,
                        .quota {
+                               min-width: $grid-col-min-width;
+
                                .multiselect {
-                                       min-width: $grid-col-min-width;
+                                       width: 100%;
                                        color: var(--color-text-dark);
                                        vertical-align: baseline;
                                }
@@ -1468,10 +1478,12 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
                        }
 
                        .userActions {
-                               min-width: 44px;
+                               display: flex;
+                               justify-content: flex-end;
                                position: sticky;
-                               right: 40px;
-                               z-index: 109;
+                               right: 0px;
+                               min-width: 88px;
+                               background-color: var(--color-main-background);
                        }
 
                        .subtitle {
@@ -1544,12 +1556,15 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
                                }
                        }
 
+                       > form {
+                               width: 100%;
+                       }
+
                        > div,
                        > form {
                                grid-row: 1;
                                display: inline-flex;
                                color: var(--color-text-lighter);
-                               position: relative;
 
                                > input:not(:focus):not(:active) {
                                        border-color: transparent;
@@ -1627,9 +1642,8 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
                                }
 
                                &.userActions {
-                                       .action-item {
-                                               position: absolute;
-                                       }
+                                       display: flex;
+                                       justify-content: flex-end;
 
                                        #newsubmit {
                                                width: 100%;
@@ -1637,15 +1651,15 @@ doesnotexist:-o-prefocus, .strengthify-wrapper {
 
                                        .toggleUserActions {
                                                position: relative;
-                                               display: block;
+                                               display: flex;
                                                align-items: center;
+                                               background-color: var(--color-main-background);
 
                                                .icon-more {
                                                        width: 44px;
                                                        height: 44px;
                                                        opacity: .5;
                                                        cursor: pointer;
-                                                       margin-left: 40px;
 
                                                        &:hover {
                                                                opacity: .7;