SES-147 fixed css for mobile

SessionCompanion/SessionCompanion/ClientApp/src/app/components/abilities/abilities.component.ts

@@ -30,7 +30,7 @@ export class AbilitiesComponent implements OnInit {
       .pipe(first())
       .subscribe((characterId) => {
         this.characterService
-          .getCharacterStats(characterId)
+          .getCharacterStats(2)
           .pipe(first())
           .subscribe(
             (characterStats) => {

SessionCompanion/SessionCompanion/ClientApp/src/app/components/ability-card/ability-card.component.css

@@ -19,7 +19,13 @@
   padding-bottom: 15px;
 }
 
-@media (max-width: 468px) {
+@media (max-width: 365px) {
+  #main {
+    width: 315px;
+  }
+}
+
+@media (min-width: 365px) and (max-width: 468px) {
   #main {
     width: 340px;
   }
@@ -27,7 +33,7 @@
 
 @media (min-width: 468px) and (max-width: 768px) {
   #main {
-    width: 420px;
+    width: 410px;
   }
 }
 

SessionCompanion/SessionCompanion/ClientApp/src/app/components/player-dashboard/player-dashboard.component.css

@@ -41,7 +41,7 @@
 }
 
 .ability_card_container {
-  margin: 5%;
+  margin: 2%;
   display: flex;
   justify-content: center;
   align-items: center;

SessionCompanion/SessionCompanion/ClientApp/src/app/components/throws/throw-primary-ability/throw-primary-ability.component.css

@@ -2,6 +2,24 @@
   top: 50%;
 }
 
+.radio-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.radio-button {
+  padding: 3%;
+  border: 1px #e9cca7 solid;
+  border-radius: 10px;
+  margin-bottom: 5%;
+  font-size: 14px;
+  text-align: center;
+}
+
+.radio-button:hover {
+  opacity: 0.5;
+}
+
 ::ng-deep.mat-dialog-container {
   background-color: #102028;
   color: whitesmoke;
@@ -24,14 +42,33 @@
   color: orange;
 }
 
-@media (max-width: 468px) {
-  .throw-container {
-    width: 250px;
+@media (max-width: 365px) {
+  .content-throw-dialog {
+    height: 350px;
+  }
+  .radio-button {
+    padding: 5%;
+    font-size: 12px;
+  }
+  #main {
+    width: 320px;
+  }
+}
+
+@media (min-width: 365px) and (max-width: 468px) {
+  #main {
+    width: 340px;
+  }
+}
+
+@media (min-width: 468px) and (max-width: 768px) {
+  #main {
+    width: 410px;
   }
 }
 
 @media (min-width: 768px) {
-  .throw-container {
+  #main {
     width: 480px;
   }
 }
@@ -44,24 +81,6 @@
   margin-bottom: 5%;
 }
 
-.radio-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.radio-button {
-  padding: 5%;
-  border: 1px #e9cca7 solid;
-  border-radius: 10px;
-  margin-bottom: 5%;
-  font-size: 14px;
-  text-align: center;
-}
-
-.radio-button:hover {
-  opacity: 0.5;
-}
-
 .mat-divider--custom-style{
   background-color: #9e8b6e;
   margin-bottom: 20px;