From 38ae9698998f45dfe3b3b8d4edbd6665f379a7ac Mon Sep 17 00:00:00 2001 From: Konstantin Schaper Date: Tue, 7 Feb 2023 10:53:38 +0100 Subject: [PATCH 1/2] fix long text in table cells breaking layout --- gradle/changelog/table_cell_overflow.yaml | 2 ++ scm-ui/ui-styles/src/components/_main.scss | 2 ++ 2 files changed, 4 insertions(+) create mode 100644 gradle/changelog/table_cell_overflow.yaml diff --git a/gradle/changelog/table_cell_overflow.yaml b/gradle/changelog/table_cell_overflow.yaml new file mode 100644 index 0000000000..f45e0c0d68 --- /dev/null +++ b/gradle/changelog/table_cell_overflow.yaml @@ -0,0 +1,2 @@ +- type: fixed + description: Long text in table cells breaking layout diff --git a/scm-ui/ui-styles/src/components/_main.scss b/scm-ui/ui-styles/src/components/_main.scss index 3888097653..ffd6d7e4df 100644 --- a/scm-ui/ui-styles/src/components/_main.scss +++ b/scm-ui/ui-styles/src/components/_main.scss @@ -571,6 +571,7 @@ ul.is-separated { th { border-color: $white-ter; padding: 1rem; + overflow-wrap: anywhere; } } @@ -635,6 +636,7 @@ ul.is-separated { background-color: $white-bis; border-bottom: 1px solid $white-ter; border-left-color: $grey; + overflow-wrap: anywhere; &:first-child { border-left: 3px solid; From de46d8f4a5bb6b534c95781cbd4e00f36382b30d Mon Sep 17 00:00:00 2001 From: Konstantin Schaper Date: Tue, 7 Feb 2023 11:00:59 +0100 Subject: [PATCH 2/2] tweak styling --- scm-ui/ui-styles/src/components/_main.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/scm-ui/ui-styles/src/components/_main.scss b/scm-ui/ui-styles/src/components/_main.scss index ffd6d7e4df..c1c98fab36 100644 --- a/scm-ui/ui-styles/src/components/_main.scss +++ b/scm-ui/ui-styles/src/components/_main.scss @@ -567,11 +567,13 @@ ul.is-separated { // tables .table { width: 100%; + td { + overflow-wrap: anywhere; + } td, th { border-color: $white-ter; padding: 1rem; - overflow-wrap: anywhere; } } @@ -636,7 +638,6 @@ ul.is-separated { background-color: $white-bis; border-bottom: 1px solid $white-ter; border-left-color: $grey; - overflow-wrap: anywhere; &:first-child { border-left: 3px solid;