feat: bigger "Events"

cutt/player.py

@@ -188,6 +188,7 @@ async def list_players(
             .join(PlayerTeamLink)
             .join(Team)
             .where(Team.id == team_id, P.disabled == False)
+            .order_by(P.display_name)
         ).all()
         if players:
             return [

src/App.css

@@ -722,6 +722,7 @@ button {
 }
 
 .events {
+  font-size: large;
   padding: 20px;
   ul > li {
     padding: 0;

src/TeamPanel.tsx

@@ -87,23 +87,22 @@ const TeamPanel = () => {
                 justifyContent: "center",
               }}
             >
-              {players &&
+              {players.map((p) => (
-                players.map((p) => (
+                <button
-                  <button
+                  className={
-                    className={
+                    "team-player " +
-                      "team-player " +
+                    p.gender +
-                      p.gender +
+                    (p.id === player.id ? " active-player" : "")
-                      (p.id === player.id ? " active-player" : "")
+                  }
-                    }
+                  key={p.id}
-                    key={p.id}
+                  onClick={() => {
-                    onClick={() => {
+                    setPlayer(p);
-                      setPlayer(p);
+                    setError({ ok: true, message: "" });
-                      setError({ ok: true, message: "" });
+                  }}
-                    }}
+                >
-                  >
+                  {p.display_name}
-                    {p.display_name}
+                </button>
-                  </button>
+              ))}
-                ))}
               <button
                 className="team-player new-player"
                 key="add-player"