OZG-6676 OZG-7027 responsive design

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang/collaboration-in-vorgang.component.html

@@ -5,12 +5,14 @@
     }"
   >
     <alfa-organisations-einheit-container
+      class="w-full"
       *ngIf="showOrganisationsEinheitAnfrageButton"
       data-test-id="organisations-einheit-container"
       [vorgang]="vorgang"
       [collaborationListResource]="collaborationStateListResource.resource"
     ></alfa-organisations-einheit-container>
     <alfa-externe-fachstelle-container
+      class="w-full"
       *ngIf="showExterneFachstelleAnfrageButton"
       data-test-id="externe-fachstelle-container"
       [vorgang]="vorgang"

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang/externe-fachstelle-container/externe-fachstelle-container.component.html

@@ -11,12 +11,11 @@
   ></alfa-collaboration-request-form>
 </ng-container>
 <ng-template #anfrageErstellenButton>
-  <div class="flex w-111 justify-between bg-background-100 p-4 shadow-md">
+  <div class="flex flex-1 gap-3 border border-grayborder bg-background-100 p-4 shadow shadow-grayborder">
     <ods-external-unit-icon />
-    <div class="flex w-44 flex-col text-base">
+    <div class="flex flex-1 flex-col text-base">
       <p class="text-primary">Externe Fachstelle</p>
-      <p class="text-text">Private Organisation,</p>
-      <p class="text-text">Verein, Schule</p>
+      <p class="text-text">Private Organisation, Verein, Schule</p>
     </div>
     <alfa-anfrage-erstellen-button data-test-id="externe-fachstelle-anfrage-erstellen-button" (clickEmitter)="showForm()" />
   </div>

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang/organisations-einheit-container/organisations-einheit-container.component.html

@@ -11,12 +11,11 @@
   ></alfa-collaboration-request-form>
 </ng-container>
 <ng-template #anfrageErstellenButton>
-  <div class="flex w-111 justify-between bg-background-100 p-4 shadow-md">
+  <div class="flex flex-1 gap-3 border border-grayborder bg-background-100 bg-background-100 p-4 p-4 shadow shadow-grayborder">
     <ods-public-administration-icon />
-    <div class="flex w-44 flex-col text-base">
+    <div class="flex flex-1 flex-col text-base">
       <p class="text-primary">Öffentliche Verwaltung</p>
-      <p class="text-text">Kommune, Amt,</p>
-      <p class="text-text">Ministerium</p>
+      <p class="text-text">Kommune, Amt, Ministerium</p>
     </div>
     <alfa-anfrage-erstellen-button data-test-id="organisations-einheit-anfrage-erstellen-button" (clickEmitter)="showForm()" />
   </div>

alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js

@@ -45,9 +45,6 @@ module.exports = {
       maxHeight: {
         120: '480px',
       },
-      width: {
-        111: '444px',
-      },
       colors: {
         ozgblue: {
           50: 'hsl(200, 100%, 96%)',