Merge branch 'site-descr' into service-contact

src/app/state/state.component.css

@@ -2,3 +2,19 @@
 .my-tooltip {
     white-space: pre-line;
 }
+
+h4 {
+	margin-bottom: 5px;
+}
+
+td {
+	max-width: 300px;
+	vertical-align: top;
+}
+
+.mat-icon {
+	font-size: 15px;
+	height: 15px;
+	width: 15px;
+	vertical-align: initial;
+}

src/app/state/state.component.html

 <td>
-	<span matTooltip="{{ service.site.description}}" matTooltipClass="my-tooltip">
-		{{ service.site.name }}
-		<mat-icon>help</mat-icon>
-	</span>
+	<h4>{{ service.site.name }}</h4>
+	<br>
+	<small>{{ service.site.description }}</small>
 </td>
 
 <td>
-	<span matTooltip="{{ service.description }}">
-		{{ service.name }}
-		<mat-icon>help</mat-icon>
-	</span>
+	<h4>{{ service.name }}</h4>
+	<br>
+	<small>{{ service.description }}</small>
 </td>
 
 <ng-container *ngIf="(state$ | async) as state; else noStateItem">
@@ -24,7 +22,9 @@
 			<mat-icon *ngSwitchCase="'rejected'" mat-icon-button>error</mat-icon>
 			<mat-icon *ngSwitchDefault mat-icon-button>call_received</mat-icon>
 		</span>
-		{{ lang.printState(state.state) }}
+		<h4>{{ lang.printState(state.state) }}</h4>
+		<br>
+		<div class="mat-small">tooltip(state)</div>
 	</td>
 
 	<!-- state dependent buttons -->
@@ -65,8 +65,10 @@
 <ng-template #noStateItem>
 	<td>
 		<span>
-			<mat-icon mat-icon-button matTooltip="Access to this service was never requested.">call_received</mat-icon>
+			<mat-icon mat-icon-button>call_received</mat-icon>
 		</span>
-		{{ lang.printState('not_deployed') }}
+		<h4>{{ lang.printState('not_deployed') }}</h4>
+		<br>
+		<small>Access to this service was never requested.</small>
 	</td>
 </ng-template>