From 4781f41c57ae912eb74aee2a3976444128ec2f80 Mon Sep 17 00:00:00 2001
From: Dagmara <lyczak.dagmara@gmail.com>
Date: Mon, 26 Dec 2022 21:08:06 +0100
Subject: [PATCH] fix: "Manage Columns" tab cuts off long column names
---
.../ColumnsConfiguration/ColumnConfigurationItem.scss | 3 ++-
.../ColumnsConfiguration/ColumnsConfiguration.react.js | 9 ++++++++-
.../ColumnsConfiguration/ColumnsConfiguration.scss | 3 ++-
3 files changed, 12 insertions(+), 3 deletions(-)
diff --git a/src/components/ColumnsConfiguration/ColumnConfigurationItem.scss b/src/components/ColumnsConfiguration/ColumnConfigurationItem.scss
index bd0bf9347b..82394eaf3d 100644
--- a/src/components/ColumnsConfiguration/ColumnConfigurationItem.scss
+++ b/src/components/ColumnsConfiguration/ColumnConfigurationItem.scss
@@ -13,13 +13,14 @@
.visibilityIcon {
cursor: pointer;
- width: 30px;
}
.columnConfigItemName {
text-overflow: ellipsis;
overflow: hidden;
line-height: 24px;
+ margin-left: 15px;
+ margin-right: 15px;
}
.columnIcon {
diff --git a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
index 45c9389087..228c483246 100644
--- a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
+++ b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
@@ -22,6 +22,11 @@ export default class ColumnsConfiguration extends React.Component {
this.entryRef = React.createRef();
}
+ componentDidMount() {
+ const rect = this.entryRef.current?.getBoundingClientRect();
+ this.maxWidth = rect.x + rect.width - 20 + 'px';
+ }
+
componentWillReceiveProps(props) {
if (props.schema !== this.props.schema) {
this.setState({
@@ -93,7 +98,9 @@ export default class ColumnsConfiguration extends React.Component {
<Popover fixed={true} position={Position.inDocument(this.entryRef.current)} onExternalClick={this.toggle.bind(this)} contentId={POPOVER_CONTENT_ID}>
<div className={styles.popover} id={POPOVER_CONTENT_ID}>
{title}
- <div className={styles.body}>
+ <div className={styles.body} style={{
+ maxWidth: this.maxWidth,
+ }}>
<div className={styles.columnConfigContainer}>
<DndProvider backend={HTML5Backend}>
{order.map(({ name, visible, ...rest }, index) => {
diff --git a/src/components/ColumnsConfiguration/ColumnsConfiguration.scss b/src/components/ColumnsConfiguration/ColumnsConfiguration.scss
index c22e03aa48..0b62535771 100644
--- a/src/components/ColumnsConfiguration/ColumnsConfiguration.scss
+++ b/src/components/ColumnsConfiguration/ColumnsConfiguration.scss
@@ -64,7 +64,8 @@
right: 0;
border-radius: 5px 0 5px 5px;
background: #797691;
- width: 320px;
+ max-width: 100vw;
+ min-width: 320px;
font-size: 14px;
.columnConfigContainer {