d

src/components/AddLifter.tsx

@@ -39,48 +39,64 @@ const AddLifter: React.FC<AddLifterProps> = ({
     <form onSubmit={handleSubmit}>
       <fieldset>
         <legend>Add Lifter</legend>
-        <label>Full Name:</label>
-        <input
-          type="text"
-          value={name}
-          pattern="^[a-zA-Z]+([ ][a-zA-Z]+)*$"
-          title="Please enter a valid name (letters and spaces only)."
-          onChange={(e) => setName(e.target.value)}
-          required
-        />
-        <label>Squat (kg):</label>
-        <input
-          type="number"
-          value={squat}
-          min="0"
-          max="500"
-          step="2.5"
-          pattern="^[0-9]+(\\.[0-9]{1,2})?$"
-          onChange={(e) => setSquat(e.target.value)}
-          required
-        />
-        <label>Bench (kg):</label>
-        <input
-          type="number"
-          value={bench}
-          min="0"
-          max="500"
-          step="2.5"
-          pattern="^[0-9]+(\\.[0-9]{1,2})?$"
-          onChange={(e) => setBench(e.target.value)}
-          required
-        />
-        <label>Deadlift (kg):</label>
-        <input
-          type="number"
-          value={deadlift}
-          min="0"
-          max="500"
-          step="2.5"
-          pattern="^[0-9]+(\\.[0-9]{1,2})?$"
-          onChange={(e) => setDeadlift(e.target.value)}
-          required
-        />
+        <div className="col">
+          <label>Full Name:</label>
+          <input
+            type="text"
+            value={name}
+            pattern="^[a-zA-Z]+([ ][a-zA-Z]+)*$"
+            title="Please enter a valid name (letters and spaces only)."
+            onChange={(e) => setName(e.target.value)}
+            required
+          />
+        </div>
+        <div className="row">
+          <div className="col">
+            <label>Squat</label>
+            <input
+              type="number"
+              value={squat}
+              className="kg"
+              min="0"
+              max="500"
+              step="2.5"
+              placeholder="kg"
+              pattern="^[0-9]+(\\.[0-9]{1,2})?$"
+              onChange={(e) => setSquat(e.target.value)}
+              required
+            />
+          </div>
+          <div className="col">
+            <label>Bench Press</label>
+            <input
+              type="number"
+              value={bench}
+              className="kg"
+              min="0"
+              max="500"
+              step="2.5"
+              placeholder="kg"
+              pattern="^[0-9]+(\\.[0-9]{1,2})?$"
+              onChange={(e) => setBench(e.target.value)}
+              required
+            />
+          </div>
+          <div className="col">
+            <label>Deadlift</label>
+            <input
+              type="number"
+              value={deadlift}
+              className="kg"
+              min="0"
+              max="500"
+              step="2.5"
+              placeholder="kg"
+              pattern="^[0-9]+(\\.[0-9]{1,2})?$"
+              onChange={(e) => setDeadlift(e.target.value)}
+              required
+            />
+          </div>
+        </div>
         <button type="submit">Add Lifter</button>
       </fieldset>
     </form>

src/components/Records.tsx

@@ -24,7 +24,7 @@ const Records: React.FC<RecordsProps> = ({
 }) => {
   return (
     <>
-      <div className="records-header">
+      <div className="col">
         <h2>Records</h2>
         <nav>
           <ul>

src/index.css

@@ -14,16 +14,40 @@ li {
   padding: 0;
 }
 
-li,
-button {
+li {
+  display: flex;
+  justify-content: center;
+}
+
+.col {
   display: flex;
+  flex-direction: column;
   justify-content: center;
+  align-items: center;
 }
 
-.records-header {
+.row {
   display: flex;
   flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+form {
+  display: flex;
+  width: 100%;
+}
+
+fieldset {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: 20px;
+  padding: 10px;
+}
+
+.kg::placeholder {
+  text-align: right;
 }