Get the QueryStatus application displaying the status more appropriately

styles/Apps/QueryStatus.css

@@ -0,0 +1,20 @@
+.taf.QueryStatus {
+	.user-list {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		list-style-type: none;
+		margin: 0;
+		padding: 0;
+
+		li {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			margin: 0;
+			border: 1px solid yellowgreen;
+			border-radius: 4px;
+			padding: 4px 8px;
+		}
+	}
+}

styles/elements/span.css

@@ -18,8 +18,9 @@
 
 .taf > .window-content span {
 	&.loader {
-		width: 48px;
-		height: 48px;
+		--size: 40px;
+		width: var(--size);
+		height: var(--size);
 		border-radius: 50%;
 		position: relative;
 		animation: rotate 2s linear infinite;
@@ -38,7 +39,7 @@
 		&::after{
 			inset: 8px;
 			transform: rotate3d(90, 90, 0, 180deg );
-			border-color: #FF3D00; /* This can be the user colour */
+			border-color: var(--spinner-inner-colour, #FF3D00);
 		}
 	}
 }

styles/elements/utils.css

@@ -0,0 +1,3 @@
+.taf > .window-content {
+	.grow { flex-grow: 1; }
+}

styles/main.css

@@ -9,6 +9,7 @@
 @import url("./themes/light.css") layer(themes);
 
 /* Elements */
+@import url("./elements/utils.css") layer(elements);
 @import url("./elements/headers.css") layer(elements);
 @import url("./elements/hr.css") layer(elements);
 @import url("./elements/input.css") layer(elements);
@@ -22,4 +23,5 @@
 @import url("./Apps/Ask.css") layer(apps);
 @import url("./Apps/AttributeManager.css") layer(apps);
 @import url("./Apps/PlayerSheet.css") layer(apps);
+@import url("./Apps/QueryStatus.css") layer(apps);
 @import url("./Apps/TAFDocumentSheetConfig.css") layer(apps);