From 861dd2a70fc28459accef5835b2eaca9922ae19f Mon Sep 17 00:00:00 2001 From: infiinte-persistence Date: Mon, 8 Jun 2020 07:13:48 +0200 Subject: [PATCH] Form-field: Truncate the "read-only prefix" to 40% width so that the input field is always visible. Currently, the input field goes off-screen if the read-only prefix is too long. Given that the prefix is read-only, the user probably knows what the prefix is from context. e.g. In the case of the Repost Modal, the prefix is repeated in a selection field above. So, it's probably ok to just truncate the text to an ellipsis. The input field is the more important one here, so giving it 60% width when truncation is needed. --- ui/scss/component/_form-field.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index f41964746..5c5e5c67d 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -71,8 +71,12 @@ fieldset-group { } fieldset-section:first-child { + max-width: 40%; + .form-field__prefix { white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; padding: 0.5rem; padding-right: var(--spacing-s); height: var(--height-input);