diff --git a/addons/web/static/src/views/list/list_renderer.js b/addons/web/static/src/views/list/list_renderer.js
index df8c3bc7109ad..8dc1afd750a5f 100644
--- a/addons/web/static/src/views/list/list_renderer.js
+++ b/addons/web/static/src/views/list/list_renderer.js
@@ -19,6 +19,7 @@ import { useBounceButton } from "@web/views/view_hook";
 import { Widget } from "@web/views/widgets/widget";
 import { getFormattedValue } from "../utils";
 import { localization } from "@web/core/l10n/localization";
+import { uniqueId } from "@web/core/utils/functions";
 
 import {
     Component,
@@ -72,6 +73,26 @@ function getElementToFocus(cell, index) {
     return getTabableElements(cell).at(index) || cell;
 }
 
+/**
+ * Here be dragons. 🐉
+ * This is a workaround to avoid clipping issues in Firefox and Safari.
+ * cf. https://bugzilla.mozilla.org/show_bug.cgi?id=1887116
+ */
+class OptionalFieldsDropdown extends Dropdown {
+    static template = "web.ListRenderer.OptionalFieldsDropdown";
+    static props = {
+        ...Dropdown.props,
+        listRendererClass: String,
+    };
+
+    onWindowClicked(ev) {
+        if (ev.target.closest(".o_optional_columns_dropdown.o-dropdown--menu")) {
+            return;
+        }
+        super.onWindowClicked(...arguments);
+    }
+}
+
 export class ListRenderer extends Component {
     setup() {
         this.uiService = useService("ui");
@@ -207,6 +228,7 @@ export class ListRenderer extends Component {
             this.lastEditedCell = null;
         });
         this.isRTL = localization.direction === "rtl";
+        this.uniqueRendererClass = uniqueId("o_list_renderer_");
     }
 
     displaySaveNotification() {
@@ -2081,7 +2103,7 @@ ListRenderer.rowsTemplate = "web.ListRenderer.Rows";
 ListRenderer.recordRowTemplate = "web.ListRenderer.RecordRow";
 ListRenderer.groupRowTemplate = "web.ListRenderer.GroupRow";
 
-ListRenderer.components = { DropdownItem, Field, ViewButton, CheckBox, Dropdown, Pager, Widget };
+ListRenderer.components = { DropdownItem, Field, ViewButton, CheckBox, Dropdown: OptionalFieldsDropdown, Pager, Widget };
 ListRenderer.props = [
     "activeActions?",
     "list",
diff --git a/addons/web/static/src/views/list/list_renderer.xml b/addons/web/static/src/views/list/list_renderer.xml
index 3b6e8161b588a..56bf3eae7769e 100644
--- a/addons/web/static/src/views/list/list_renderer.xml
+++ b/addons/web/static/src/views/list/list_renderer.xml
@@ -4,6 +4,7 @@
     <t t-name="web.ListRenderer" owl="1">
         <div
             class="o_list_renderer o_renderer table-responsive"
+            t-att-class="uniqueRendererClass"
             tabindex="-1"
             t-ref="root"
         >
@@ -46,6 +47,7 @@
                                 class="'o_optional_columns_dropdown text-center border-top-0'"
                                 togglerClass="'btn p-0'"
                                 skipTogglerTabbing="true"
+                                listRendererClass="uniqueRendererClass"
                                 position="'bottom-end'">
                                 <t t-set-slot="toggler">
                                     <i class="o_optional_columns_dropdown_toggle oi oi-fw oi-settings-adjust"/>
@@ -291,4 +293,11 @@
         </tr>
     </t>
 
+    <t t-name="web.ListRenderer.OptionalFieldsDropdown" t-inherit="web.Dropdown" t-inherit-mode="primary">
+        <xpath expr="//div[@t-if='state.open']" position="attributes">
+            <attribute name="t-portal">`.${props.listRendererClass}`</attribute>
+            <attribute name="class" add="o_optional_columns_dropdown" separator=" "/>
+        </xpath>
+    </t>
+
 </templates>