Fixed css stuff

src/lib/listing/services/listing.service.ts

@@ -5,7 +5,7 @@ import { FilterService, getFilteredEntities } from '../../filtering';
 import { SearchService } from '../../search';
 import { IListable } from '../models';
 import { EntitiesService } from './entities.service';
-import { any, getLength, log, shareDistinctLast, shareLast } from '../../utils';
+import { any, getLength, shareDistinctLast, shareLast } from '../../utils';
 
 @Injectable()
 export class ListingService<E extends IListable> {
@@ -99,7 +99,6 @@ export class ListingService<E extends IListable> {
     isSelected$(entity: E): Observable<boolean> {
         return this._selected$.pipe(
             any(selectedId => selectedId === entity.id),
-            log(),
             shareDistinctLast(),
         );
     }

src/lib/listing/table-content/table-content.component.scss

@@ -20,12 +20,7 @@
         .table-item {
             display: contents;
 
-            > *:not(.selection-column):not(.scrollbar-placeholder) {
-                display: contents;
-            }
-
-            > iqser-table-item
-            &.disabled > div,
+            &.disabled > iqser-table-item > div,
             &.disabled .cell {
                 background-color: var(--iqser-grey-2);
                 color: var(--iqser-disabled);
@@ -35,36 +30,6 @@
                 }
             }
 
-            .table-item-title {
-                font-weight: 600;
-                @include mixins.line-clamp(1);
-                width: fit-content;
-                max-width: 100%;
-            }
-
-            .action-buttons {
-                position: absolute;
-                display: none;
-                right: -11px;
-                top: 0;
-                height: 100%;
-                width: fit-content;
-                flex-direction: row;
-                align-items: center;
-                padding-left: 100px;
-                padding-right: 21px;
-                z-index: 1;
-                background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-grey-2) 35%);
-
-                mat-icon {
-                    width: 14px;
-                }
-
-                iqser-circle-button:not(:last-child) {
-                    margin-right: 2px;
-                }
-            }
-
             input,
             mat-select {
                 margin-top: 0;
@@ -76,12 +41,12 @@
                 }
 
                 .action-buttons {
-                    display: flex;
+                    display: flex !important;
                 }
             }
 
             &:hover:not(.disabled) {
-                > div,
+                .cell,
                 > * > div {
                     background-color: var(--iqser-not-disabled-table-item);
                 }
@@ -92,16 +57,14 @@
     &:hover {
         overflow-y: auto !important;
 
-        &.has-scrollbar {
-            .table-item {
-                .action-buttons {
-                    right: 0;
-                    padding-right: 13px;
-                }
+        &.has-scrollbar .table-item::ng-deep {
+            .action-buttons {
+                right: 0;
+                padding-right: 13px;
+            }
 
-                .scrollbar-placeholder {
-                    display: none;
-                }
+            .scrollbar-placeholder {
+                display: none !important;
             }
         }
     }

src/lib/listing/table-content/table-item/table-item.component.html

@@ -1,4 +1,4 @@
-<div (click)="listingComponent.toggleEntitySelected($event, entity)" *ngIf="selectionEnabled" class="selec tion-column">
+<div (click)="listingComponent.toggleEntitySelected($event, entity)" *ngIf="selectionEnabled" class="selection-column">
     <iqser-round-checkbox [active]="isSelected$ | async"></iqser-round-checkbox>
 </div>
 

src/lib/listing/table-content/table-item/table-item.component.scss

@@ -1,45 +1,82 @@
-:host {
+@use '../../../../assets/styles/common-mixins' as mixins;
+
+:host::ng-deep {
     display: contents;
-}
 
-> div,
-.cell {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    position: relative;
-    box-sizing: border-box;
-    border-bottom: 1px solid var(--iqser-separator);
-    height: var(--itemSize);
-    padding: 0 10px;
+    > *:not(.selection-column):not(.scrollbar-placeholder) {
+        display: contents;
+    }
 
-    &.center {
-        align-items: center;
+    > div,
+    .cell {
+        display: flex;
+        flex-direction: column;
         justify-content: center;
-    }
-}
+        position: relative;
+        box-sizing: border-box;
+        border-bottom: 1px solid var(--iqser-separator);
+        height: var(--itemSize);
+        padding: 0 10px;
 
-.cell {
-    min-width: 110px;
-
-    &:first-of-type {
-        padding: 0 24px;
-    }
-}
-
-.selection-column {
-    padding-right: 0 !important;
-
-    iqser-round-checkbox .wrapper {
-        opacity: 0;
-        transition: opacity 0.2s;
-
-        &.active {
-            opacity: 1;
+        &.center {
+            align-items: center;
+            justify-content: center;
         }
     }
 
-    & + * > .cell:first-of-type {
-        padding: 0 10px;
+    .cell {
+        min-width: 110px;
+
+        &:first-of-type {
+            padding: 0 24px;
+        }
+    }
+
+    .selection-column {
+        padding-right: 0 !important;
+
+        iqser-round-checkbox .wrapper {
+            opacity: 0;
+            transition: opacity 0.2s;
+
+            &.active {
+                opacity: 1;
+            }
+        }
+
+        & + * > .cell:first-of-type {
+            padding: 0 10px;
+        }
+    }
+
+
+    .table-item-title {
+        font-weight: 600;
+        @include mixins.line-clamp(1);
+        width: fit-content;
+        max-width: 100%;
+    }
+
+    .action-buttons {
+        position: absolute;
+        display: none !important;
+        right: -11px;
+        top: 0;
+        height: 100%;
+        width: fit-content;
+        flex-direction: row;
+        align-items: center;
+        padding-left: 100px;
+        padding-right: 21px;
+        z-index: 1;
+        background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, var(--iqser-grey-2) 35%);
+
+        mat-icon {
+            width: 14px;
+        }
+
+        iqser-circle-button:not(:last-child) {
+            margin-right: 2px;
+        }
     }
 }