From 8fe35f551131312dd0f007dd1d2fc963e0a289c7 Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Tue, 14 Jun 2022 14:07:15 +0200
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.

X-original-commit: a689ea236dd232d7a1f60ad8821b72f6fb007293
---
 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 4d8921d762..908639a656 100644
--- a/extensions/odoo_theme/static/style.scss
+++ b/extensions/odoo_theme/static/style.scss
@@ -644,10 +644,18 @@ header.o_main_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;