Use default avatar on signup page

src/main/controllers/web/signup.tmpl.html

@@ -10,14 +10,17 @@
   <div>
     <div>You are about to accept an invite from:</div>
     <div class="user-mini">
-      <div>
-      {=#if $invite.creator.display_name |$name|=}
-        {$name}
-      {= #else =}
-        {$invite.creator.username}
-      {= /if =}
+      <img class="avatar" src="{$invite.creator.avatar_url}" />
+      <div class="details">
+        <div class="display_name">
+        {=#if $invite.creator.display_name |$name|=}
+          {$name}
+        {= #else =}
+          {$invite.creator.username}
+        {= /if =}
+        </div>
+        <div class="handle">@{$invite.creator.username}@{$invite.creator.host}</div>
       </div>
-      <div>@{$invite.creator.username}@{$invite.creator.host}</div>
     </div>
     {#if @isTag($invite.kind, community_owner) =}
       <div>This act will make your new account the owner of { %community.name }</div>

static/site.css

@@ -43,56 +43,78 @@ nav > ul > li.title > a {
 
 main {
   padding: 1em;
+  overflow: scroll;
+}
+
+.user-mini {
+  display: flex;
+  margin: 0.5em 0px;
+}
+
+.user-mini .avatar {
+  max-width: 3em;
+}
+.user-mini .details {
+  margin: 5px;
+}
+
+.user-mini .handle {
+  font-size: small;
 }
 
 form {
   display: flex;
   flex-direction: column;
   max-width: 400px;
-}
-.textinput {
-  display: inline-block;
-  padding: 6px;
-  border: solid 1px black;
-  border-radius: 8px;
-/*  max-width: 300px;*/
-}
-
-form {
   padding: 1em;
 }
-
 form > * {
   margin: 5px 0px;
 }
-
-form[action*=login] .textinput {
+form .textinput {
   display: flex;
 
+  padding: 6px;
+  border: solid 1px black;
+  border-radius: 8px;
   outline: solid 2px transparent;
   transition: outline 0.2s;
 }
-form[action*=login] .textinput input {
+form .textinput input {
   flex-grow: 1;
+  flex-basis: 3em;
+  width: 10px;
+  appearance: none;
+  border: none;
 }
-form[action*=login] .textinput:focus-within {
+form .textinput input:focus-visible{
+  outline: none;
+}
+form .textinput:focus-within {
   outline: solid 2px var(--theme-color);
 }
-form[action*=login] .textinput span.prefix,
-form[action*=login] .textinput span.suffix {
+form .textinput span.prefix {
   user-select: none;
   flex-basis: 1.5em;
   text-align: center;
 }
-.textinput > input {
-  appearance: none;
-  border: none;
-}
-.textinput > input:focus-visible{
-  outline: none;
+form .textinput span.suffix {
+  user-select: none;
+  flex-basis: 3em;
+  flex-grow: 1;
+  max-width: min-content;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
-.form-helpinfo {
+@media (max-width: 360px) {
+  form .textinput span.suffix {
+    display: none;
+  }
+}
+
+form .form-helpinfo {
   font-size: small;
 }