Use 'text-wrap: balance' for text wrapping on overview and details

Co-authored-by: Mark McDowall <mark@mcdowall.ca>

(cherry picked from commit 160151c6e000c6620ba2e04ca6245317c5c9ba16)

azure-pipelines.yml

@@ -9,7 +9,7 @@ variables:
   testsFolder: './_tests'
   yarnCacheFolder: $(Pipeline.Workspace)/.yarn
   nugetCacheFolder: $(Pipeline.Workspace)/.nuget/packages
-  majorVersion: '0.4.4'
+  majorVersion: '0.4.5'
   minorVersion: $[counter('minorVersion', 1)]
   readarrVersion: '$(majorVersion).$(minorVersion)'
   buildName: '$(Build.SourceBranchName).$(readarrVersion)'

frontend/build/webpack.config.js

@@ -26,6 +26,7 @@ module.exports = (env) => {
   const config = {
     mode: isProduction ? 'production' : 'development',
     devtool: isProduction ? 'source-map' : 'eval-source-map',
+    target: 'web',
 
     stats: {
       children: false

frontend/src/Author/Details/AuthorDetailsHeader.css

@@ -54,6 +54,7 @@
 }
 
 .title {
+  text-wrap: balance;
   font-weight: 300;
   font-size: 50px;
   line-height: 60px;
@@ -127,6 +128,7 @@
   flex: 1 1 auto;
   margin-top: 8px;
   min-height: 0;
+  text-wrap: balance;
   font-size: $intermediateFontSize;
 }