Fix action RTL issue

[pmahdicheraghi]

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 and justifyContent, 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.

[pmahdicheraghi]

Feature Request: Customizable Action Container in MaterialDesignContent

As part of this PR, I’d like to propose making the action container (classes.action) more customizable. Currently, key layout properties like flexGrow, justifyContent, and margin are hardcoded in the action class, which provides a solid default but limits flexibility for specific design needs.

Suggested Enhancement:

Consider exposing the action container's styling through props or theme overrides, allowing developers to adjust properties like:

• flexGrow
• justifyContent
• padding and margin

Why This Is Important:

This change would allow developers to extend the flexibility of MaterialDesignContent to meet custom design requirements without modifying the core component. For example:

• Projects might require different alignment strategies or spacing for actions in different contexts (e.g., more compact layouts, alternate button arrangements).
• Allowing custom overrides via props or theme customization will make this component more adaptable for various use cases while maintaining the default behavior for most users.

This enhancement would empower developers to customize the action container's layout, making it a more versatile and user-friendly component.