From d9ac23fb266cad0e151e8067f7c72dc41bbe0794 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle
 <139135120+andrewwallacespeckle@users.noreply.github.com>
Date: Thu, 16 May 2024 12:56:33 +0200
Subject: [PATCH] bugfix(fe2): Coloring function disappears if parameter title
 is too long (#2255)

* Add truncation to filter name

* Use shortened model name in scene explorer

* Revert "Use shortened model name in scene explorer"

This reverts commit b86e1d8577ba1009462f68fb45840b8b1f66ec1a.

* Remove gap
---
 .../components/viewer/explorer/Filters.vue    | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/frontend-2/components/viewer/explorer/Filters.vue b/packages/frontend-2/components/viewer/explorer/Filters.vue
index de40437b88..bf45fdd2e4 100644
--- a/packages/frontend-2/components/viewer/explorer/Filters.vue
+++ b/packages/frontend-2/components/viewer/explorer/Filters.vue
@@ -3,18 +3,18 @@
     <template #title>Filtering</template>
     <template #actions>
       <div class="flex justify-between items-center w-full">
-        <div class="-mt-1">
-          <FormButton
-            v-tippy="'Change Filter'"
-            text
-            size="xs"
-            :icon-right="showAllFilters ? ChevronUpIcon : ChevronDownIcon"
-            class="capitalize"
-            @click="showAllFilters = !showAllFilters"
-          >
+        <FormButton
+          v-tippy="'Change Filter'"
+          text
+          size="xs"
+          :icon-right="showAllFilters ? ChevronUpIcon : ChevronDownIcon"
+          class="capitalize"
+          @click="showAllFilters = !showAllFilters"
+        >
+          <span class="max-w-20 md:max-w-36 truncate">
             {{ title.split('.').reverse()[0] || title || 'No Title' }}
-          </FormButton>
-        </div>
+          </span>
+        </FormButton>
         <div class="flex gap-1 divide-x divide-outline-3">
           <FormButton
             v-if="title !== 'Object Type'"