From aed8135d567754fa68f2c3f1b3a3ee87444477af Mon Sep 17 00:00:00 2001 From: Molkobain Date: Mon, 30 Aug 2021 17:22:41 +0200 Subject: [PATCH] =?UTF-8?q?N=C2=B02788=20-=20Improve=20how=20small/large?= =?UTF-8?q?=20fields=20value=20wrap=20without=20overlapping=20the=20conten?= =?UTF-8?q?t=20next=20to=20them?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/backoffice/components/_field.scss | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/css/backoffice/components/_field.scss b/css/backoffice/components/_field.scss index ae209b0de..e125240da 100644 --- a/css/backoffice/components/_field.scss +++ b/css/backoffice/components/_field.scss @@ -36,11 +36,18 @@ $ibo-field--value-decoration--spacing-x: 0.5rem !default; /* Avoid value to overflow from its container with very long strings (typically URLs) */ /* Note: Some types of attribute must be excluding as it can alter their rendering */ &:not([data-attribute-type="AttributeBlob"]):not([data-attribute-type="AttributeFile"]):not([data-attribute-type="AttributeImage"]):not([data-attribute-type="AttributeCustomFields"]):not(.ibo-input-file-select--container) { - /* We need the rule to apply for the class and all its descendants */ + /* We need the rule to apply for the class and all its descendants, hence the "&, & *" */ .ibo-field--value { - * { + &, & * { word-break: break-word; - white-space: pre-line; + white-space: inherit; /* Here we don't put break-spaces as it would put ".ibo-feld-small .ibo-field-value" on a new line due to the spaces/indentation of the HTML templates. For now we rather have this rule than diminish the templates readability/maintenability */ + } + } + &.ibo-field-large { + .ibo-field--value { + &, & * { + white-space: break-spaces; /* For large fields we don't have the issue stated above */ + } } } }