github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-27 15:19:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix organizations dropdown clipped by sidebar overflow (#10362)

Browse Source 
Render the organizations selector dropdown in a portal anchored to the
trigger button, so a long list is no longer clipped by the
sidebar-content-wrapper overflow.
This commit is contained in:
Juanfran 2026-06-23 10:37:59 +02:00 committed by GitHub
parent 46abf1c968
commit fc07a6467b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/app/main/ui/dashboard/sidebar.cljs
View File

@ -40,6 +40,7 @@
[app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.buttons.button :refer [button*]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i] [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
[app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]] [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg*]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as deprecated-icon] [app.main.ui.icons :as deprecated-icon]
[app.main.ui.nitrate.nitrate-form] [app.main.ui.nitrate.nitrate-form]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -704,6 +705,12 @@
show-orgs-menu? show-orgs-menu?
(deref show-orgs-menu*) (deref show-orgs-menu*)
orgs-rect*
(mf/use-state nil)
orgs-portal-container
(hooks/use-portal-container :popup)
show-org-options-menu* show-org-options-menu*
(mf/use-state false) (mf/use-state false)
@ -723,6 +730,7 @@
(mf/use-fn (mf/use-fn
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(reset! orgs-rect* (dom/get-bounding-rect (dom/get-current-target event)))
(swap! show-orgs-menu* not))) (swap! show-orgs-menu* not)))
on-show-orgs-keydown on-show-orgs-keydown
@ -773,13 +781,22 @@
;; Orgs Dropdown ;; Orgs Dropdown
[:> organizations-selector-dropdown* {:show show-orgs-menu? (when show-orgs-menu?
:on-close close-orgs-menu (let [rect (deref orgs-rect*)]
:id "organizations-list" (mf/portal
:class (stl/css :dropdown :teams-dropdown) (mf/html
:organization current-org [:div {:style {:position "fixed"
:profile profile :top (dm/str (:top rect) "px")
:organizations (vals orgs)}] :left (dm/str (:left rect) "px")
:width (dm/str (:width rect) "px")}}
[:> organizations-selector-dropdown* {:show true
:on-close close-orgs-menu
:id "organizations-list"
:class (stl/css :dropdown :teams-dropdown)
:organization current-org
:profile profile
:organizations (vals orgs)}]])
orgs-portal-container)))
;; Orgs options ;; Orgs options
[:> org-options-dropdown* {:show show-org-options-menu? [:> org-options-dropdown* {:show show-org-options-menu?
:on-close close-org-options-menu :on-close close-org-options-menu