fix mobil prfilen

src/public_training.css

@@ -976,7 +976,7 @@ button {
     align-items: center;
     flex-direction: row;
     gap: 8px;
-    padding: 6px 2px 12px;
+    padding: 4px 2px 8px;
   }
 
   .profile-brand {
@@ -986,8 +986,8 @@ button {
 
   .profile-brand img,
   .profile-brand-mark {
-    width: 38px;
+    width: 32px;
-    height: 38px;
+    height: 32px;
     border-radius: 10px;
   }
 
@@ -1006,7 +1006,7 @@ button {
   }
 
   .profile-hero {
-    padding: 14px;
+    padding: 10px;
     border-radius: 14px;
   }
 
@@ -1022,7 +1022,8 @@ button {
 
   .profile-hero h1 {
     margin: 5px 0;
-    font-size: clamp(1.45rem, 8vw, 2.1rem);
+    font-size: clamp(1.25rem, 5.6vw, 1.65rem);
+    overflow-wrap: anywhere;
   }
 
   .profile-meta {
@@ -1046,8 +1047,8 @@ button {
   .profile-motivation-grid,
   .profile-growth-grid,
   .profile-grid {
-    gap: 7px;
+    gap: 6px;
-    margin-top: 8px;
+    margin-top: 6px;
   }
 
   .profile-card {
@@ -1055,7 +1056,7 @@ button {
   }
 
   .profile-stat {
-    padding: 9px 10px;
+    padding: 7px 9px;
   }
 
   .profile-stat span,
@@ -1072,7 +1073,7 @@ button {
   .profile-credit-card,
   .profile-challenge-card,
   .profile-growth-card {
-    padding: 11px;
+    padding: 9px;
   }
 
   .profile-credit-card > p,
@@ -1125,15 +1126,15 @@ button {
 
   .profile-card-head {
     gap: 8px;
-    padding: 10px 11px;
+    padding: 8px 9px;
   }
 
   .profile-card-head h2 {
-    font-size: 0.82rem;
+    font-size: 0.78rem;
   }
 
   .profile-card-body {
-    padding: 11px;
+    padding: 9px;
   }
 
   .profile-level-row {
@@ -1165,7 +1166,7 @@ button {
 
   .profile-timer {
     margin: 8px 0;
-    font-size: clamp(2rem, 11vw, 3rem);
+    font-size: clamp(1.8rem, 8vw, 2.4rem);
   }
 
   .profile-timer-phase,
@@ -1190,7 +1191,7 @@ button {
   .profile-performance,
   .profile-goals,
   .profile-disclosure {
-    margin-top: 8px !important;
+    margin-top: 6px !important;
   }
 
   .profile-chart-card .profile-card-head p {
@@ -1203,7 +1204,7 @@ button {
   }
 
   .profile-pace-chart svg {
-    max-height: 115px;
+    max-height: 100px;
   }
 
   .profile-chart-labels {
@@ -1275,6 +1276,40 @@ button {
     padding: 7px 8px;
     font-size: 0.65rem;
   }
+  .profile-goals {
+    gap: 6px;
+  }
+
+  .profile-goal {
+    padding: 9px;
+  }
+
+  .profile-goal h3 {
+    font-size: 0.85rem;
+  }
+
+  .profile-goal h3,
+  .profile-goal p,
+  .profile-goal-row {
+    margin-bottom: 6px;
+  }
+
+  .profile-progress {
+    height: 5px;
+  }
+
+  .profile-disclosure > summary {
+    min-height: 44px;
+  }
+
+  .profile-timer-setup input,
+  .profile-marker-form input,
+  .profile-marker-form select,
+  .profile-class-select select {
+    min-height: 40px;
+    font-size: 1rem;
+  }
+
 }
 
 @media (max-width: 360px) {
@@ -1292,3 +1327,25 @@ button {
     grid-template-columns: 1fr;
   }
 }
+
+@media (min-width: 380px) and (max-width: 620px) {
+  .profile-achievements {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .profile-achievement {
+    align-items: flex-start;
+    gap: 5px;
+    padding: 6px;
+  }
+
+  .profile-achievement > span {
+    width: 23px;
+    height: 23px;
+  }
+
+  .profile-achievement > div {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+}