#2742 cut off long relationship descriptions

changelog/entries/unreleased/bug/2742_cut_off_long_relationship_descriptions.json

@@ -0,0 +1,7 @@
+{
+    "type": "bug",
+    "message": "Cut off long relationship descriptions",
+    "issue_number": 2742,
+    "bullet_points": [],
+    "created_at": "2024-08-02"
+}

web-frontend/modules/core/assets/scss/components/array_field.scss

@@ -2,23 +2,34 @@
   margin: 5px 4px;
   padding: 0 5px;
   background-color: $color-neutral-100;
-  display: flex;
+  display: inline-flex;
   flex-wrap: nowrap;
-  max-width: calc(100% - 8px);
+  white-space: nowrap;
 
   @include rounded($rounded);
+  @include fixed-height(22px, 13px);
 
   &:last-child {
     margin-right: 0;
   }
 
-  @include fixed-height(22px, 13px);
+  .row-modal__field-item &,
+  .grid-view-array-field.active & {
+    margin: 5px 4px;
+    max-width: calc(100% - 8px);
+    white-space: initial;
+    display: flex;
+  }
 }
 
-.array-field__ellipsis {
-  @extend %ellipsis;
+.array-field__ellipsis,
+.array-field__name {
+  .row-modal__field-item &,
+  .grid-view-array-field.active & {
+    max-width: 100%;
 
-  max-width: 100%;
+    @extend %ellipsis;
+  }
 }
 
 .array-field__time {
@@ -27,7 +38,11 @@
 
 .array-field__button {
   margin: 3px 4px;
-  max-width: calc(100% - 8px);
+
+  .row-modal__field-item &,
+  .active & {
+    max-width: calc(100% - 8px);
+  }
 
   &:last-child {
     margin-right: 0;
@@ -35,25 +50,45 @@
 }
 
 .array-field__multiple-select-container {
-  display: contents;
+  display: inline-flex;
+
+  .row-modal__field-item &,
+  .grid-view-array-field.active & {
+    display: contents;
+    flex-wrap: wrap;
+    max-width: 100%;
+  }
 }
 
 .array-field__single-option {
   white-space: nowrap;
   margin: 6px 4px 4px;
   overflow: unset;
-  display: flex;
   flex-wrap: nowrap;
 
   // must use !import because the `select-option-style` overwrites the `max-width`, and
   // we don't want to use that one.
   max-width: calc(100% - 8px) !important;
+  box-sizing: unset;
 
-  @include select-option-style(flex, true);
+  @include select-option-style(inline-flex, true);
 
   &:last-child {
     margin-right: 0;
   }
+
+  .row-modal__field-item & {
+    box-sizing: border-box;
+  }
+
+  .grid-view-array-field.active & {
+    display: flex;
+    overflow: auto;
+
+    &:last-child {
+      margin-right: 4px;
+    }
+  }
 }
 
 .array-field__file {

web-frontend/modules/core/assets/scss/components/views/grid/array.scss

@@ -1,24 +1,19 @@
 .grid-view-array-field {
-  overflow: hidden;
-  display: flex;
-  flex-flow: row;
-  flex-wrap: nowrap;
+  overflow: clip;
   list-style: none;
   margin: 0;
-  padding: 0 4px;
+  padding: 0 0 0 4px;
   user-select: none;
+  display: flex;
 
   &.active {
     height: auto;
+    flex-flow: row;
     flex-wrap: wrap;
-    overflow: auto;
     bottom: auto;
     min-width: calc(100% + 4px);
     min-height: calc(100% + 4px);
-
-    .array-field__item {
-      height: auto;
-    }
+    padding: 0 4px;
   }
 
   .grid-view__column--matches-search & {

web-frontend/modules/core/assets/scss/components/views/grid/many_to_many.scss

@@ -28,7 +28,6 @@
   background-color: $color-neutral-100;
   display: flex;
   color: $color-neutral-900;
-  max-width: calc(100% - 5px);
 
   @include rounded($rounded);
   @include fixed-height(22px, 13px);
@@ -39,6 +38,7 @@
 
   .grid-field-many-to-many__cell.active & {
     background-color: $color-primary-100;
+    max-width: calc(100% - 5px);
 
     .grid-view__column--matches-search & {
       background-color: $color-primary-200;
@@ -69,11 +69,15 @@
 }
 
 .grid-field-many-to-many__name {
-  @extend %ellipsis;
-
+  white-space: nowrap;
+  overflow: hidden;
   max-width: 100%;
 }
 
+.grid-field-many-to-many__cell.active .grid-field-many-to-many__name {
+  @extend %ellipsis;
+}
+
 .grid-field-many-to-many__loading {
   margin: 5px 0 0 4px;
 

web-frontend/modules/core/assets/scss/components/views/grid/multiple_select.scss

@@ -3,7 +3,11 @@
   margin: 6px 4px 4px;
   overflow: unset;
 
-  @include select-option-style(flex, true);
+  @include select-option-style(flex, true, false);
+
+  .grid-field-many-to-many__cell.active & {
+    max-width: calc(100% - 8px);
+  }
 
   .grid-view__column--matches-search .grid-field-many-to-many__cell.active & {
     background-color: $color-primary-200;

web-frontend/modules/core/assets/scss/mixins/select_option.scss

@@ -1,11 +1,18 @@
-@mixin select-option-style($display, $include-shadow-if-bg-same-color: false) {
+@mixin select-option-style(
+  $display,
+  $include-shadow-if-bg-same-color: false,
+  $max-width-100: true
+) {
   @extend %ellipsis;
 
   display: $display;
   color: $color-neutral-900;
   border-radius: 20px;
   padding: 0 10px;
-  max-width: 100%;
+
+  @if $max-width-100 {
+    max-width: 100%;
+  }
 
   @if $include-shadow-if-bg-same-color {
     // Special case for search matches background

web-frontend/modules/core/assets/scss/variables.scss

@@ -34,6 +34,7 @@ $base-font-family: $text-font-stack !default;
 
 $radius-none: 0 !default;
 $rounded: 4px !default;
+$rounded-left: 4px 0 0 4px !default;
 $rounded-md: 6px !default;
 $rounded-xl: 12px !default;
 $rounded-2xl: 16px !default;

web-frontend/modules/database/components/formula/array/FunctionalFormulaButtonArrayItem.vue

@@ -11,7 +11,9 @@
       rel="nofollow noopener noreferrer"
       @mousedown.stop
     >
-      {{ $options.methods.getLabelOrURL(props.value) }}
+      <span class=".array-field__ellipsis">{{
+        $options.methods.getLabelOrURL(props.value)
+      }}</span>
     </Button>
     <Button v-else size="tiny" type="secondary" tag="a" disabled>
       {{ $options.methods.getLabelOrURL(props.value) }}