ssb: Make the reactions list dialog a bit more compact/concise.

apps/ssb/tf-reactions-modal.js

@@ -41,23 +41,26 @@ class TfReactionsModalElement extends LitElement {
 								>
 							</header>
 							<ul class="w3-theme-dark w3-container w3-ul">
-								${this.votes.map(
-									(x) => html`
-										<li class="w3-bar">
-											<span class="w3-bar-item"
-												>${x?.content?.vote?.expression}</span
-											>
-											<tf-user
-												class="w3-bar-item"
-												id=${x.author}
-												.users=${this.users}
-											></tf-user>
-											<span class="w3-bar-item w3-right"
-												>${new Date(x?.timestamp).toLocaleString()}</span
-											>
-										</li>
-									`
-								)}
+								${this.votes
+									.sort((x, y) => y.timestamp - x.timestamp)
+									.map(
+										(x) => html`
+											<li style="display: flex; flex-direction: row; gap: 4px">
+												<span style="flex-basis: 3em"
+													>${x?.content?.vote?.expression}</span
+												>
+												<tf-user
+													style="flex: 1 1"
+													id=${x.author}
+													.users=${this.users}
+												></tf-user>
+												<span
+													style="flex-shrink: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
+													>${new Date(x?.timestamp).toLocaleString()}</span
+												>
+											</li>
+										`
+									)}
 							</ul>
 							<footer class="w3-container w3-padding">
 								<button class="w3-button" @click=${this.clear}>Close</button>