Merge pull request galaxyproject#22094 from dannon/fix/long-history-name-overflow

Fix long history names pushing items off panel

Author: ahmedhamidawan

client/src/components/Common/Heading.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faAngleDoubleDown, faAngleDoubleUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { computed } from "vue";
+import { computed, nextTick, onMounted, onUpdated, ref } from "vue";
 
 import type { IconLike } from "@/components/icons/galaxyIcons";
 
@@ -21,6 +21,7 @@ interface Props {
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "text";
     icon?: IconLike;
     truncate?: boolean;
+    clamp?: number;
     collapse?: "open" | "closed" | "none";
 }
 
@@ -52,6 +53,34 @@ const element = computed(() => {
     }
     return "h1";
 });
+
+const headingRef = ref<HTMLElement | null>(null);
+const isClamped = ref(false);
+
+function checkClamped() {
+    if (headingRef.value && props.clamp) {
+        isClamped.value = headingRef.value.scrollHeight > headingRef.value.clientHeight;
+    } else {
+        isClamped.value = false;
+    }
+}
+
+const clampTooltip = computed(() => {
+    if (isClamped.value) {
+        return headingRef.value?.textContent?.trim() ?? null;
+    }
+    return null;
+});
+
+const clampStyle = computed(() => {
+    if (props.clamp) {
+        return { webkitLineClamp: props.clamp };
+    }
+    return undefined;
+});
+
+onMounted(checkClamped);
+onUpdated(() => nextTick(checkClamped));
 </script>
 
 <template>
@@ -63,12 +92,16 @@ const element = computed(() => {
         <div v-else class="stripe"></div>
         <component
             :is="element"
+            ref="headingRef"
+            :title="clampTooltip"
             :class="[
                 sizeClass,
                 props.bold ? 'font-weight-bold' : '',
                 collapsible ? 'collapsible' : '',
                 props.truncate ? 'truncate' : '',
+                props.clamp ? 'clamp' : '',
             ]"
+            :style="clampStyle"
             @click="$emit('click')">
             <slot />
         </component>
@@ -77,14 +110,18 @@ const element = computed(() => {
     <component
         :is="element"
         v-else
+        ref="headingRef"
+        :title="clampTooltip"
         class="heading word-wrap-break"
         :class="[
             sizeClass,
             props.bold ? 'font-weight-bold' : '',
             props.inline ? 'inline' : '',
             collapsible ? 'collapsible' : '',
             props.truncate ? 'truncate' : '',
+            props.clamp ? 'clamp' : '',
         ]"
+        :style="clampStyle"
         @click="$emit('click')">
         <GButton v-if="collapsible" transparent size="small" icon-only inline>
             <FontAwesomeIcon v-if="collapsed" fixed-width :icon="faAngleDoubleDown" />
@@ -100,7 +137,7 @@ const element = computed(() => {
 
 // prettier-ignore
 h1, h2, h3, h4, h5, h6 {
-    &:not(.truncate) {
+    &:not(.truncate):not(.clamp) {
         display: flex;
     }
     align-items: center;
@@ -116,6 +153,12 @@ h1, h2, h3, h4, h5, h6 {
         text-overflow: ellipsis;
         white-space: nowrap;
     }
+
+    &.clamp {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
 }
 
 .collapsible {

client/src/components/History/Layout/DetailsLayout.vue

@@ -3,14 +3,15 @@ import { faPen, faSave, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BFormInput, BFormTextarea } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, ref } from "vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
 
 import { useUserStore } from "@/stores/userStore";
 import l from "@/utils/localization";
 
 import type { DetailsLayoutSummarized } from "./types";
 
 import ClickToEdit from "@/components/Collections/common/ClickToEdit.vue";
+import Heading from "@/components/Common/Heading.vue";
 import TextSummary from "@/components/Common/TextSummary.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
@@ -40,6 +41,8 @@ const userStore = useUserStore();
 const { isAnonymous } = storeToRefs(userStore);
 
 const nameRef = ref<HTMLInputElement | null>(null);
+const clickToEditRef = ref<InstanceType<typeof ClickToEdit> | null>(null);
+const clickToEditClamped = ref(false);
 
 const editing = ref(false);
 const textSelected = ref(false);
@@ -104,6 +107,19 @@ function onToggle() {
     }
 }
 
+function checkClickToEditClamped() {
+    const el = clickToEditRef.value?.$el;
+    if (el) {
+        clickToEditClamped.value = el.scrollHeight > el.clientHeight;
+    }
+}
+
+onMounted(checkClickToEditClamped);
+watch(
+    () => props.name,
+    () => nextTick(checkClickToEditClamped),
+);
+
 function selectText() {
     if (!textSelected.value) {
         nameRef.value?.select();
@@ -121,17 +137,19 @@ function selectText() {
             <template v-if="!summarized && !editing">
                 <ClickToEdit
                     v-if="renameable"
+                    ref="clickToEditRef"
                     v-model="clickToEditName"
+                    v-b-tooltip.hover="clickToEditClamped ? name : ''"
                     component="h3"
                     title="..."
                     data-description="name display"
                     no-save-on-blur
-                    class="my-2 w-100" />
-                <h3 v-else class="my-2 w-100">
+                    class="name-display my-2 w-100" />
+                <Heading v-else h3 :clamp="2" class="my-2 w-100">
                     {{ props.name || "..." }}
-                </h3>
+                </Heading>
             </template>
-            <div v-else style="max-width: 80%">
+            <div v-else class="overflow-hidden" style="max-width: 80%">
                 <TextSummary
                     :description="name"
                     data-description="name display"
@@ -233,6 +251,14 @@ function selectText() {
 </template>
 
 <style lang="scss" scoped>
+.name-display :deep(h3),
+h3.name-display {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+}
+
 .summarized-details {
     margin-left: 0.5rem;
     max-width: 15rem;