FIX Nicely truncate link title/URL (#153)

silverstripe · Jan 8, 2024 · bdf0b36 · bdf0b36
1 parent 80b0867
commit bdf0b36
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 10 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/LinkPicker/LinkPicker.scss b/client/src/components/LinkPicker/LinkPicker.scss
@@ -106,10 +106,13 @@
   align-items: center;
   flex-grow: 1;
   height: 100%;
+  min-width: 0;
   text-align: left;
   border: none;
   margin-right: 0;
-  &::before {
+
+  &[class*="font-icon-"]::before {
+    position: absolute;
     font-size: 1.231rem;
     padding: .76925rem;
     margin-right: 6px;
@@ -119,6 +122,8 @@
 
 .link-picker__link-detail {
   flex-grow: 1;
+  width: 100%;
+  padding-left: 3.5rem;
 }
 
 .link-picker__clear {
@@ -129,12 +134,32 @@
   color: $link-color;
 }
 
+%cutoff-text {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.link-picker__title {
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  .badge {
+    color: #cf3f00;
+    background-color: #fff2ea;
+    padding: 2px 3px 2px 4px;
+  }
+}
+
 .link-picker__title-text {
+  min-width: 0;
   margin-right: 5px;
+  @extend %cutoff-text;
 }
 
-.link-picker__title .badge {
-  color: #cf3f00;
-  background-color: #fff2ea;
-  padding: 2px 3px 2px 4px;
+.link-picker__type {
+  width: 100%;
+  @extend %cutoff-text;
 }
diff --git a/client/src/components/LinkPicker/LinkPickerTitle.js b/client/src/components/LinkPicker/LinkPickerTitle.js
@@ -46,9 +46,6 @@ const LinkPickerTitle = ({
   if (versionState) {
     classes[` link-picker__link--${versionState}`] = true;
   }
-  if (title && title.length > 25) {
-    title = title.substring(0, 25) + '...';
-  }
   const className = classnames(classes);
   return <div className={className}>
     <Button className="link-picker__button font-icon-link"  color="secondary" onClick={stopPropagation(onClick)}>