From 6a7c2840cd95619da9f67f1fb571f71afaeab0fd Mon Sep 17 00:00:00 2001
From: Romain Derie <rde@odoo.com>
Date: Fri, 15 Apr 2022 13:17:41 +0000
Subject: [PATCH] [FIX] website: fix cookiebar responsiveness
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

There is 2 issues regarding the responsiveness of the cookiebar:

==== Problem n°1: ====
======================

By default, `.modal-dialog` receive a O.5rem margin.
```css
    .modal-dialog {
        margin: 0.5rem;
    }
```

But it only takes effect in small resolution, as starting from SM (576px,
see _breakpoints.scss), the margin is set to 0. `.modal-dialog` receive:
```css
    @media (min-width: 576px)
    .modal-dialog {
        margin: 0 auto;
    }
```

On top of that, the `.modal-dialog` has a `min-height` of 100%, which is
getting too big in XS, as there is a 0.5rem margin, which adds up on top
of the 100%
```css
    .s_popup[data-vcss='001'] .modal-dialog {
        height: auto;
        min-height: 100%;
    }
```
It results in a modal height bigger than the screen size, ultimately
creating a scrollbar for just a few pixels (2 * 0.5rem margin), making
the cookies bar partly hidden by the screen.

==== Problem n°2: ====
======================

The buttons from the cookies bar "discrete" template are simple `<a/>`
elements inside a `div.col`.
Those links have no bottom margin like a paragraph would have.
In LG screen, it is fine as the col containing those links is next to
the other col containing the paragraph which adds the margin bottom,
making elements not stuck to the bottom edge of the screen:

------------------------------
|  COL-LG    |     COL-LG    |
|   <p/>     |   <a/> <a/>   |
|                            | <-- bottom margin set on <p/>
------- screen edge ----------

But in lower resolution, as both col would be on top of each other, the
`<a/>` would be stuck to the bottom screen border.
--------------
|  COL-LG    |
|   <p/>     |
|            | <-- bottom margin set on <p/>
--------------
-----------------
|     COL-LG    |
|    <a/> <a/>  | <-- Against the screen bottom edge
-- screen edge --

======================

Steps to reproduce:
- Install Website
- Enable cookie bar in the Settings
- Go on the Website with a mobile screen width

opw-2784233

closes odoo/odoo#91712

X-original-commit: 843e57694dd73ed4b7fca0460a4cf9b166820843
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Claude Thibault (thcl) <thcl@odoo.com>
Co-authored-by: thcl-odoo <thcl@odoo.com>
---
 addons/website/static/src/scss/website.scss         | 7 +++++++
 addons/website/static/src/snippets/s_popup/001.scss | 3 +++
 2 files changed, 10 insertions(+)

diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 6b0f44e5f23..ef8ac17fe9b 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -1509,6 +1509,13 @@ $ribbon-padding: 100px;
     :not(.o_cookies_popup) {
         bottom: 0;
     }
+    .o_cookies_discrete {
+        .js_close_popup.o_cookies_bar_text_button, .o_cookies_bar_text_policy {
+            @include media-breakpoint-down(md) {
+                margin-bottom: 1rem;
+            }
+        }
+    }
 }
 
 .o_website_btn_loading {
diff --git a/addons/website/static/src/snippets/s_popup/001.scss b/addons/website/static/src/snippets/s_popup/001.scss
index a8200adf4e9..76c0361ed01 100644
--- a/addons/website/static/src/snippets/s_popup/001.scss
+++ b/addons/website/static/src/snippets/s_popup/001.scss
@@ -10,6 +10,9 @@
     .modal-dialog {
         height: auto;
         min-height: 100%;
+        @include media-breakpoint-down(xs) {
+            min-height: calc(100% - 2 * #{$modal-dialog-margin});
+        }
     }
 
     // Close icon