fix challenge popup - closes #3878

app/views/challenge/mine.scala.html

@@ -12,7 +12,8 @@
 title = challengeTitle(c),
 side = Html(""),
 openGraph = challengeOpenGraph(c).some,
-moreJs = js(c, json, true)) {
+moreJs = js(c, json, true),
+moreCss = cssTag("challenge.css")) {
 <div class="lichess_game" id="challenge">
   <div class="lichess_board_wrap cg-512">
     <div class="lichess_overboard padded">

public/javascripts/challenge.js

@@ -44,6 +44,7 @@ window.onload = function() {
       lichess.userAutocomplete($input, {
         focus: 1,
         friend: 1,
+        tag: 'span',
         onSelect: function() {
           $input.parents('form').submit();
         }

public/stylesheets/board.css

@@ -333,22 +333,6 @@ div.lichess_overboard {
 div.lichess_overboard.padded {
   padding: 15px;
 }
-#challenge_await .spinner {
-  width: 90px;
-  height: 90px;
-}
-#ping_challenge .spinner {
-  width: 80px;
-  height: 80px;
-  margin-bottom: 20px;
-}
-#lichess_id_input {
-  margin-top: 10px;
-  width: 80%;
-  text-align: center;
-  font-size: 1.2em;
-  padding: 1em 0;
-}
 #promotion_choice {
   position: absolute;
   top: 0;

public/stylesheets/challenge.css

@@ -0,0 +1,19 @@
+#lichess_id_input {
+  margin-top: 10px;
+  width: 80%;
+  text-align: center;
+  font-size: 1.2em;
+  padding: 1em 0;
+}
+#ping_challenge .spinner {
+  width: 80px;
+  height: 80px;
+  margin-bottom: 20px;
+}
+.user-invite .friend-autocomplete {
+  border: 1px solid #ccc;
+  padding: 5px 8px;
+}
+body.dark .user-invite .friend-autocomplete {
+  border-color: #3d3d3d;
+}