Fixed some frontend issues

frontend/src/components/SignVideoGrid.tsx

@@ -19,7 +19,7 @@ const SignVideoGrid: React.FC<Props> = ({ sign, setCurrentVideo, currentVideo })
     }
 
     return (
-        <div className="grid grid-flow-col auto-cols-max gap-5 mt-5" >
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-5 mt-5" >
             {sign != null &&
                 <div className={`rounded-lg w-60 h-32 ${isHovered ? 'bg-gray-300' : 'bg-gray-200'} flex items-center justify-center ${isHovered ? 'text-6xl' : 'text-4xl'}`} onMouseEnter={() => {
                     setIsHovered(true);
@@ -35,7 +35,24 @@ const SignVideoGrid: React.FC<Props> = ({ sign, setCurrentVideo, currentVideo })
                 </div>
             }
             {sign &&
-                sign.sign_videos.map((vid, i) => <SignVideoThumbnail selected={currentVideo == i} sign_id={sign.id} sign_video={vid} handle_play={() => handleVideoClick(i)} />)
+                // show videos sorted, the non accepted videos must be at the top
+                sign.sign_videos.sort((a, b) => {
+                    if (a.approved && !b.approved) {
+                        return 1;
+                    } else if (!a.approved && b.approved) {
+                        return -1;
+                    } else {
+                        return 0;
+                    }
+                }
+                ).map((vid, i) => {
+                    return (
+                        <SignVideoThumbnail
+                            key={i}
+                            selected={currentVideo == i} sign_id={sign.id} sign_video={vid} handle_play={() => handleVideoClick(i)}
+                        />
+                    );
+                })
             }
         </div >
     );