diff --git a/src/App.scss b/src/App.scss index 3a0204d1..3ea31b97 100644 --- a/src/App.scss +++ b/src/App.scss @@ -3,6 +3,7 @@ :root { --navbar-height: 3.5rem; + --post-line-height: 1.4; } html { @@ -440,7 +441,7 @@ textarea, height: unset; } - --padding: 0.5em; + --_padding: 0.5em; border: none; border-radius: $fallback--inputRadius; @@ -458,10 +459,9 @@ textarea, box-sizing: border-box; display: inline-block; position: relative; - height: 2.4em; - line-height: 1.2; + line-height: 2; hyphens: none; - padding: var(--padding); + padding: 0 var(--_padding); &:disabled, &[disabled=disabled], @@ -563,6 +563,12 @@ textarea, } } +// Textareas should have stock line-height + vertical padding instead of huge line-height +textarea { + padding: var(--_padding); + line-height: var(--post-line-height); +} + option { color: $fallback--text; color: var(--text, $fallback--text); diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss index 57332bed..c6b45c34 100644 --- a/src/components/chat_list_item/chat_list_item.scss +++ b/src/components/chat_list_item/chat_list_item.scss @@ -43,7 +43,7 @@ white-space: nowrap; overflow: hidden; flex-shrink: 1; - line-height: 1.4em; + line-height: var(--post-line-height); } .chat-preview { @@ -82,7 +82,7 @@ } .time-wrapper { - line-height: 1.4em; + line-height: var(--post-line-height); } .chat-preview-body { diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 07abee27..3d3408f7 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -119,7 +119,7 @@ .notification-details { min-width: 0; word-wrap: break-word; - line-height: 1.4; + line-height: var(--post-line-height); position: relative; overflow: hidden; width: 100%; diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index a967d3a3..62613bd1 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -394,7 +394,6 @@ border-radius: var(--tooltipRadius, $fallback--tooltipRadius); padding: 0.5em; margin: 0; - line-height: 1.4em; } .text-format { @@ -503,17 +502,19 @@ display: flex; flex-direction: column; padding: 0.25em 0.5em 0.5em; - line-height: 1.85em; + line-height: 1.85; } .form-post-body { - box-sizing: content-box; + // TODO: make a resizable textarea component? + box-sizing: content-box; // needed for easier computation of dynamic size overflow: hidden; transition: min-height 200ms 100ms; - padding-bottom: calc(var(--padding) + 1.2em); - // Because we changed box-sizing original height values are no longer correct - height: 1.2em; - min-height: 1.2em; + // stock padding + 1 line of text (for counter) + padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em); + // two lines of text + height: calc(var(--post-line-height) * 1em); + min-height: calc(var(--post-line-height) * 1em); resize: none; &.scrollable-form { diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index f261108e..1c1ecea2 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -19,7 +19,7 @@ overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; - line-height: 1.4em; + line-height: var(--post-line-height); } .summary { @@ -33,7 +33,7 @@ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - height: 1.4em; + height: 1.4; } } diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue index ba12a246..030ce2c4 100644 --- a/src/components/user_reporting_modal/user_reporting_modal.vue +++ b/src/components/user_reporting_modal/user_reporting_modal.vue @@ -87,7 +87,7 @@ &-left { padding: 1.1em 0.7em 0.7em; - line-height: 1.4em; + line-height: var(--post-line-height); box-sizing: border-box; > div {