OZG-5981 OZG-6024 Add styling to files-tab

alfa-client/libs/binary-file/src/lib/vertical-binary-file-list/vertical-binary-file-list.component.html

@@ -24,7 +24,7 @@
 
 -->
 <ozgcloud-spinner [stateResource]="binaryFileListStateResource">
-  <div class="vertical" data-test-id="file-list">
+  <ods-attachment-container [title]="title" data-test-id="file-list">
     <ng-container
       *ngFor="
         let binaryFileResource of binaryFileListStateResource.resource
@@ -38,5 +38,5 @@
       >
       </alfa-binary-file2-container>
     </ng-container>
-  </div>
+  </ods-attachment-container>
 </ozgcloud-spinner>

alfa-client/libs/binary-file/src/lib/vertical-binary-file-list/vertical-binary-file-list.component.scss

-/**
- * Copyright (C) 2022 Das Land Schleswig-Holstein vertreten durch den
- * Ministerpräsidenten des Landes Schleswig-Holstein
- * Staatskanzlei
- * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
- *
- * Lizenziert unter der EUPL, Version 1.2 oder - sobald
- * diese von der Europäischen Kommission genehmigt wurden -
- * Folgeversionen der EUPL ("Lizenz");
- * Sie dürfen dieses Werk ausschließlich gemäß
- * dieser Lizenz nutzen.
- * Eine Kopie der Lizenz finden Sie hier:
- *
- * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
- *
- * Sofern nicht durch anwendbare Rechtsvorschriften
- * gefordert oder in schriftlicher Form vereinbart, wird
- * die unter der Lizenz verbreitete Software "so wie sie
- * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
- * ausdrücklich oder stillschweigend - verbreitet.
- * Die sprachspezifischen Genehmigungen und Beschränkungen
- * unter der Lizenz sind dem Lizenztext zu entnehmen.
- */
-.vertical {
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  align-items: flex-start;
-  margin: 0 -4px;
-  margin-top: 1rem;
-}

alfa-client/libs/binary-file/src/lib/vertical-binary-file-list/vertical-binary-file-list.component.ts

@@ -28,12 +28,12 @@ import { Component, Input } from '@angular/core';
 @Component({
   selector: 'alfa-vertical-binary-file-list',
   templateUrl: './vertical-binary-file-list.component.html',
-  styleUrls: ['./vertical-binary-file-list.component.scss'],
 })
 export class VerticalBinaryFileListComponent {
   @Input() binaryFileListStateResource: StateResource<BinaryFileListResource> =
     createEmptyStateResource<BinaryFileListResource>();
   @Input() downloadFileNamePrefix: string;
+  @Input() title: string = '';
   @Input() deletable: boolean = false;
 
   readonly fileListRel = BinaryFileListLinkRel;

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-formular-daten/vorgang-detail-dateien-container/vorgang-detail-dateien-container.component.html

-<ng-container *ngIf="attachmentListStateResource$ | async as attachmentListStateResource">
+<div class="flex flex-col gap-6 p-3 xl:flex-row">
+  <ng-container *ngIf="representationListStateResource$ | async as representationListStateResource">
     <alfa-vertical-binary-file-list
-    *ngIf="attachmentListStateResource.resource"
-    data-test-id="attachment-list"
-    [binaryFileListStateResource]="attachmentListStateResource"
+      *ngIf="representationListStateResource.resource"
+      class="flex-1"
+      title="Antrag"
+      data-test-id="representation-list"
+      [binaryFileListStateResource]="representationListStateResource"
       [downloadFileNamePrefix]="downloadPrefix"
     >
     </alfa-vertical-binary-file-list>
   </ng-container>
-
-<ng-container *ngIf="representationListStateResource$ | async as representationListStateResource">
+  <ng-container *ngIf="attachmentListStateResource$ | async as attachmentListStateResource">
     <alfa-vertical-binary-file-list
-    *ngIf="representationListStateResource.resource"
-    data-test-id="representation-list"
-    [binaryFileListStateResource]="representationListStateResource"
+      *ngIf="attachmentListStateResource.resource"
+      class="flex-1"
+      title="Anhänge"
+      data-test-id="attachment-list"
+      [binaryFileListStateResource]="attachmentListStateResource"
       [downloadFileNamePrefix]="downloadPrefix"
     >
     </alfa-vertical-binary-file-list>
   </ng-container>
+</div>