when rendering a Flag component with an action button, there’s unintended empty space on the left side of the button area.
As a result, the button does not align vertically with the title and description text inside the Flag. This creates a subtle visual inconsistency — the button looks slightly “indented” compared to the text block above it.
Steps to Reproduce:
Create a flag with any action
Environment:
“@atlaskitatlaskit/user-picker": “11.5.0”
“react”: “^18.3.1”
“react-dom”: “^18.3@atlaskit1”
“@atlaskit/dropdown-menu”: “16.3.3”
“@atlaskit/icon”: “27.12.0”
“styled-components”: “6.1.19”
Expected Behavior:
The button should be horizontally aligned with the title and description text inside the flag.
Actual Behavior:
There’s additional spacing left to the action.
This issue appears to be due to a missing or misconfigured Compiled CSS-in-JS bundler plugin. It’s responsible for correctly de-duping + ordering styles generated by Compiled.
One way to confirm is by looking at style tags mounted to the HEAD of your app, if they look like below, it means they’re being mounted independently. They should be condensed into a single atomic css file.
That’s correct, I shared the link because the compiled plugin isn’t currently configured in codesandbox so it’s possible to see how the styles are being mounted incorrectly. Sorry I should have called that out.
