SF-3487 Show language codes on mobile when configuring sources (#3345)

Author: Nateowami

src/SIL.XForge.Scripture/ClientApp/src/app/translate/draft-generation/draft-sources/draft-sources.component.scss

@@ -7,13 +7,13 @@
   grid-row-gap: 1em;
   align-items: start;
   grid-template-columns: 1fr 2fr;
-  grid-template-areas: 'title title' 'accordion overview' 'codes codes' 'footer footer';
+  grid-template-areas: 'title title' 'accordion overview' 'confirmation confirmation' 'footer footer';
 }
 
 @include breakpoints.media-breakpoint-down(lg) {
   :host {
-    grid-template-columns: auto;
-    grid-template-areas: 'title' 'accordion' 'codes' 'footer';
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: 'title' 'accordion' 'overview' 'confirmation' 'footer';
   }
 }
 
@@ -121,6 +121,7 @@ strong {
 
 .project-name {
   font-size: 1.1em;
+  word-wrap: break-word;
 }
 
 .language-code {
@@ -191,13 +192,6 @@ strong {
 
 // small devices only
 @include breakpoints.media-breakpoint-down(lg) {
-  :host {
-    grid-template-columns: auto;
-  }
-
-  .overview {
-    display: none;
-  }
   .draft-sources-stepper {
     width: unset;
   }
@@ -208,7 +202,7 @@ strong {
 }
 
 .confirm-language-codes {
-  grid-area: codes;
+  grid-area: confirmation;
 }
 
 :host:has(.saving) > :not(.saving):not(h1) {