bito-code-review[bot] commented on code in PR #40970:
URL: https://github.com/apache/superset/pull/40970#discussion_r4077718428
##########
superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx:
##########
@@ -102,14 +102,32 @@ const StyledSpace = styled(Space)<{
width: 100%;
.exclude-select {
- width: 80px;
- flex-shrink: 0;
+ width: 100%;
+ min-width: 80px;
}
&.ant-space {
.ant-space-item {
width: ${({ inverseSelection }) => (!inverseSelection ? '100%' :
'auto')};
}
+
+ ${({ inverseSelection }) =>
+ inverseSelection &&
+ `
+ .ant-space-item:first-of-type {
+ flex: 1 1 25%;
+ }
+
+ .ant-space-item:last-child {
+ flex: 3 1 75%;
+ min-width: 0;
+ }
+
+ .select-container {
+ width: 100% !important;
+ max-width: none !important;
+ }
+ `}
Review Comment:
<!-- Bito Reply -->
The user's assessment is correct. In the described scenario, the single
`.ant-space-item` element matches both `:first-of-type` and `:last-child`.
Because `:last-child` appears later in the CSS cascade, its `flex: 3 1 75%`
rule takes precedence. Since there are no other items in the flex container to
share the remaining space, the `flex-grow` factor of 3 causes the item to
expand to fill the entire available width (100%), effectively overriding the
`flex-basis` of 75%.
**superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx**
```
.ant-space-item:first-of-type {
flex: 1 1 25%;
}
.ant-space-item:last-child {
flex: 3 1 75%;
min-width: 0;
}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
