:beetle: Fix broken style by matcha.css

The height set-up is still fragile.

dev-front/src/App.css

@@ -18,12 +18,18 @@ header {
     /* Layout the left sidebar, main content and right sidebar */
     display: flex;
     flex-direction: row;
+    min-height: 68vh;
 }
 
 .mech-picker {
     width: 25%;
 }
 
+.mech-list {
+    overflow-y: scroll;
+    max-height: 68vh;
+}
+
 .mech-picker input {
     display: block;
 }
@@ -31,6 +37,7 @@ header {
 .custom-squad {
     /* Take the remaining width */
     flex-grow: 1;
+    justify-content: start;
 }
 
 .mech-members {
@@ -51,6 +58,7 @@ header {
 
 .squad-description {
     display: flex;
+    flex-grow: 1;
     flex-direction: column;
 }
 

dev-front/src/App.tsx

@@ -13,10 +13,8 @@ function App() {
                 <h1>Squad Composer</h1>
             </header>
             <main className='editor'>
-                <MechPicker observers={mechPickObservers}/>
-
                 <Squad pickObservers={mechPickObservers}/>
-
+                <MechPicker observers={mechPickObservers}/>
             </main>
             <footer>Squad Composer by DricomDragon</footer>
         </div>

dev-front/src/mech/MechPicker.tsx

@@ -18,7 +18,7 @@ function MechPicker({observers} : { observers: {[key: string]: MechObserver }})
             <h2>Mech picker</h2>
             <label htmlFor='search-mech-input'>Search mech</label>
             <input id='search-mech-input' type='text' placeholder='Mech name' value={searchText} onChange={event => setSearchText(event.target.value)}/>
-            <ul>
+            <ul className='mech-list'>
                 {mechData
                     .filter(mech => mech.name.toLowerCase().includes(searchText.toLocaleLowerCase()))
                     .map(mech => (