fix: [M3-7072] - Long drawer titles overlapping close icon #9731
Conversation
| @@ -132,7 +132,6 @@ export const Drawer = (props: Props) => { | |||
| <Grid> | |||
| <IconButton | |||
| sx={{ | |||
| position: 'absolute', | |||
There was a problem hiding this comment.
I removed this property because with a position of absolute: "the element is removed from the normal document flow, and no space is created for the element in the page layout", which is why the drawer title was overlapping the icon button -- as far as it was concerned, it didn't exist. By removing that positioning, we inherit position: relative and the icon button element is part of the document flow again.
I don't see a reason to keep position: absolute here, but if we wanted to keep it, another way to address this issue would be to add some paddingRight to the title.
There was a problem hiding this comment.
Absolute positioning is useful for the icon button because it allows us to position it within the grid slightly offset to the upper right of the title, and does not take the icon button's spacing into account in the document layout. Spacing within icon button affects the bottom margin of the drawer header and was leading to additional spacing between the header and the rest of the drawer when the icon button was included in the document flow (position: relative used).
position: relative
position: absolute
| width: 480, | ||
| }, | ||
| drawerHeader: { | ||
| '&&': { | ||
| marginBottom: theme.spacing(2), | ||
| }, |
There was a problem hiding this comment.
Fixing eslinting warnings.
| onClose={(event, reason) => { | ||
| if (onClose && reason !== 'backdropClick') { | ||
| onClose(event, reason); | ||
| } | ||
| }} | ||
| anchor="right" |
There was a problem hiding this comment.
Fixing eslinting warnings.
mjac0bs
requested review from
jdamore-linode and
hana-akamai
and removed request for
a team
mjac0bs
force-pushed
the
M3-7072-drawer-title-overlapping-close-icon
branch
from
df93e7e
to
b3caeb0
Compare
@bnussman-akamai Should be addressed now. I ended up reverting the change to remove absolute padding and added a right margin to the title to account for the icon button within the drawer header.
|
Description 📝
This PR fixes an edge case where very long
Drawertitles (in this case, due to long firewall names) overlap theDrawerclose (X) icon.Note: we fixed a similar issue before with Dialogs, not Drawers.
Major Changes 🔄
List highlighting major changes
Preview 📷
How to test 🧪
test-this-re-l-y-l-o-n-gf-ir-e-w)yarn devLinodestab and click the button toAdd Linodes to Firewall.Linodestab and click the button toAdd Linodes to Firewall.This was a styling regression.