Scrollable team list

traque-front/components/list.jsx

@@ -0,0 +1,14 @@
+export function List({array, children}) {
+    // The elements of array have to be identified by a field id
+    return (
+        <div className='w-full h-full bg-gray-300 overflow-y-auto'>
+            <ul className="w-full p-1 divide-y-4 divide-gray-300">
+                {array.map((elem, i) => (
+                    <li className="w-full" key={elem.id}>
+                        {children(elem, i)}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}

traque-front/components/section.jsx

@@ -1,12 +1,14 @@
-export function Section({title, className, children}) {
+export function Section({title, outerClassName, innerClassName, children}) {
     return (
-        <div className={className}>
+        <div className={outerClassName}>
             <div className='w-full h-full flex flex-col shadow-2xl'>
                 <div className='w-full p-1 bg-custom-light-blue text-center'>
                     <h2 className="text-l">{title}</h2>
                 </div>
-                <div className='w-full h-full p-3 bg-white'>
-                    {children}
+                <div className='w-full flex-1 min-h-0 p-3 bg-white'>
+                    <div className={`w-full h-full ${innerClassName}`}>
+                        {children}
+                    </div>
                 </div>
             </div>
         </div>