improve inscription layout

src/components/ManageRegistration.vue

@@ -22,16 +22,20 @@
             <th>Email</th>
           </tr>
         </thead>
-        <tbody>
-          <tr v-for="b in inscriptions" :key="b.id">
-            <td @click="toggle(b.id)">
-              <i class="material-icons">{{ checkbox(b.id) }}</i>
-            </td>
-            <td @click="display(b.id)">{{ b.name }}, {{ b.surname }}</td>
-            <td @click="display(b.id)">{{ b.email }}</td>
-          </tr>
-        </tbody>
       </table>
+      <div class="table-container">
+        <table>
+          <tbody>
+            <tr v-for="b in inscriptions" :key="b.id">
+              <td @click="toggle(b.id)">
+                <i class="material-icons">{{ checkbox(b.id) }}</i>
+              </td>
+              <td @click="display(b.id)">{{ b.name }}, {{ b.surname }}</td>
+              <td @click="display(b.id)">{{ b.email }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
     <div class="benevole-preview">
       <div v-if="benevole">
@@ -203,6 +207,11 @@ export default defineComponent({
   margin-right: 4px;
   margin-bottom: 4px;
 }
+.table-container {
+  overflow-x: clip;
+  overflow-y: auto;
+  max-height: calc(100vh - 13.5rem);
+}
 table {
   max-width: 800px;
   width: calc(100vw - 690px);