From 79007fa2b5ad4ce67104d12a7edfc6dddb41c0f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 16 Jun 2021 13:07:43 +0200 Subject: [PATCH] Fix margin in sign in / sign up forms divider When the "Or fill the following form" text was translated to another language or customized by administrators, the text could span over two lines. Since the element had a fixed height, it could overlap with the text below it. So now we're using an element with a relative position to achieve the same effect (have the contents of the elements on top of its border). --- app/assets/stylesheets/layout.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index d94a1224b..2df3cd915 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1011,15 +1011,17 @@ footer { } .auth-divider { - border-bottom: 1px solid $border; - height: rem-calc(14); - margin: $line-height 0; + border-top: 1px solid $border; + margin-top: $line-height * 1.5; text-align: center; span { background: #fff; + box-decoration-break: clone; font-weight: bold; padding: 0 $line-height / 2; + position: relative; + top: -$line-height / 2; } }