Fixes #160. Use css word-wrap: break-word; where possible to break words that are too long. (#163)

This issue is obvious with files names that are very long.
Applied to fix to collectios, datasets, spaces titles as well where I saw an issue.
There might be more places where this could be applied.

Author: lmarini

CHANGELOG.md

@@ -18,6 +18,7 @@ script to fix this.
 - Files were not properly reindexed when the Move button was used to move a file into or out of a folder in a dataset. 
 - When adding a file to a dataset by URL, prioritize the URL `content-type` header over the file content type established
   by looking at the file name extension.
+- Wrap words across lines to stay within interface elements. [#160](https://github.com/clowder-framework/clowder/issues/160)
 
 ## 1.14.0 - 2021-01-07
 

app/views/collectionofdatasets.scala.html

@@ -89,7 +89,7 @@
 
 				</ol>
 				<div class="col-xs-12 collection-title" id="coll-title">
-					<h1 id ="collectiontitle" class="inline"><span class="glyphicon glyphicon-th-large"></span> @Html(collection.name)</h1>
+					<h1 id ="collectiontitle" class="inline break-word"><span class="glyphicon glyphicon-th-large"></span> @Html(collection.name)</h1>
 					@if(!collection.trash && Permission.checkPermission(Permission.EditCollection, ResourceRef(ResourceRef.collection, collection.id))) {
 						<h3 id="h-edit-title" class="hiddencomplete">
 							<a id="edit-title" href="javascript:updateTitle()" edit="Click to edit title">

app/views/datasets/listitem.scala.html

@@ -29,7 +29,7 @@
                     <div class="col-md-8 col-lg-8 col-sm-8">
                         <div class="row">
                             <div class="col-xs-12">
-                                <span class="h2"><a href="@(routes.Datasets.dataset(dataset.id))">@Html(dataset.name)</a></span>
+                                <span class="h2"><a href="@(routes.Datasets.dataset(dataset.id))" class="break-word">@Html(dataset.name)</a></span>
                             </div>
                         </div>
                         <div class="row">

app/views/file.scala.html

@@ -257,7 +257,7 @@
 			<div class="row">
 				<div id="file-name-div" class="file-title-div col-xs-12">
 					<div id="prf-file-name" class="text-left inline">
-						<h1 id="file-name-title" class="inline"> <span class="glyphicon glyphicon-file"></span> @Html(file.filename)</h1>
+						<h1 id="file-name-title" class="inline break-word"> <span class="glyphicon glyphicon-file"></span> @Html(file.filename)</h1>
 						@if(Permission.checkPermission(Permission.EditFile, ResourceRef(ResourceRef.file, file.id))) {
 							<div id="h-edit-file" class="hiddencomplete">
 								<a id ="edit-file" href="javascript:updateFileName()" title="Click to edit file name.">

app/views/files/linkDownload.scala.html

@@ -3,7 +3,7 @@
 @main("Download File") {
     <div class="row">
         <div class="col-md-12">
-            <h1 id="file-name-title" class="inline"><span class="glyphicon glyphicon-file"></span> @Html(file.filename)</h1>
+            <h1 id="file-name-title" class="inline break-word"><span class="glyphicon glyphicon-file"></span> @Html(file.filename)</h1>
         </div>
     </div>
     <div class="row">

app/views/files/listitem.scala.html

@@ -23,7 +23,7 @@
             </div>
 
             <div class="col-md-10 col-sm-10 col-lg-10">
-                <h3><a href="@(routes.Files.file(file.id, dataset, space, folder))">@file.filename</a></h3>
+                <h3><a href="@(routes.Files.file(file.id, dataset, space, folder))" class="break-word">@file.filename</a></h3>
                 <div class="row">
                     <div class="col-md-8 col-lg-8 col-sm-8">
                         <ul class="list-unstyled">

app/views/files/share.scala.html

@@ -3,7 +3,7 @@
 @main("Share") {
     <div class="row">
         <div class="col-md-12">
-            <h1 id="file-name-title" class="inline"><span class="glyphicon glyphicon-file"></span> @Html(file.filename)</h1>
+            <h1 id="file-name-title" class="inline  break-word"><span class="glyphicon glyphicon-file"></span> @Html(file.filename)</h1>
         </div>
     </div>
     <div class="row">

app/views/spaces/spaceAllocation.scala.html

@@ -37,7 +37,7 @@ <h4>@Messages("a.contains.b", Messages("spaces.title"), Messages("dataset.title"
                 </div>
                 <div class="col-md-10">
                     <div>
-                        <a href="@routes.Spaces.getSpace(s.id)" id='@s.id' class ="space">@s.name</a>
+                        <a href="@routes.Spaces.getSpace(s.id)" id='@s.id' class ="space-title">@s.name</a>
                     </div>
                     <div>
                         @if(resourceType == ResourceRef.dataset) {

conf/messages

@@ -12,7 +12,7 @@ trial.title = Trial {0}
 owner.label=Owner
 owner.title = {0}''s {1}
 owner.in.resource.title={0}''s {1} in {2}  <a href="{3}">{4}</a>
-resource.in.title= {0} in {1} <a href="{2}">{3}</a>
+resource.in.title= {0} in {1} <a href="{2}" class="break-word">{3}</a>
 list.title= {0}
 
 # Basic terms

public/stylesheets/main.css

@@ -579,6 +579,10 @@ p.error, span.error {
 	border-bottom: 1px solid #E1E1E8;
 }
 
+.space-title {
+	word-wrap: break-word;
+}
+
 .space-col-right {
 	padding-left: 50px;
 }