make coach pages a bit responsive

app/views/coach/index.scala.html

@@ -1,7 +1,7 @@
 @(pager: Paginator[lila.coach.Coach.WithUser], order: lila.coach.CoachPager.Order)(implicit ctx: Context)
 
 @side = {
-<div class="coach-intro">
+<div class="coach-intro coach-side">
   <img src="@staticUrl("images/icons/certification.svg")" class="certification" />
   <h2>Certified coaches</h2>
   <p>
@@ -16,7 +16,7 @@
     make your choice and enjoy learning chess!
   </p>
 </div>
-<div class="coach-add">
+<div class="coach-add coach-side">
   <p>
     Are you a great chess coach?<br />
     Do you want to be part of this list?<br />

app/views/coach/reviewForm.scala.html

@@ -1,6 +1,6 @@
 @(c: lila.coach.Coach.WithUser, approval: Boolean)(implicit ctx: Context)
 
-<div class="review-form">
+<div class="review-form coach-side">
   @if(approval) {
   <div class="approval">
     <p>Thank you for the review!</p>

app/views/coach/reviews.scala.html

@@ -1,7 +1,7 @@
 @(c: lila.coach.Coach.WithUser, reviews: lila.coach.CoachReview.Reviews)(implicit ctx: Context)
 
 @if(reviews.list.nonEmpty) {
-<div class="reviews">
+<div class="reviews coach-side">
   <h2>@pluralize("Player review", reviews.list.size)</h2>
   @reviews.list.map { r =>
   <div class="review">

public/stylesheets/coach.css

@@ -178,6 +178,17 @@ body.dark .coach .studies h1 {
   flex: 0 0;
 }
 
+.coach-side {
+  margin: 50px 0 0 -35px;
+  width: 226px;
+}
+@media (max-width: 1084px) {
+  .coach-side {
+    margin-left: 0!important;
+    width: 196px!important;
+  }
+}
+
 /* review score */
 .br-widget {
   white-space: nowrap;

public/stylesheets/coachList.css

@@ -9,7 +9,7 @@
   white-space: nowrap;
   margin-right: 20px;
 }
-.coach-intro {
+.coach-side {
   margin: 50px 0 0 -35px;
   width: 226px;
   text-align: center;
@@ -30,9 +30,6 @@
   font-size: 1.1em;
 }
 .coach-add {
-  margin: 50px 0 0 -35px;
-  width: 226px;
-  text-align: center;
   margin-top: 20px;
   border-top: 1px solid #ccc;
   padding-top: 20px;
@@ -105,7 +102,17 @@
   text-align: center;
   border-top: 1px solid #ccc;
 }
+@media (max-width: 1084px) {
+  .coach-side {
+    margin-left: 0!important;
+    width: 196px!important;
+  }
+  .coach-intro h2 {
+    font-size: 1.75em;
+  }
+}
 body.dark .coaches .coach,
+body.dark .coach-add,
 body.dark .coaches .few_results {
   border-color: #3d3d3d;
 }