Client - style update

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue

@@ -104,8 +104,17 @@
 
 <style lang="scss" scoped>
   @import '~@/scss/base';
+  #workout-map {
     .leaflet-container {
       height: 400px;
       width: 600px;
     }
+
+    @media screen and (max-width: $small-limit) {
+      .leaflet-container {
+        width: 100%;
+        height: 300px;
+      }
+    }
+  }
 </style>

fittrackee_client/src/components/Workout/WorkoutDetail/index.vue

@@ -81,7 +81,9 @@
 <style lang="scss" scoped>
   @import '~@/scss/base';
   .workout-detail {
+    display: flex;
     ::v-deep(.card) {
+      width: 100%;
       .card-title {
         display: flex;
         justify-content: space-between;

fittrackee_client/src/views/Workout.vue

@@ -1,11 +1,12 @@
 <template>
   <div id="workout">
+    <div class="container">
       <div class="workout-loading" v-if="workout.loading">
         <div class="loading">
           <Loader />
         </div>
       </div>
-    <div v-else class="container">
+      <div v-else class="workout-container">
         <div v-if="workout.workout.id">
           <WorkoutDetail
             v-if="sports.length > 0"
@@ -14,11 +15,12 @@
             :authUser="authUser"
           />
         </div>
-      <div class="container" v-else>
+        <div v-else>
           <NotFound target="WORKOUT" />
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -66,9 +68,16 @@
 <style lang="scss" scoped>
   @import '~@/scss/base';
   #workout {
+    display: flex;
+    .container {
+      width: 100%;
+      padding: 0;
+      .workout-container {
+        width: 100%;
+      }
       .workout-loading {
         height: $app-height;
-
+        width: 100%;
         .loading {
           display: flex;
           align-items: center;
@@ -76,4 +85,5 @@
         }
       }
     }
+  }
 </style>