From 5b0d300b8a2d2ce4240a3300fff82998f7035e34 Mon Sep 17 00:00:00 2001 From: Penar Musaraj Date: Mon, 20 Mar 2023 15:26:20 -0400 Subject: [PATCH] DEV: Set containing block for Popper dropdowns (#20745) Popper dropdowns used `position: fixed` or `position: absolute`. But in tables, we want the content to use auto overflow horizontally, and that causes the dropdowns to be hidden vertically in some scenarios. Setting a containing block on the parent container fixes both placement and overflow issues. --- app/assets/stylesheets/common/base/directory.scss | 4 ++++ .../common/components/group-member-dropdown.scss | 9 --------- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss index a80a826f1eb..87a73395475 100644 --- a/app/assets/stylesheets/common/base/directory.scss +++ b/app/assets/stylesheets/common/base/directory.scss @@ -101,6 +101,10 @@ .directory-table-container { container-type: inline-size; container-name: directory-table; + transform: translateX(0px); + // transform here creates a containing blocks which + // is used by fixed-positioned dropdowns + // if omitted, `overflow-x: auto;` below will clip them } .directory-table { diff --git a/app/assets/stylesheets/common/components/group-member-dropdown.scss b/app/assets/stylesheets/common/components/group-member-dropdown.scss index d2557d1de40..314267a0c4f 100644 --- a/app/assets/stylesheets/common/components/group-member-dropdown.scss +++ b/app/assets/stylesheets/common/components/group-member-dropdown.scss @@ -1,12 +1,3 @@ .group-member-dropdown { text-align: left; - - .select-kit-body { - // this is a little hacky - // but solves an issue with a wrapping container query on .directory-table-container - // which breaks our popper positioning in this one specific instance - inset: unset !important; - transform: unset !important; - right: 0 !important; - } }