From 2ff3a685fa20b17f20c61a053d237b495a52e637 Mon Sep 17 00:00:00 2001
From: Luigi Marini <lmarini@illinois.edu>
Date: Fri, 29 Jan 2021 14:06:21 -0600
Subject: [PATCH] Fixes #160. Use css `word-wrap: break-word;` where possible
 to break words that are too long. 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.

---
 CHANGELOG.md                                | 1 +
 app/views/collectionofdatasets.scala.html   | 2 +-
 app/views/datasets/listitem.scala.html      | 2 +-
 app/views/file.scala.html                   | 2 +-
 app/views/files/linkDownload.scala.html     | 2 +-
 app/views/files/listitem.scala.html         | 2 +-
 app/views/files/share.scala.html            | 2 +-
 app/views/spaces/spaceAllocation.scala.html | 2 +-
 conf/messages                               | 2 +-
 public/stylesheets/main.css                 | 4 ++++
 10 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7620fd34a..47dff6fd9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Fixed
 - 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
 
diff --git a/app/views/collectionofdatasets.scala.html b/app/views/collectionofdatasets.scala.html
index dcb4e88a5..a5cdcfa82 100644
--- a/app/views/collectionofdatasets.scala.html
+++ b/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">
diff --git a/app/views/datasets/listitem.scala.html b/app/views/datasets/listitem.scala.html
index b0453f078..cc4709c91 100644
--- a/app/views/datasets/listitem.scala.html
+++ b/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">
diff --git a/app/views/file.scala.html b/app/views/file.scala.html
index 3fc665bfe..1e3804727 100644
--- a/app/views/file.scala.html
+++ b/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.">
diff --git a/app/views/files/linkDownload.scala.html b/app/views/files/linkDownload.scala.html
index e218ed243..697eaa586 100644
--- a/app/views/files/linkDownload.scala.html
+++ b/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">
diff --git a/app/views/files/listitem.scala.html b/app/views/files/listitem.scala.html
index a4319413b..83cbb53f4 100644
--- a/app/views/files/listitem.scala.html
+++ b/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">
diff --git a/app/views/files/share.scala.html b/app/views/files/share.scala.html
index e4dfedadd..f99678ede 100644
--- a/app/views/files/share.scala.html
+++ b/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">
diff --git a/app/views/spaces/spaceAllocation.scala.html b/app/views/spaces/spaceAllocation.scala.html
index dbefc12ce..f68def0ef 100644
--- a/app/views/spaces/spaceAllocation.scala.html
+++ b/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) {
diff --git a/conf/messages b/conf/messages
index d142f5a26..862ebbfb3 100644
--- a/conf/messages
+++ b/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
diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css
index 583aacef5..d86877488 100644
--- a/public/stylesheets/main.css
+++ b/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;
 }