From 7abe9dce3da37dbd1baba9550cb7d2be055977e5 Mon Sep 17 00:00:00 2001
From: julius <julius@0124816.xyz>
Date: Fri, 19 Dec 2025 12:31:58 +0100
Subject: [PATCH] minor styling

---
 frontend/src/Form.tsx      |  12 +-
 frontend/src/TeamPanel.tsx | 304 +++++++++++++++++++------------------
 2 files changed, 166 insertions(+), 150 deletions(-)

diff --git a/frontend/src/Form.tsx b/frontend/src/Form.tsx
index 3c8650a..820b0b6 100644
--- a/frontend/src/Form.tsx
+++ b/frontend/src/Form.tsx
@@ -300,7 +300,9 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
         onSubmit={handleSubmit}
       />
       {loading ? (
-        <progress className="progress is-primary" max="100"></progress>
+        <div className="container">
+          <progress className="progress is-primary" max="100"></progress>
+        </div>
       ) : (
         <div className="columns container is-mobile is-1-mobile">
           <div className="column">
@@ -420,7 +422,9 @@ function ChemistryDnDMobile({ user, teams, players }: PlayerInfoProps) {
         onSubmit={handleSubmit}
       />
       {loading ? (
-        <progress className="progress is-primary" max="100"></progress>
+        <div className="container">
+          <progress className="progress is-primary" max="100"></progress>
+        </div>
       ) : (
         <div className="columns container is-multiline is-mobile is-1-mobile">
           <div className="column is-full is-flex is-justify-content-center">
@@ -521,7 +525,9 @@ export default function Rankings() {
           <TypeDnD {...{ user, teams, players }} />
         </TabController>
       ) : (
-        <progress className="progress is-primary" max="100"></progress>
+        <div className="container">
+          <progress className="progress is-primary" max="100"></progress>
+        </div>
       )}
     </div>
   );
diff --git a/frontend/src/TeamPanel.tsx b/frontend/src/TeamPanel.tsx
index e0d865c..72c0021 100644
--- a/frontend/src/TeamPanel.tsx
+++ b/frontend/src/TeamPanel.tsx
@@ -77,160 +77,170 @@ const TeamPanel = () => {
             <h2 className="subtitle">
               {activeTeam.location}, {activeTeam.country}
             </h2>
-            <div className="box">
-              <h2 className="title is-4">Players</h2>
-              {players ? (
-                <div className="buttons">
-                  {players.map((p) => (
+            <div className="panel">
+              <h2 className="panel-heading is-4">Players</h2>
+              <div className="panel-block">
+                {players ? (
+                  <div className="buttons">
+                    {players.map((p) => (
+                      <button
+                        className={
+                          "button is-primary is-light " +
+                          p.gender +
+                          (p.id === player.id ? " is-focused is-active" : "")
+                        }
+                        key={p.id}
+                        onClick={() => {
+                          setPlayer(p);
+                          setError({ ok: true, message: "" });
+                        }}
+                      >
+                        {p.display_name}
+                      </button>
+                    ))}
+                    <button
+                      className="button is-success is-light new-player"
+                      key="add-player"
+                      onClick={() => {
+                        setPlayer(newPlayerTemplate);
+                        setError({ ok: true, message: "" });
+                      }}
+                    >
+                      +
+                    </button>
+                  </div>
+                ) : (
+                  <span className="loader" />
+                )}
+              </div>
+
+              <div className="panel-block">
+                <form onSubmit={handleSubmit}>
+                  <div className="field is-grouped is-grouped-multiline">
+                    <div className="field">
+                      <label className="label">name</label>
+                      <div className="control">
+                        <input
+                          className="input"
+                          type="text"
+                          required
+                          value={player.display_name}
+                          onChange={(e) => {
+                            setPlayer({
+                              ...player,
+                              ...(player.id === 0 && {
+                                username: e.target.value
+                                  .toLowerCase()
+                                  .replace(/\W/g, ""),
+                              }),
+                              display_name: e.target.value,
+                            });
+                            setError({ ok: true, message: "" });
+                          }}
+                        />
+                      </div>
+                    </div>
+                    <div className="field">
+                      <label className="label">username</label>
+                      <div className="control">
+                        <input
+                          className="input"
+                          type="text"
+                          required
+                          disabled={player.id !== 0}
+                          value={player.username}
+                          onChange={(e) => {
+                            setPlayer({ ...player, username: e.target.value });
+                            setError({ ok: true, message: "" });
+                          }}
+                        />
+                      </div>
+                    </div>
+                    <div className="field">
+                      <label className="label">gender</label>
+                      <div className="control">
+                        <div className="select">
+                          <select
+                            name="gender"
+                            value={player.gender}
+                            onChange={(e) => {
+                              setPlayer({
+                                ...player,
+                                gender: e.target.value as Gender,
+                              });
+                              setError({ ok: true, message: "" });
+                            }}
+                          >
+                            <option value={undefined}></option>
+                            <option value="fmp">FMP</option>
+                            <option value="mmp">MMP</option>
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="field">
+                      <label className="label">
+                        number <small>(optional)</small>
+                      </label>
+                      <div className="control">
+                        <input
+                          className="input"
+                          type="text"
+                          value={player.number || ""}
+                          onChange={(e) => {
+                            setPlayer({ ...player, number: e.target.value });
+                            setError({ ok: true, message: "" });
+                          }}
+                        />
+                      </div>
+                    </div>
+                    <div className="field">
+                      <label className="label">
+                        email <small>(optional)</small>
+                      </label>
+                      <div className="control">
+                        <input
+                          className="input"
+                          type="email"
+                          value={player.email || ""}
+                          onChange={(e) => {
+                            setPlayer({ ...player, email: e.target.value });
+                            setError({ ok: true, message: "" });
+                          }}
+                        />
+                      </div>
+                      {error?.message && (
+                        <p
+                          className={
+                            "help" + (error.ok ? " is-success" : " is-danger")
+                          }
+                        >
+                          {error.message}
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                  <div className="field is-grouped is-grouped-centered">
                     <button
                       className={
-                        "button is-primary is-light " +
-                        p.gender +
-                        (p.id === player.id ? " is-focused is-active" : "")
+                        "button is-light" +
+                        (player.id === 0 ? " is-success" : " is-link")
                       }
-                      key={p.id}
-                      onClick={() => {
-                        setPlayer(p);
-                        setError({ ok: true, message: "" });
-                      }}
                     >
-                      {p.display_name}
+                      {player.id === 0 ? "add player" : "modify player"}
                     </button>
-                  ))}
-                  <button
-                    className="button is-success is-light new-player"
-                    key="add-player"
-                    onClick={() => {
-                      setPlayer(newPlayerTemplate);
-                      setError({ ok: true, message: "" });
-                    }}
-                  >
-                    +
-                  </button>
-                </div>
-              ) : (
-                <span className="loader" />
-              )}
-            </div>
-
-            <form className="container block" onSubmit={handleSubmit}>
-              <div className="field">
-                <label className="label">name</label>
-                <div className="control">
-                  <input
-                    className="input"
-                    type="text"
-                    required
-                    value={player.display_name}
-                    onChange={(e) => {
-                      setPlayer({
-                        ...player,
-                        ...(player.id === 0 && {
-                          username: e.target.value
-                            .toLowerCase()
-                            .replace(/\W/g, ""),
-                        }),
-                        display_name: e.target.value,
-                      });
-                      setError({ ok: true, message: "" });
-                    }}
-                  />
-                </div>
-              </div>
-              <div className="field">
-                <label className="label">username</label>
-                <div className="control">
-                  <input
-                    className="input"
-                    type="text"
-                    required
-                    disabled={player.id !== 0}
-                    value={player.username}
-                    onChange={(e) => {
-                      setPlayer({ ...player, username: e.target.value });
-                      setError({ ok: true, message: "" });
-                    }}
-                  />
-                </div>
-              </div>
-              <div className="field">
-                <label className="label">gender</label>
-                <div className="control">
-                  <div className="select">
-                    <select
-                      name="gender"
-                      value={player.gender}
-                      onChange={(e) => {
-                        setPlayer({
-                          ...player,
-                          gender: e.target.value as Gender,
-                        });
-                        setError({ ok: true, message: "" });
-                      }}
-                    >
-                      <option value={undefined}></option>
-                      <option value="fmp">FMP</option>
-                      <option value="mmp">MMP</option>
-                    </select>
+                    {player.id !== 0 && (
+                      <button
+                        className="button is-danger is-light"
+                        onClick={handleDisable}
+                      >
+                        remove player
+                      </button>
+                    )}
                   </div>
-                </div>
+                </form>
               </div>
-              <div className="field">
-                <label className="label">number (optional)</label>
-                <div className="control">
-                  <input
-                    className="input"
-                    type="text"
-                    value={player.number || ""}
-                    onChange={(e) => {
-                      setPlayer({ ...player, number: e.target.value });
-                      setError({ ok: true, message: "" });
-                    }}
-                  />
-                </div>
-              </div>
-              <div className="field">
-                <label className="label">email (optional)</label>
-                <div className="control">
-                  <input
-                    className="input"
-                    type="email"
-                    value={player.email || ""}
-                    onChange={(e) => {
-                      setPlayer({ ...player, email: e.target.value });
-                      setError({ ok: true, message: "" });
-                    }}
-                  />
-                </div>
-                {error?.message && (
-                  <p
-                    className={
-                      "help" + (error.ok ? " is-success" : " is-danger")
-                    }
-                  >
-                    {error.message}
-                  </p>
-                )}
-              </div>
-              <div className="field is-grouped">
-                <button
-                  className={
-                    "button is-light" +
-                    (player.id === 0 ? " is-success" : " is-link")
-                  }
-                >
-                  {player.id === 0 ? "add player" : "modify player"}
-                </button>
-                {player.id !== 0 && (
-                  <button
-                    className="button is-danger is-light"
-                    onClick={handleDisable}
-                  >
-                    remove player
-                  </button>
-                )}
-              </div>
-            </form>
+            </div>
           </div>
         </section>
         <section className="section">