Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description of Changes:
This pull request updates the layout styling for
MaterialDesignContent
to enhance flexibility, improve action alignment, and address an RTL layout issue. These updates introduce more dynamic styling that better adapts to various container sizes and alignments.Key Changes:
Removed:
marginLeft: 'auto'
paddingLeft: '16px'
marginRight: '-8px'
Added:
flexGrow: 1
to allow the action container to dynamically occupy available space within the flexbox layout.justifyContent: 'end'
to ensure consistent alignment of actions to the right, particularly improving support for RTL layouts.marginInlineEnd: '-8px'
to maintain consistent spacing and visual alignment.Why This Change Is Necessary:
The previous fixed margin and padding values made the layout less flexible and difficult to adapt to different screen sizes, content lengths, and layout directions (LTR vs. RTL). These changes introduce a more responsive design by leveraging
flexGrow
andjustifyContent
, which allows the action container to adjust naturally within its parent element.There was no way to achieve this level of flexibility or address RTL alignment issues with the previous hardcoded values. This PR resolves these limitations, ensuring the component works consistently across different layouts, languages, and screen sizes.