Fix vertical alignment and other frontend issues (#382)

frontend/src/components/brackets/brackets.tsx

@@ -82,7 +82,7 @@ function getRoundsGridCols(
           </Grid.Col>
         </Grid>
       </div>
-      <Group>{rounds}</Group>
+      <Group align="top">{rounds}</Group>
     </React.Fragment>
   );
 }

frontend/src/components/builder/builder.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Badge, Card, Grid, Group, Menu, Text, rem } from '@mantine/core';
+import { ActionIcon, Badge, Card, Group, Menu, Stack, Text, rem } from '@mantine/core';
 import { IconDots, IconPencil, IconTrash } from '@tabler/icons-react';
 import assert from 'assert';
 import React, { useState } from 'react';
@@ -153,7 +153,7 @@ function StageColumn({
     ));
 
   return (
-    <Grid.Col mb="1rem" span={{ sm: 6, lg: 4, xl: 3 }} key={stage.id}>
+    <Stack miw="24rem" align="top" key={stage.id}>
       <UpdateStageModal
         swrStagesResponse={swrStagesResponse}
         stage={stage}
@@ -206,7 +206,7 @@ function StageColumn({
         stage={stage}
         swrStagesResponse={swrStagesResponse}
       />
-    </Grid.Col>
+    </Stack>
   );
 }
 
@@ -234,13 +234,11 @@ export default function Builder({
     ));
 
   const button = (
-    <Grid.Col mb="1rem" span={{ sm: 6, lg: 4, xl: 4 }} key={-1}>
+    <Stack miw="24rem" align="top" key={-1}>
       <h4>
         <CreateStageButton tournament={tournament} swrStagesResponse={swrStagesResponse} />
       </h4>
-    </Grid.Col>
+    </Stack>
   );
-  const colsWithButton = cols.concat([button]);
-
-  return <Grid>{colsWithButton}</Grid>;
+  return cols.concat([button]);
 }

frontend/src/components/modals/create_stage_item.tsx

@@ -170,6 +170,7 @@ export function CreateStageItemModal({
           <Select
             withAsterisk
             label="Stage Type"
+            allowDeselect={false}
             data={[
               { value: 'ROUND_ROBIN', label: 'Round Robin' },
               { value: 'SINGLE_ELIMINATION', label: 'Single Elimination' },

frontend/src/pages/tournaments/[id]/schedule.tsx

@@ -128,7 +128,7 @@ function Schedule({
       matches={item.matches}
     />
   ));
-  return <Group>{columns}</Group>;
+  return <Group align="top">{columns}</Group>;
 }
 
 export default function SchedulePage() {

frontend/src/pages/tournaments/[id]/settings.tsx

@@ -96,6 +96,7 @@ function GeneralTournamentForm({
       />
 
       <Select
+        withAsterisk
         data={clubs.map((p) => ({ value: `${p.id}`, label: p.name }))}
         label="Club"
         placeholder="Pick a club for this tournament"

frontend/src/pages/tournaments/[id]/stages.tsx

@@ -1,4 +1,4 @@
-import { Container, Group } from '@mantine/core';
+import { Group } from '@mantine/core';
 import React from 'react';
 
 import Builder from '../../../components/builder/builder';
@@ -24,16 +24,16 @@ export default function StagesPage() {
 
   return (
     <TournamentLayout tournament_id={tournamentData.id}>
-      <Container size="1600px">
+      <Group grow mt="1rem" maw="30rem">
+        <PreviousStageButton
+          tournamentData={tournamentData}
+          swrStagesResponse={swrStagesResponse}
+        />
+        <NextStageButton tournamentData={tournamentData} swrStagesResponse={swrStagesResponse} />
+      </Group>
+      <Group mt="1rem" align="top">
         <Builder tournament={tournamentDataFull} swrStagesResponse={swrStagesResponse} />
-        <Group grow mt="1rem">
-          <PreviousStageButton
-            tournamentData={tournamentData}
-            swrStagesResponse={swrStagesResponse}
-          />
-          <NextStageButton tournamentData={tournamentData} swrStagesResponse={swrStagesResponse} />
-        </Group>
-      </Container>
+      </Group>
     </TournamentLayout>
   );
 }