From 360f837713c057f537d2a9630d82d01f8b1b5aba Mon Sep 17 00:00:00 2001
From: Cezary Statkiewicz <cezary@baserow.io>
Date: Wed, 28 Aug 2024 15:13:12 +0000
Subject: [PATCH] #2742 cut off long relationship descriptions
---
...ut_off_long_relationship_descriptions.json | 7 +++
.../assets/scss/components/array_field.scss | 55 +++++++++++++++----
.../scss/components/views/grid/array.scss | 15 ++---
.../components/views/grid/many_to_many.scss | 10 +++-
.../views/grid/multiple_select.scss | 6 +-
.../assets/scss/mixins/select_option.scss | 11 +++-
.../modules/core/assets/scss/variables.scss | 1 +
.../FunctionalFormulaButtonArrayItem.vue | 4 +-
8 files changed, 82 insertions(+), 27 deletions(-)
create mode 100644 changelog/entries/unreleased/bug/2742_cut_off_long_relationship_descriptions.json
diff --git a/changelog/entries/unreleased/bug/2742_cut_off_long_relationship_descriptions.json b/changelog/entries/unreleased/bug/2742_cut_off_long_relationship_descriptions.json
new file mode 100644
index 000000000..90eaef088
--- /dev/null
+++ b/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"
+}
diff --git a/web-frontend/modules/core/assets/scss/components/array_field.scss b/web-frontend/modules/core/assets/scss/components/array_field.scss
index 94a273e88..f3d37e27e 100644
--- a/web-frontend/modules/core/assets/scss/components/array_field.scss
+++ b/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 {
diff --git a/web-frontend/modules/core/assets/scss/components/views/grid/array.scss b/web-frontend/modules/core/assets/scss/components/views/grid/array.scss
index 8b74e22d8..c1b4ddb4b 100644
--- a/web-frontend/modules/core/assets/scss/components/views/grid/array.scss
+++ b/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 & {
diff --git a/web-frontend/modules/core/assets/scss/components/views/grid/many_to_many.scss b/web-frontend/modules/core/assets/scss/components/views/grid/many_to_many.scss
index 9261b9cfc..17136c76e 100644
--- a/web-frontend/modules/core/assets/scss/components/views/grid/many_to_many.scss
+++ b/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;
diff --git a/web-frontend/modules/core/assets/scss/components/views/grid/multiple_select.scss b/web-frontend/modules/core/assets/scss/components/views/grid/multiple_select.scss
index ae2687476..0c9971ece 100644
--- a/web-frontend/modules/core/assets/scss/components/views/grid/multiple_select.scss
+++ b/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;
diff --git a/web-frontend/modules/core/assets/scss/mixins/select_option.scss b/web-frontend/modules/core/assets/scss/mixins/select_option.scss
index bed1ef240..7d43348cb 100644
--- a/web-frontend/modules/core/assets/scss/mixins/select_option.scss
+++ b/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
diff --git a/web-frontend/modules/core/assets/scss/variables.scss b/web-frontend/modules/core/assets/scss/variables.scss
index 324548507..f83bf61da 100644
--- a/web-frontend/modules/core/assets/scss/variables.scss
+++ b/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;
diff --git a/web-frontend/modules/database/components/formula/array/FunctionalFormulaButtonArrayItem.vue b/web-frontend/modules/database/components/formula/array/FunctionalFormulaButtonArrayItem.vue
index 3ce76650a..bf577c356 100644
--- a/web-frontend/modules/database/components/formula/array/FunctionalFormulaButtonArrayItem.vue
+++ b/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) }}