OZG-3122 OZG-3300 Reformat according to screenshots

goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search/vorgang-search-autocomplete-options-content/vorgang-search-autocomplete-options-content.component.html

@@ -23,21 +23,19 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<div class="line">
-	<div>
-	</div>
-	<div>
+<div class="line name-date">
+	<span class="name" data-test-id="preview-list-item-vorgang-name">{{vorgang.name}}</span>
+	<div class="date">
 		<mat-icon svgIcon="incoming"></mat-icon>
 		<span data-test-id="preview-list-item-created-at">{{ vorgang.createdAt | formatToPrettyDate }}</span>
 	</div>
 </div>
 <div class="line full-width">
-	<span class="name" data-test-id="preview-list-item-vorgang-name">{{vorgang.name}}</span>
-</div>
-<div class="line">
 	<div class="aktenzeichen" data-test-id="preview-list-item-vorgang-aktenzeichen">
 		<mat-icon svgIcon="az"></mat-icon>
 		<span goofy-client-aktenzeichen [vorgang]="vorgang"></span>
 	</div>
+</div>
+<div class="line full-width">
 	<goofy-client-vorgang-nummer [vorgang]="vorgang"></goofy-client-vorgang-nummer>
 </div>
\ No newline at end of file

goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search/vorgang-search-autocomplete-options-content/vorgang-search-autocomplete-options-content.component.scss

@@ -27,9 +27,31 @@ a {
 }
 
 .line {
+	display: grid;
+	grid-auto-flow: column;
+	grid-auto-columns: 1fr;
+	gap: 0.5rem;
+	align-items: center;
+	padding: 0.188rem 0;
+	white-space: normal;
+
 	&.full-width > * {
 		width: 100%;
 	}
+	&.name-date {
+		grid-template-columns: 1fr auto;
+		&.date {
+			white-space: nowrap;
+			overflow: hidden;
+		}
+	}
+
+	goofy-client-vorgang-nummer span {
+		white-space: normal;
+		overflow: auto;
+		text-overflow: unset;
+		word-break: break-all;
+	}
 }
 
 .aktenzeichen {
@@ -39,3 +61,8 @@ a {
 		word-break: break-all;
 	}
 }
+
+.name {
+	font-weight: bold;
+	white-space: normal;
+}
\ No newline at end of file

goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/vorgang-search/vorgang-search.component.scss

@@ -61,9 +61,7 @@ input {
 			top: -6px;
 			background: inherit;
 			z-index: 2;
-			// background-color: white;
 		}
-
 	}
 
 	goofy-client-vorgang-search {
@@ -109,27 +107,10 @@ input {
 			padding: 0.5rem 1rem;
 
 			.line {
-				display: grid;
-				grid-auto-flow: column;
-				grid-auto-columns: 1fr;
-				gap: 0.5rem;
-
-				padding: 0.188rem 0;
-				white-space: normal;
-
-				.name {
-					white-space: normal;
-				}
 				mat-icon {
 					margin-right: 0.25rem;
 					min-width: 1.5rem;
 				}
-				goofy-client-vorgang-nummer span {
-					white-space: normal;
-					overflow: auto;
-					text-overflow: unset;
-					word-break: break-all;
-				}
 			}
 		}
 	}