OZG-530 only show file size if gt 0

goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/anhang-list-container/anhaenge/anhaenge.component.scss

+:host {
+	max-width: 100%;
+}
+
 .files {
 	display: flex;
 	flex-direction: column;

goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/anhang-list-container/anhaenge/file/file.component.html

 <div class="file" [matTooltip]="file.name">
 	<mat-icon>file_present</mat-icon>
 	<span class="name">{{ file.name }}</span>
-	<span class="size" [innerHTML]="file.size | fileSize"></span>
+	<span class="size" data-test-class="file-size" [innerHTML]="file.size | fileSize"></span>
 </div>

goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/anhang-list-container/anhaenge/file/file.component.scss

 :host {
 	max-width: 100%;
+	display: flex;
+	justify-content: flex-start;
 }
 
 .file {
 	background-color: rgba(#000, 0.04);
 	margin: 4px 0;
-	padding: 0 2px;
+	padding: 0 8px 0 2px;
 	border-radius: 14px;
 	white-space: nowrap;
 	display: flex;
-	max-width: calc(100% - 4px);
 	align-items: center;
+	max-width: calc(100% - 10px);
 	text-decoration: none;
 	color: inherit;
 }
@@ -27,17 +29,10 @@
 	text-overflow: ellipsis;
 }
 
-.mat-icon,
-.size,
-.name {
-	margin: 2px;
-}
-
 .size {
 	font-size: 12px;
 	flex-shrink: 0;
 	opacity: 0.4;
-	margin-right: 8px;
 
 	::ng-deep {
 		.unit {
@@ -45,3 +40,9 @@
 		}
 	}
 }
+
+.mat-icon,
+.size,
+.name {
+	margin: 2px;
+}

goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/anhang-list-container/anhaenge/file/file.component.spec.ts

@@ -12,6 +12,7 @@ describe('FileComponent', () => {
 	let fixture: ComponentFixture<FileComponent>;
 
 	const file: FileResource = createFileResource([FileLinkRel.DOWNLOAD]);
+	const fileSizeSelector: string = '[data-test-class="file-size"]';
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
@@ -35,4 +36,20 @@ describe('FileComponent', () => {
 	it('should create', () => {
 		expect(component).toBeTruthy();
 	});
+
+	describe('file size', () => {
+		it('should visible if size > 0', () => {
+			const element = fixture.nativeElement.querySelector(fileSizeSelector);
+
+			expect(element).toBeInstanceOf(HTMLElement);
+		})
+
+		it('should be hidden if size = 0', () => {
+			component.file = { ...file, size: 0 }
+
+			const element = fixture.nativeElement.querySelector(fileSizeSelector);
+
+			expect(element).toBeInstanceOf(HTMLElement);
+		})
+	})
 });