🐛 Fixed dropdowns in Members filters #22082
Conversation
The (empty) wormhole div was being inserted into the DOM, which was causing the position of the Filter button to shift. This change makes sure the div is positioned above all else, so it doesn't interfere with the layout.
These changes solve some strange positioning and rendering issues we were seeing in the dropdown.
This reverts commit 97bd5d8.
The previously set min-height (for labels in a dropdown) was causing issues elsewhere and, upon closer inspection, did not seem necessary.
The previous solution was pixel-based, and caused issues across different implementations of the dropdown. This approach should vertically centre the icon more consistently.
More specific targeting to make sure the positioning of the arrow is always relative to the first line of the dropdown.
In light and dark mode.
dvdwinden
force-pushed
the
members-filter-issues-fix
branch
from
755a6ac to
e1632c6
Compare
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
ghost/admin/app/styles/components/power-select.cssOops! Something went wrong! :( ESLint: 8.44.0 Error: Failed to load parser '@babel/eslint-parser' declared in 'ghost/admin/.eslintrc.js': Cannot find module '@babel/eslint-parser'
ghost/admin/app/styles/layouts/members.cssOops! Something went wrong! :( ESLint: 8.44.0 Error: Failed to load parser '@babel/eslint-parser' declared in 'ghost/admin/.eslintrc.js': Cannot find module '@babel/eslint-parser'
ghost/admin/app/styles/app-dark.cssOops! Something went wrong! :( ESLint: 8.44.0 Error: Failed to load parser '@babel/eslint-parser' declared in 'ghost/admin/.eslintrc.js': Cannot find module '@babel/eslint-parser'
WalkthroughThis pull request focuses on enhancing the styling of the Ember Power Select component across multiple CSS files. The changes include adjusting background colors, border properties, and layout configurations for various selector classes. The modifications aim to improve the visual consistency and responsiveness of the component, particularly in dark mode and multiple selection scenarios. Changes
Sequence DiagramsequenceDiagram
participant UI as User Interface
participant PS as Power Select Component
participant CSS as Styling Rules
UI->>PS: Trigger Selection
PS->>CSS: Apply Styling
CSS-->>PS: Update Background
CSS-->>PS: Adjust Layout
PS->>UI: Render Component
Possibly related PRs
Suggested Labels
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
💤 Files with no reviewable changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (2)
🔇 Additional comments (6)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
dvdwinden
changed the title
A few of the dropdowns within the Members filter were displaying incorrectly (wrong background colour, sizing, border radius, and dark mode styling).
These changes address that.
Fixes https://linear.app/ghost/issue/DES-1093/the-filter-for-selecting-an-email-has-a-grey-background-rather-than, https://linear.app/ghost/issue/DES-1094/the-label-field-is-taller-than-other-fields, https://linear.app/ghost/issue/DES-1095/the-label-field-changes-border-radius-on-focus, https://linear.app/ghost/issue/DES-1096/label-and-email-fields-display-incorrectly-in-dark-mode