From a689ea236dd232d7a1f60ad8821b72f6fb007293 Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Tue, 14 Jun 2022 12:07:15 +0000
Subject: [PATCH] [FIX] odoo_theme: fix highlight blocks in field-list items

On pages such as /developer/reference/backend/orm.html#fields, the
highlight blocks inside `dl.field-list` items were pushing the width of
the page to go outside the screen on mobile. This is fixed by changing
the `.field-list`'s `display: grid` into `block` on mobile.

closes odoo/documentation#2215

Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
---
 extensions/odoo_theme/static/style.scss | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss
index 1de39509d..e57e20ea1 100644
--- a/extensions/odoo_theme/static/style.scss
+++ b/extensions/odoo_theme/static/style.scss
@@ -638,10 +638,18 @@ header {
                 font-family: var(--bs-font-monospace);
             }
 
-            .field-list {
+            dl.field-list {
                 @include font-size($font-size-secondary);
                 padding: .5rem;
                 border: 1px solid $gray-light;
+                @include media-breakpoint-down(lg) {
+                    display: block;
+                }
+
+                > dt, > dd {
+                    padding-left: 0;
+                    padding-right: 0;
+                }
 
                 ul {
                     list-style: none;