From ea1b03f9df8a349d82a6ea95e8f62950cf40b9ca Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Tue, 16 Apr 2024 15:43:12 +0200
Subject: [PATCH] Fixed relative positioning.

---
 .../content/editor/content-editor.component.scss     |  1 -
 .../app/framework/angular/list-view.component.html   |  2 +-
 .../src/app/framework/angular/pipes/colors.pipes.ts  |  6 +++++-
 .../shared/components/focus-marker.component.html    | 12 +++++-------
 .../shared/components/focus-marker.component.scss    |  8 ++++++++
 5 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/features/content/pages/content/editor/content-editor.component.scss b/frontend/src/app/features/content/pages/content/editor/content-editor.component.scss
index 3625928d3..9cb4bbab9 100644
--- a/frontend/src/app/features/content/pages/content/editor/content-editor.component.scss
+++ b/frontend/src/app/features/content/pages/content/editor/content-editor.component.scss
@@ -38,6 +38,5 @@
 }
 
 .cursors {
-    position: relative;
     padding: 1.5rem;
 }
\ No newline at end of file
diff --git a/frontend/src/app/framework/angular/list-view.component.html b/frontend/src/app/framework/angular/list-view.component.html
index b2f6f668b..f31d2be1a 100644
--- a/frontend/src/app/framework/angular/list-view.component.html
+++ b/frontend/src/app/framework/angular/list-view.component.html
@@ -9,7 +9,7 @@
         </div>
     </div>
     
-    <div class="list-content normal" [class.loading-indicator]="isLoading" #contentElement sqxCompensateScrollbar>
+    <div class="list-content normal" [class.loading-indicator]="isLoading" #contentElement [sqxCompensateScrollbar]="innerWidth !== '100%'">
         <div class="inner normal" [style.minWidth]="innerWidth" [style.maxWidth]="innerWidth" [class.tabled]="table" [class.tabled2]="noPadding">
             <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
         </div>
diff --git a/frontend/src/app/framework/angular/pipes/colors.pipes.ts b/frontend/src/app/framework/angular/pipes/colors.pipes.ts
index 62eaf391b..d36ba1fcc 100644
--- a/frontend/src/app/framework/angular/pipes/colors.pipes.ts
+++ b/frontend/src/app/framework/angular/pipes/colors.pipes.ts
@@ -46,7 +46,11 @@ export class LightenPipe implements PipeTransform {
     standalone: true,
 })
 export class StringColorPipe implements PipeTransform {
-    public transform(value: string) {
+    public transform(value?: string) {
+        if (!value) {
+            return 'transparent';
+        }
+
         return ColorHelper.fromStringHash(value);
     }
 }
diff --git a/frontend/src/app/shared/components/focus-marker.component.html b/frontend/src/app/shared/components/focus-marker.component.html
index 035032ce3..e3bdc978d 100644
--- a/frontend/src/app/shared/components/focus-marker.component.html
+++ b/frontend/src/app/shared/components/focus-marker.component.html
@@ -1,11 +1,9 @@
-<div class="focus-container" (click)="onClick($event)">
-    <ng-content></ng-content>
-
-    <ng-container *ngIf="focusedUser | async; let user">
-        <div class="focus-border" [style.borderColor]="user.id | sqxStringColor"></div>
-
+<div class="focus-container" (click)="onClick($event)" [style.borderColor]="(focusedUser | async)?.id | sqxStringColor">
+    <div class="focused" *ngIf="focusedUser | async; let user">
         <div class="focus-user" [style.background]="user.id | sqxStringColor">
             {{user.displayName}}
         </div>
-    </ng-container>
+    </div>
+    
+    <ng-content></ng-content>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/shared/components/focus-marker.component.scss b/frontend/src/app/shared/components/focus-marker.component.scss
index 6ca61463f..fd297b913 100644
--- a/frontend/src/app/shared/components/focus-marker.component.scss
+++ b/frontend/src/app/shared/components/focus-marker.component.scss
@@ -2,6 +2,12 @@
 @import 'vars';
 
 .focus-container {
+    border: 2px solid transparent;
+    border-radius: 4px;
+    margin: -2px;
+}
+
+.focused {
     position: relative;
 }
 
@@ -9,6 +15,7 @@
     @include absolute(-2px, -2px, -2px, -2px);
     border: 2px solid transparent;
     border-radius: 6px;
+    pointer-events: none;
 }
 
 .focus-user {
@@ -19,5 +26,6 @@
     margin-right: 0;
     margin-bottom: 2px;
     padding: .125rem .25rem;
+    pointer-events: none;
     white-space: nowrap;
 }
\ No newline at end of file