Long text is not shortened with ellipsis - Closes #6344, #6340

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/CopiableText/CopiableText.module.scss

@@ -1,17 +1,24 @@
-.clickable {
-	cursor: pointer;
-	margin-left: 8px;
-	max-width: 5%;
+.root {
+	min-height: 20px;
+	display: flex;
+	width: 100%;
 }
 
-.clickableRow {
-	padding: 0.5px;
-	min-height: 20px;
-	max-width: 95%;
+.copyText {
+	overflow-wrap: unset !important;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
-.clickableContainer {
-	min-width: 100%;
-	display: inline-flex;
-	align-items: center;
+.copyTextIndent {
+	overflow-wrap: unset !important;
+	flex-basis: 30px;
+	width: 30px;
+}
+
+.icon {
+	cursor: pointer;
+	min-width: 20px;
+	margin-left: 5px;
+	flex-basis: 20px;
 }

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/CopiableText/index.tsx

@@ -40,22 +40,21 @@ const CopiableText: React.FC<Props> = props => {
 
 	return (
 		<div
-			className={styles.clickableContainer}
+			className={styles.root}
 			onMouseOver={() => (text === COPIED_TEXT ? setHover(true) : setHover(false))}
 			onMouseOut={() => setHover(true)}
 		>
-			<span className={styles.clickableRow}>
-				<Text color={props.color} type={props.type}>
-					{text}
-				</Text>
-			</span>
-			<span
-				className={`${styles.clickable}`}
-				hidden={hover}
-				onClick={async () => clipToClipboard(text)}
-			>
-				<Icon name={'content_copy'} size={props.size}></Icon>
-			</span>
+			<Text color={props.color} type={props.type} className={styles.copyText}>
+				{text.substr(0, text.length - 4)}
+			</Text>
+			<Text color={props.color} type={props.type} className={styles.copyTextIndent}>
+				{text.substr(text.length - 4)}
+			</Text>
+			<div className={`${styles.icon}`} onClick={async () => clipToClipboard(text)}>
+				<span hidden={hover}>
+					<Icon name={'content_copy'} size={props.size}></Icon>
+				</span>
+			</div>
 		</div>
 	);
 };

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Grid/Grid.module.scss

@@ -19,6 +19,7 @@ $text-align: 'center', 'left', 'right', 'justify';
 			@for $i from 1 through $grid-cols {
 				.gridCol-#{$modifier}-#{$i} {
 					flex-basis: (100 / ($grid-cols / $i)) * 1%;
+					overflow: auto;
 				}
 			}
 		}

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Table/Table.module.scss

@@ -3,15 +3,12 @@
 $cell-padding: 10px;
 $table-height: 250px;
 
-.root {
-	border-collapse: separate;
-	width: 100%;
-	display: table;
-	border-spacing: 0;
-	overflow: auto;
+.tableContainer {
 	height: $table-height;
-	box-sizing: border-box;
 	display: block;
+	box-sizing: border-box;
+	width: 100%;
+	overflow: auto;
 
 	&::-webkit-scrollbar {
 		width: 14px;
@@ -25,6 +22,15 @@ $table-height: 250px;
 	}
 }
 
+.root {
+	border-collapse: separate;
+	table-layout: fixed;
+	border-spacing: 0;
+	overflow: auto;
+	width: 100%;
+	max-width: 100%;
+}
+
 .tableHeader {
 	display: table-header-group;
 

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Table/Table.tsx

@@ -17,7 +17,11 @@ import styles from './Table.module.scss';
 const Table: React.FC = props => {
 	const classes = [styles.root];
 
-	return <table className={`${classes.join(' ')}`}>{props.children}</table>;
+	return (
+		<div className={styles.tableContainer}>
+			<table className={`${classes.join(' ')}`}>{props.children}</table>
+		</div>
+	);
 };
 
 export default Table;

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Table/index.tsx

@@ -12,8 +12,8 @@
  * Removal or modification of this copyright notice is prohibited.
  */
 
-import TableHeader from './TableHeader';
-import TableBody from './TableBody';
 import Table from './Table';
+import TableBody from './TableBody';
+import TableHeader from './TableHeader';
 
 export { TableHeader, TableBody, Table };

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Text/index.tsx

@@ -18,6 +18,7 @@ export interface Props {
 	color?: 'green' | 'pink' | 'yellow' | 'blue' | 'white' | 'gray' | 'platinum_gray' | 'red';
 	type?: 'h1' | 'h2' | 'h3' | 'p' | 'tr';
 	style?: 'light';
+	className?: string;
 }
 
 const Text: React.FC<Props> = props => {
@@ -32,7 +33,11 @@ const Text: React.FC<Props> = props => {
 	}
 
 	const Tag = ['h1', 'h2', 'h3', 'p'].includes(type) ? type : 'p';
-	return <Tag className={styleProps.map(prop => styles[prop]).join(' ')}>{props.children}</Tag>;
+	return (
+		<Tag className={`${styleProps.map(prop => styles[prop]).join(' ')} ${props.className ?? ''}`}>
+			{props.children}
+		</Tag>
+	);
 };
 
 export default Text;

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/widgets/BlockWidget.tsx

@@ -12,11 +12,11 @@
  * Removal or modification of this copyright notice is prohibited.
  */
 import * as React from 'react';
-import { TableBody, TableHeader, Table } from '../Table';
+import { Block } from '../../types';
 import CopiableText from '../CopiableText';
-import { Widget, WidgetHeader, WidgetBody } from '../widget';
+import { Table, TableBody, TableHeader } from '../Table';
 import Text from '../Text';
-import { Block } from '../../types';
+import { Widget, WidgetBody, WidgetHeader } from '../widget';
 
 interface WidgetProps {
 	blocks: Block[];