listen ansichten verbessert

web/css/components/app-list-toolbar.css

@@ -57,6 +57,20 @@
     font-size: 11px !important;
   }
 
+  .app-list-toolbar .app-grid-page-size select {
+    min-width: 84px;
+  }
+
+  .app-list-toolbar .app-grid-page-size {
+    margin-inline-start: auto !important;
+  }
+
+  @media (max-width: 768px) {
+    .app-list-toolbar .app-grid-page-size {
+      margin-inline-start: 0 !important;
+    }
+  }
+
   .app-list-toolbar
     .multi-select
     .multi-select-header

web/css/vendor-overrides/gridjs.css

@@ -135,14 +135,29 @@
   }
 
   .grid-avatar {
-    width: 36px;
-    height: 36px;
-    border-radius: 999px;
+    --grid-avatar-width: 36px;
+    --grid-avatar-height: 36px;
+    --grid-avatar-radius: 999px;
+    --grid-avatar-fit: cover;
+    --grid-avatar-padding: 0;
+    width: var(--grid-avatar-width);
+    height: var(--grid-avatar-height);
+    border-radius: var(--grid-avatar-radius);
     border: 1px solid var(--app-muted-border-color);
     background: var(--app-card-background-color);
-    object-fit: cover;
+    object-fit: var(--grid-avatar-fit);
+    padding: var(--grid-avatar-padding);
     display: inline-flex;
     flex-shrink: 0;
+    box-sizing: border-box;
+  }
+
+  .grid-avatar-tenant {
+    --grid-avatar-width: 48px;
+    --grid-avatar-height: 28px;
+    --grid-avatar-radius: var(--app-border-radius);
+    --grid-avatar-fit: contain;
+    --grid-avatar-padding: 2px;
   }
 
   .grid-avatar-placeholder {
@@ -154,6 +169,10 @@
     background: var(--app-background-color);
   }
 
+  .grid-avatar-tenant.grid-avatar-placeholder {
+    font-size: 10px;
+  }
+
   .grid-name-cell {
     display: inline-flex;
     align-items: center;
@@ -198,7 +217,25 @@
     font-size: small;
   }
 
-  tr.gridjs-tr {
+  .gridjs-container .grid-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+  }
+
+  .gridjs-container .grid-actions-row-open {
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  .gridjs-container .grid-actions .app-grid-row-open {
+    padding: 4px 10px;
+    font-size: 12px;
+    line-height: 1.2;
+    white-space: nowrap;
+  }
+
+  tr.gridjs-tr[data-row-open-url] {
     cursor: pointer;
   }
 
@@ -206,6 +243,19 @@
     background: var(--app-table-row-stripped-background-color);
   }
 
+  tr.gridjs-tr[data-row-open-url]:focus-visible td {
+    background: var(--app-table-row-stripped-background-color);
+    box-shadow: inset 0 0 0 var(--app-outline-width) var(--app-primary-focus);
+  }
+
+  tr.gridjs-tr[data-row-open-url]:focus-visible {
+    outline: none;
+  }
+
+  .gridjs-container table td .grid-actions .app-grid-row-open:focus-visible {
+    box-shadow: 0 0 0 var(--app-outline-width) var(--app-primary-focus);
+  }
+
   html[data-theme="dark"] button.gridjs-sort,
   html[data-theme="dark"] button.gridjs-sort-neutral {
     filter: invert(1);