Simplified preview images.

frontend/app/features/content/shared/list/content-list-cell.directive.ts

@@ -86,5 +86,7 @@ export class ContentListCellDirective implements OnChanges {
             this.renderer.setStyle(this.element.nativeElement, 'max-width', width);
             this.renderer.setStyle(this.element.nativeElement, 'width', width);
         }
+
+        this.renderer.setStyle(this.element.nativeElement, 'position', 'relative');
     }
 }

frontend/app/features/content/shared/list/content-value.component.scss

@@ -1,13 +1,9 @@
-:host {
-    position: relative;
-}
-
 :host ::ng-deep {
     img {
         max-height: 50px;
         min-height: 50px;
         position: absolute;
-        top: -15px;
+        top: 5px;
     }
 
     img + span {

frontend/app/features/content/shared/references/reference-item.component.html

@@ -3,7 +3,7 @@
         <ng-content></ng-content>
     </td>
 
-    <td sqxContentListCell="meta.lastModifiedBy.avatar">
+    <td class="content-field" sqxContentListCell="meta.lastModifiedBy.avatar">
         <sqx-content-list-field field="meta.lastModifiedBy.avatar" [content]="content" [language]="language"></sqx-content-list-field>
     </td>
 

frontend/app/shared/state/contents.forms.spec.ts

@@ -422,7 +422,7 @@ describe('StringField', () => {
     it('should format to preview image', () => {
         const field2 = createField({ properties: createProperties('String', { editor: 'StockPhoto' }) });
 
-        expect(FieldFormatter.format(field2, 'https://images.unsplash.com/123?x', true)).toEqual(new HtmlValue('<img src="https://images.unsplash.com/123?x&q=80&fm=jpg&crop=entropy&cs=tinysrgb&h=50&fit=max" /> &nbsp;'));
+        expect(FieldFormatter.format(field2, 'https://images.unsplash.com/123?x', true)).toEqual(new HtmlValue('<img src="https://images.unsplash.com/123?x&q=80&fm=jpg&crop=entropy&cs=tinysrgb&h=50&fit=max" />'));
     });
 
     it('should not format to preview image when html not allowed', () => {
@@ -463,7 +463,7 @@ describe('GetContentValue', () => {
 
         const result = getContentValue(content, language, assetWithImageAndFileName);
 
-        expect(result).toEqual({ value: ['url/to/13', 'file13'], formatted: new HtmlValue('<img src="url/to/13?width=50&height=50" /> <span>file13 &nbsp;</span>') });
+        expect(result).toEqual({ value: ['url/to/13', 'file13'], formatted: new HtmlValue('<img src="url/to/13?width=50&height=50" /> <span>file13</span>') });
     });
 
     it('should resolve image url only from referenced asset', () => {
@@ -479,7 +479,7 @@ describe('GetContentValue', () => {
 
         const result = getContentValue(content, language, assetWithImage);
 
-        expect(result).toEqual({ value: ['url/to/13', 'file13'], formatted: new HtmlValue('<img src="url/to/13?width=50&height=50" /> &nbsp;') });
+        expect(result).toEqual({ value: ['url/to/13', 'file13'], formatted: new HtmlValue('<img src="url/to/13?width=50&height=50" />') });
     });
 
     it('should resolve filename only from referenced asset', () => {

frontend/app/shared/state/contents.forms.visitors.ts

@@ -55,9 +55,9 @@ export function getContentValue(content: ContentDto, language: LanguageDto, fiel
                         const previewMode = field.properties['previewMode'];
 
                         if (previewMode === 'ImageAndFileName') {
-                            formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" /> <span>${value[1]} &nbsp;</span>`);
+                            formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" /> <span>${value[1]}</span>`);
                         } else if (previewMode === 'Image') {
-                            formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" /> &nbsp;`);
+                            formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" />`);
                         } else {
                             formatted = value[1];
                         }
@@ -181,7 +181,7 @@ export class FieldFormatter implements FieldPropertiesVisitor<FieldValue> {
             const src = thumbnail(this.value, undefined, 50);
 
             if (src) {
-                return new HtmlValue(`<img src="${src}" /> &nbsp;`);
+                return new HtmlValue(`<img src="${src}" />`);
             }
         }