fix layout loading

www/app/[domain]/transcripts/[transcriptId]/correct/participantList.tsx

@@ -323,15 +323,18 @@ const ParticipantList = ({
   return (
     <div className="h-full" onClick={clearSelection}>
       <div onClick={preventClick}>
-        <div className="grid grid-cols-2 gap-2 mb-2">
+        <div className="grid grid-cols-7 gap-2 mb-2">
           <input
             ref={inputRef}
             onChange={changeParticipantInput}
             value={participantInput}
-            className="border border-blue-400 p-1"
+            className="border col-span-3 border-blue-400 p-1"
           />
-          {action && (
-            <button onClick={doAction} className="p-2 bg-blue-200 w-full">
+          {action ? (
+            <button
+              onClick={doAction}
+              className="p-2 bg-blue-200 w-full col-span-3"
+            >
               [
               <FontAwesomeIcon
                 icon={faArrowTurnDown}
@@ -339,9 +342,9 @@ const ParticipantList = ({
               />
               ]{" " + action}
             </button>
+          ) : (
+            <div className="col-span-3" />
           )}
-        </div>
-
           {loading ||
             participants.loading ||
             (topicWithWords.loading && (
@@ -350,6 +353,8 @@ const ParticipantList = ({
                 className="animate-spin-slow text-gray-300 h-8"
               />
             ))}
+        </div>
+
         {participants.response && (
           <ul>
             {participants.response.map((participant: Participant) => (