TD-4190:DIG702: Content becomes lost or obscured at low resolution or scrolling in 2 dimensions is required (reflow 320 x 256)

Author: Swapnamol

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/SelectResourceTypeContainer.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="lh-padding-fluid">
+    <div class="lh-padding-fluid select-resource-type">
         <div class="lh-container-xl">
             <h2 id="title-label" class="nhsuk-heading-l">Select a resource type</h2>
             <div v-if="!contributeResourceAVFlag" class="align-self-center">
@@ -53,3 +53,10 @@
         }
     });
 </script>
+<style lang="scss" scoped>
+    @use '../../../Styles/abstracts/all' as *;
+
+    .select-resource-type {
+       padding-left: 0.1rem !important;
+    }
+</style>

LearningHub.Nhs.WebUI/Scripts/vuesrc/mycontributions/mycontributions.vue

@@ -392,6 +392,7 @@
     @media (max-width: 768px) {
         .dropdown-toggle {
             display: block !important;
+            white-space: wrap !important;
         }
     }
 

LearningHub.Nhs.WebUI/Styles/sections/_all.scss

@@ -420,6 +420,10 @@ div.contribute {
       }
     }
   }
+  .contriburecontainer
+  {
+      margin-left : -100px;
+  }
 }
 
 /* end contribute*/

LearningHub.Nhs.WebUI/Views/ContributeResource/ContributeResource.cshtml

@@ -5,7 +5,7 @@
     @* <link href="https://amp.azure.net/libs/amp/2.3.8/skins/amp-default/azuremediaplayer.min.css" type="text/css" rel="stylesheet" asp-append-version="true" /> *@
 }
 
-    <div id="contributecontainer">
+<div id="contributecontainer" class="contriburecontainer">
         @* This empty <router-view> is populated by the Vue.js code *@
         <router-view :keep-user-session-alive-interval-seconds="@ViewBag.KeepUserSessionAliveIntervalSeconds"></router-view>
     </div>