minor styling

frontend/src/Form.tsx

@@ -300,7 +300,9 @@ function MVPDnD({ user, teams, players }: PlayerInfoProps) {
         onSubmit={handleSubmit}
       />
       {loading ? (
+        <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 ? (
+        <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>
       ) : (
+        <div className="container">
           <progress className="progress is-primary" max="100"></progress>
+        </div>
       )}
     </div>
   );

frontend/src/TeamPanel.tsx

@@ -77,8 +77,9 @@ const TeamPanel = () => {
             <h2 className="subtitle">
               {activeTeam.location}, {activeTeam.country}
             </h2>
-            <div className="box">
-              <h2 className="title is-4">Players</h2>
+            <div className="panel">
+              <h2 className="panel-heading is-4">Players</h2>
+              <div className="panel-block">
                 {players ? (
                   <div className="buttons">
                     {players.map((p) => (
@@ -113,7 +114,9 @@ const TeamPanel = () => {
                 )}
               </div>
 
-            <form className="container block" onSubmit={handleSubmit}>
+              <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">
@@ -176,7 +179,9 @@ const TeamPanel = () => {
                       </div>
                     </div>
                     <div className="field">
-                <label className="label">number (optional)</label>
+                      <label className="label">
+                        number <small>(optional)</small>
+                      </label>
                       <div className="control">
                         <input
                           className="input"
@@ -190,7 +195,9 @@ const TeamPanel = () => {
                       </div>
                     </div>
                     <div className="field">
-                <label className="label">email (optional)</label>
+                      <label className="label">
+                        email <small>(optional)</small>
+                      </label>
                       <div className="control">
                         <input
                           className="input"
@@ -212,7 +219,8 @@ const TeamPanel = () => {
                         </p>
                       )}
                     </div>
-              <div className="field is-grouped">
+                  </div>
+                  <div className="field is-grouped is-grouped-centered">
                     <button
                       className={
                         "button is-light" +
@@ -232,6 +240,8 @@ const TeamPanel = () => {
                   </div>
                 </form>
               </div>
+            </div>
+          </div>
         </section>
         <section className="section">
           <div className="container">