From 71cd59b4d8d01b924b97093ff087e9359fc9e7ab Mon Sep 17 00:00:00 2001
From: Leane Schlundt <lhecht@techfak.de>
Date: Tue, 15 Oct 2024 11:59:51 +0200
Subject: [PATCH] Limit label tree info length

---
 .../js/projects/components/labelTreeListItem.vue     | 10 ++++------
 resources/assets/sass/_search.scss                   |  4 ++++
 resources/assets/sass/bootstrap/_labels.scss         |  4 ++++
 resources/views/label-trees/show/title.blade.php     | 12 ++++++++----
 resources/views/search/label-trees-content.blade.php |  2 +-
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/resources/assets/js/projects/components/labelTreeListItem.vue b/resources/assets/js/projects/components/labelTreeListItem.vue
index 8593b1bfa..b97dadd28 100644
--- a/resources/assets/js/projects/components/labelTreeListItem.vue
+++ b/resources/assets/js/projects/components/labelTreeListItem.vue
@@ -1,18 +1,16 @@
 <template>
-    <li class="list-group-item" @mouseenter="emitEnter">
+    <li class="list-group-item limit-text" @mouseenter="emitEnter">
         <h4 class="list-group-item-heading">
             <button v-if="editable" v-show="editing" type="button" class="btn btn-default btn-sm pull-right" title="Detach this label tree" @click="emitRemove"><i class="fa fa-trash"></i></button>
             <a :href="url" v-text="tree.name"></a>
         </h4>
-        <p v-if="tree.description" class="list-group-item-text limit-description" v-text="tree.description"></p>
+        <p v-if="tree.description" class="list-group-item-text" v-text="tree.description"></p>
     </li>
 </template>
 
 <style>
-.limit-description {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+.limit-text {
+    word-wrap: break-word;
 }
 </style>
 
diff --git a/resources/assets/sass/_search.scss b/resources/assets/sass/_search.scss
index 4e3e2eb51..adb47d869 100644
--- a/resources/assets/sass/_search.scss
+++ b/resources/assets/sass/_search.scss
@@ -46,3 +46,7 @@
 .federated-search-button {
     margin: 20px 0;
 }
+
+.limit-text {
+    word-wrap: break-word;
+}
diff --git a/resources/assets/sass/bootstrap/_labels.scss b/resources/assets/sass/bootstrap/_labels.scss
index 93c9d1906..72dadd7f5 100644
--- a/resources/assets/sass/bootstrap/_labels.scss
+++ b/resources/assets/sass/bootstrap/_labels.scss
@@ -56,3 +56,7 @@ h3, .h3 {
     font-size: 65%;
   }
 }
+
+.limit-text {
+  word-wrap: break-word;
+}
diff --git a/resources/views/label-trees/show/title.blade.php b/resources/views/label-trees/show/title.blade.php
index 2c3e75eaa..cdf71ec05 100644
--- a/resources/views/label-trees/show/title.blade.php
+++ b/resources/views/label-trees/show/title.blade.php
@@ -48,15 +48,18 @@
                 <input class="hidden" type="submit" name="submit">
             </div>
         </form>
-        <h2 v-else>
+        <div v-else class="limit-text">
+            <h2>
             <span v-text="name">{{$tree->name}}</span>
             <small class="label label-default label-hollow" @if(!$private) v-cloak @endif title="This label tree is private" v-if="isPrivate">Private</small>
             <span v-if="hasDescription" @if(!$tree->description) v-cloak @endif>
                 <br><small v-text="description">{{$tree->description}}</small>
             </span>
-        </h2>
+            </h2>
+        </div>
     @else
-        <h2>
+        <div class="limit-text">
+            <h2>
             {{$tree->name}}
             @if ($private)
                 <small class="label label-default label-hollow" title="This label tree is private">Private</small>
@@ -64,6 +67,7 @@
             @if ($tree->description)
                 <br><small>{{$tree->description}}</small>
             @endif
-        </h2>
+            </h2>
+        </div>
     @endcan
 </div>
diff --git a/resources/views/search/label-trees-content.blade.php b/resources/views/search/label-trees-content.blade.php
index 395b13073..87e44a949 100644
--- a/resources/views/search/label-trees-content.blade.php
+++ b/resources/views/search/label-trees-content.blade.php
@@ -3,7 +3,7 @@
     @include('search.partials.federated-search-toggle')
     <h2 class="lead">{{number_format($labelTreeResultCount)}} label tree results</h2>
 </div>
-<ul class="search-results">
+<ul class="search-results limit-text">
     @foreach ($results as $tree)
         <li>
             <small class="pull-right text-muted">Updated on {{$tree->updated_at->toFormattedDateString()}}</small>