Merge pull request #5221 from systeminit/wendy/truncation-fixes

various truncation fixes!

app/web/src/components/ApprovalPendingModalCard.vue

@@ -12,7 +12,7 @@
     "
     @click="goToChangeSet(changeSet.id)"
   >
-    <div class="group-hover/pendingcard:underline flex-1">
+    <div class="group-hover/pendingcard:underline flex-1 min-w-0">
       <div class="font-bold line-clamp-2">
         {{ changeSet.name }}
       </div>

app/web/src/components/AssetCard.vue

@@ -16,7 +16,7 @@
           <div
             ref="componentNameRef"
             v-tooltip="componentNameTooltip"
-            class="font-bold break-all line-clamp-4 pb-3xs"
+            class="font-bold break-all line-clamp-4 pb-[1px]"
           >
             <template v-if="asset.displayName">
               {{ asset.displayName }}

app/web/src/components/AssetListItem.vue

@@ -13,7 +13,9 @@
     @click.right.prevent
   >
     <template #label>
-      <div class="text-xs w-full truncate flex flex-row items-center gap-1">
+      <div
+        class="text-xs w-full truncate flex flex-row items-center gap-2xs h-[20px]"
+      >
         <div class="truncate">
           {{ schemaVariantDisplayName(a) }}
           <template v-if="!a.canCreateNewComponents">

app/web/src/components/AuditLogCell.vue

@@ -17,6 +17,12 @@
       size="xs"
       @click="emit('toggleExpand')"
     />
+    <span v-else-if="cellDataTruncated" v-tooltip="{ content: cellRawData }">
+      <FlexRender
+        :render="cell.column.columnDef.cell"
+        :props="{ ...cell.getContext(), getValue: () => cellDataTruncated }"
+      />
+    </span>
     <FlexRender
       v-else
       :render="cell.column.columnDef.cell"
@@ -31,6 +37,8 @@ import { FlexRender, Cell } from "@tanstack/vue-table";
 import clsx from "clsx";
 import { computed, PropType } from "vue";
 
+const MAX_STRING_LENGTH = 100;
+
 const props = defineProps({
   cell: {
     type: Object as PropType<
@@ -67,6 +75,17 @@ const tooltip = computed(() => {
   return null;
 });
 
+const cellRawData = computed(
+  () => props.cell.getContext().getValue() as string,
+);
+
+const cellDataTruncated = computed(() => {
+  if (cellRawData.value.length > MAX_STRING_LENGTH) {
+    return `${cellRawData.value.substring(0, MAX_STRING_LENGTH)}...`;
+  }
+  return undefined;
+});
+
 const emit = defineEmits<{
   (e: "select"): void;
   (e: "toggleExpand"): void;

app/web/src/components/ComponentCard.vue

@@ -28,7 +28,7 @@
         size="lg"
         class="shrink-0"
       />
-      <Stack spacing="xs" class="">
+      <Stack spacing="xs" class="min-w-0">
         <div
           ref="componentNameRef"
           v-tooltip="componentNameTooltip"
@@ -37,7 +37,9 @@
           {{ displayName }}
         </div>
         <div class="text-xs italic capsize">
-          <div class="truncate pr-xs">{{ component.def.schemaName }}</div>
+          <TruncateWithTooltip class="pr-xs">
+            {{ component.def.schemaName }}
+          </TruncateWithTooltip>
         </div>
       </Stack>
 
@@ -91,6 +93,7 @@ import {
   useTheme,
   Icon,
   Stack,
+  TruncateWithTooltip,
   COMPONENT_TYPE_ICONS,
 } from "@si/vue-lib/design-system";
 import { useComponentsStore } from "@/store/components.store";

app/web/src/components/EditingPill.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="p-2xs m-0 rounded text-xs font-bold max-h-fit"
+    class="p-3xs m-0 rounded text-xs font-bold max-h-fit"
     :style="{
       backgroundColor: $props.color,
       color: `#${text.toHex()}`,

app/web/src/components/InsetApprovalModal.vue

@@ -9,6 +9,9 @@
     "
   >
     <div class="flex flex-col gap-2xs">
+      <TruncateWithTooltip class="font-bold italic pb-2xs">
+        {{ changeSetName }}
+      </TruncateWithTooltip>
       <div class="font-bold">{{ modalData.title }}</div>
       <div class="text-sm italic">
         <Timestamp :date="modalData.date" showTimeIfToday size="extended" />
@@ -110,6 +113,7 @@ import {
   ErrorMessage,
   IconNames,
   themeClasses,
+  TruncateWithTooltip,
 } from "@si/vue-lib/design-system";
 import { computed, ref } from "vue";
 import clsx from "clsx";
@@ -195,7 +199,7 @@ const userIsApprover = computed(() => changeSetsStore.currentUserIsApprover);
 const modalData = computed(() => {
   if (mode.value === "requested") {
     return {
-      title: `${changeSetName.value} Approval Requested by ${
+      title: `Approval Requested by ${
         requesterIsYou.value ? "You" : requesterEmail.value
       }`,
       date: requestDate.value,

app/web/src/components/ModelingDiagram/DiagramNode.vue

@@ -81,7 +81,7 @@
           y: NODE_HEADER_TEXT_HEIGHT + 6,
           verticalAlign: 'top',
           align: 'left',
-          text: node.def.subtitle,
+          text: truncatedNodeSubtitle,
           width: nodeWidth - NODE_HEADER_MARGIN_RIGHT,
           padding: 0,
           fill: colors.bodyText,
@@ -403,13 +403,23 @@ const connectedEdgesBySocketKey = computed(() => {
 });
 
 const MAX_TITLE_LENGTH = 14;
+const MAX_SUBTITLE_LENGTH = 30;
 
 const truncatedNodeTitle = computed(() => {
   if (props.node.def.title.length > MAX_TITLE_LENGTH) {
-    return `${props.node.def.title.substring(0, MAX_TITLE_LENGTH)}...`;
+    return `${props.node.def.title.substring(0, MAX_TITLE_LENGTH).trim()}...`;
   } else return props.node.def.title;
 });
 
+const truncatedNodeSubtitle = computed(() => {
+  if (!props.node.def.subtitle) return "";
+  else if (props.node.def.subtitle.length > MAX_SUBTITLE_LENGTH) {
+    return `${props.node.def.subtitle
+      .substring(0, MAX_SUBTITLE_LENGTH)
+      .trim()}...`;
+  } else return props.node.def.subtitle;
+});
+
 const nodeWidth = computed(() => props.node.width);
 const halfWidth = computed(() => nodeWidth.value / 2);