FIX: Map Layer Ellipsis not always clickable based on title of map (#9140)

* Prevent overflow of long layer names [#8745]

* Fix formatting [#8745]

Author: GeoSander

web-ui/src/main/resources/catalog/components/viewer/layermanager/partials/layermanager.html

@@ -11,11 +11,15 @@
 </ul>
 <ul class="list-group">
   <li class="list-group-item list-group-item-warning" data-ng-repeat="l in failedLayers">
-    <h4 class="list-group-item-heading">
-      <i class="fa fa-warning text-warning"></i>
-      &nbsp; {{l.name}}
-
-      <a class="pull-right gn-close-btn" ng-click="removeFailed(l)">
+    <h4 class="list-group-item-heading gn-break-anywhere flex-row">
+      <i class="fa fa-warning text-warning flex-self-center"></i>
+      <span class="flex-spacer"></span>
+      <span class="flex-self-center">{{l.name}}</span>
+      <span class="flex-spacer"></span>
+      <a
+        class="gn-close-btn flex-self-center gn-padding-vertical-sm"
+        ng-click="removeFailed(l)"
+      >
         <i class="fa fa-times"></i>
       </a>
     </h4>

web-ui/src/main/resources/catalog/components/viewer/layermanager/partials/layermanageritem.html

@@ -3,7 +3,7 @@
     class="flex-row width-100 flex-align-stretch"
     data-ng-class="{'active': layer.showInfo}"
   >
-    <div class="flex-col">
+    <div class="flex-self-center">
       <a
         href=""
         class="btn btn-sm btn-link gn-layer-radio"
@@ -16,7 +16,7 @@
         ></i>
       </a>
     </div>
-    <div class="flex-col">
+    <div class="flex-self-center">
       <input
         type="checkbox"
         id="layer-{{$index}}"
@@ -27,31 +27,29 @@
 
     <div class="flex-spacer"></div>
 
-    <div class="flex-col flex-grow">
-      <div class="width-100 flex-grow">
-        <label
-          class="gn-map-layer"
-          for="layer-{{$index}}"
-          data-ng-class="{'gn-map-layer-selected': layer.showInfo}"
+    <div class="flex-self-center flex-grow gn-break-anywhere">
+      <label
+        class="gn-map-layer"
+        for="layer-{{$index}}"
+        data-ng-class="{'gn-map-layer-selected': layer.showInfo}"
+      >
+        <span
+          class="clickable"
+          data-ng-class="layer.get('errors').length > 0 ? 'text-danger' : ''"
+          title="{{layer.get('label')}}"
         >
+          {{layer.get('layerTitleFromMetadata') || layer.get('label')}}
           <span
-            class="clickable"
-            data-ng-class="layer.get('errors').length > 0 ? 'text-danger' : ''"
-            title="{{layer.get('label')}}"
-          >
-            {{layer.get('layerTitleFromMetadata') || layer.get('label')}}
-            <span
-              ><em>
-                {{layer.get('currentStyle') ? '(' + (layer.get('currentStyle').Title ||
-                layer.get('currentStyle').Name) + ')' : ''}}
-              </em>
-            </span>
+            ><em>
+              {{layer.get('currentStyle') ? '(' + (layer.get('currentStyle').Title ||
+              layer.get('currentStyle').Name) + ')' : ''}}
+            </em>
           </span>
-        </label>
-      </div>
+        </span>
+      </label>
     </div>
 
-    <div class="flex-col flex-self-center">
+    <div class="flex-self-center gn-padding-vertical-sm">
       <div class="dropdown dropdown-left">
         <button
           class="btn btn-default dropdown-toggle"

web-ui/src/main/resources/catalog/style/gn.less

@@ -221,6 +221,10 @@ a {
   word-wrap: break-word;
   word-break: break-word;
 }
+.gn-break-anywhere {
+  word-break: break-word;
+  overflow-wrap: anywhere; // breaks long strings if word break is not working out
+}
 .gn-break-all {
   word-break: break-all;
 }

web-ui/src/main/resources/catalog/style/gn_viewer.less

@@ -6,7 +6,8 @@
 @gn-popup-max-width: 1200px;
 
 [data-gn-layer-styles] {
-  word-break: break-all;
+  word-break: break-word;
+  overflow-wrap: anywhere; // breaks long "unbreakable" strings if necessary
 }
 
 [gn-main-viewer],
@@ -391,6 +392,10 @@
         }
       }
     }
+    //li.list-group-item.list-group-item-warning {
+    //  display: flex;
+    //  flex-wrap: wrap;
+    //}
     .gn-facet-container {
       .list-group-item {
         border: 0;
@@ -454,7 +459,6 @@
       }
     }
     h4 {
-      margin: 1em 0 0 0;
       font-size: 16px;
     }
     h5 {

web-ui/src/main/resources/catalog/views/default/less/gn_view.less

@@ -31,6 +31,10 @@
 .gn-padding-left-sm {
   padding-left: @gn-spacing-sm !important;
 }
+.gn-padding-vertical-sm {
+  padding-top: @gn-spacing-sm !important;
+  padding-bottom: @gn-spacing-sm !important;
+}
 // ----- large
 .gn-padding-top-lg {
   padding-top: @gn-spacing-lg !important;