From 843e129aaef1ce6a151c839334846d411add094f Mon Sep 17 00:00:00 2001
From: Henry Schreiner <henryschreineriii@gmail.com>
Date: Fri, 3 May 2024 13:15:46 -0400
Subject: [PATCH] fix(webapp): Better package listing

Signed-off-by: Henry Schreiner <henryschreineriii@gmail.com>
---
 docs/webapp.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/webapp.js b/docs/webapp.js
index d4545bd..3218a19 100644
--- a/docs/webapp.js
+++ b/docs/webapp.js
@@ -192,12 +192,13 @@ function MyThemeProvider(props) {
 class App extends React.Component {
   constructor(props) {
     super(props);
-    const deps_str = props.deps.join(" ");
+    const inner_deps_str = props.deps.join("\n");
+    const deps_str = `<pre><code>${inner_deps_str}</code></pre>`;
     this.state = {
       results: [],
       repo: urlParams.get("repo") || "",
       branch: urlParams.get("branch") || "",
-      msg: `${DEFAULT_MSG} Packages: ${deps_str}`,
+      msg: `<p>${DEFAULT_MSG}</p><h4>Packages:</h4> ${deps_str}`,
       progress: false,
       err_msg: "",
       url: "",
@@ -363,7 +364,7 @@ class App extends React.Component {
           <MaterialUI.Paper elevation={3}>
             <MaterialUI.Box sx={{ p: 2 }}>
               <MaterialUI.Typography variant="body1" component="div">
-                {this.state.msg}
+                <span dangerouslySetInnerHTML={{ __html: this.state.msg }} />
               </MaterialUI.Typography>
               {this.state.progress && <MaterialUI.LinearProgress />}
               {this.state.err_msg && (