Rework the visuals of state

src/app/state/state.component.css

@@ -3,6 +3,7 @@
     white-space: pre-line;
 }
 
-p {
-	font-size: 90%;
+td {
+	max-width: 300px;
+	vertical-align: text-top;
 }

src/app/state/state.component.html

 <td>
-	{{ service.site.name }}
+	<h4>{{ service.site.name }}</h4>
 	<br>
-	<p>
-	{{ service.site.description }}
-	</p>
+	<small>{{ service.site.description }}</small>
 </td>
 
 <td>
-	{{ service.name }}
+	<h4>{{ service.name }}</h4>
 	<br>
-	<p>
-	{{ service.description }}
-	</p>
+	<small>{{ service.description }}</small>
 </td>
 
 <ng-container *ngIf="(state$ | async) as state; else noStateItem">
@@ -26,9 +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>
-		<p>tooltip(state)</p>
+		<div class="mat-small">tooltip(state)</div>
 	</td>
 
 	<!-- state dependent buttons -->
@@ -71,8 +67,8 @@
 		<span>
 			<mat-icon mat-icon-button>call_received</mat-icon>
 		</span>
-		{{ lang.printState('not_deployed') }}
+		<h4>{{ lang.printState('not_deployed') }}</h4>
 		<br>
-		<p>Access to this service was never requested.</p>
+		<small>Access to this service was never requested.</small>
 	</td>
 </ng-template>