From 5d47c5d9680f1e54c9a25007fbbe75b0de8de668 Mon Sep 17 00:00:00 2001
From: Sara <sara@monadical.com>
Date: Wed, 13 Dec 2023 16:50:55 +0100
Subject: [PATCH] fix layout loading

---
 .../correct/participantList.tsx               | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/www/app/[domain]/transcripts/[transcriptId]/correct/participantList.tsx b/www/app/[domain]/transcripts/[transcriptId]/correct/participantList.tsx
index fe06653e..ab05c980 100644
--- a/www/app/[domain]/transcripts/[transcriptId]/correct/participantList.tsx
+++ b/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,17 +342,19 @@ const ParticipantList = ({
               />
               ]{" " + action}
             </button>
+          ) : (
+            <div className="col-span-3" />
           )}
+          {loading ||
+            participants.loading ||
+            (topicWithWords.loading && (
+              <FontAwesomeIcon
+                icon={faSpinner}
+                className="animate-spin-slow text-gray-300 h-8"
+              />
+            ))}
         </div>
 
-        {loading ||
-          participants.loading ||
-          (topicWithWords.loading && (
-            <FontAwesomeIcon
-              icon={faSpinner}
-              className="animate-spin-slow text-gray-300 h-8"
-            />
-          ))}
         {participants.response && (
           <ul>
             {participants.response.map((participant: Participant) => (