oliviaflory
commented
2 months ago Hi @ofovweewere The breadcrumbs in the page header are responding to the max width of the IBM 2x Grid. We would typically encourage teams to adhere to the Grid in order to maintain consistent alignment of all elements within a product or page, and removing that padding would alter the sense of alignment we are trying to achieve.
We would love to know more about your use case and invite you to join the Carbon Design Office Hours for the designers to get a better understanding and evaluate if this would be something we'd allow in the system.
It would be very helpful to see the rest of the layout throughout your product as well. Only seeing the breadcrumbs is more challenging to get an overall sense of the issue.
Package
Carbon for IBM Products
Description
I am currently using this component for an IBM product, and have the below issue. Please treat as Urgent
Currently, the padding and margin above the breadcrumb header section automatically adjusts based on the screen size, providing a responsive layout. While this dynamic behavior is generally desirable, there may be cases where developers need to override this and set a fixed padding/margin value.
The below images illustrates this problem: CASE i. For not so large screens, it renders like this:
CASE ii.
For larger screens, it renders like this:
For the product we are currently working on, we want the padding/margin or space to be the same for all screens (including larger screens). They should all look like CASE i above.
We propose adding an option that allows developers to specify a fixed padding and margin value above the breadcrumb header, regardless of the screen size. This will give developers more control over the layout and appearance of this component.
Component(s) impacted
PageHeader
Browser
Chrome, Safari, Firefox, Microsoft Edge
@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version
2.11.2
Suggested Severity
Severity 1 = The design is broken in a critical way that blocks users from completing tasks or damages the brand. Affects major functionality, no workaround.
Product/offering
Cognos Analytics / New AI Product
CodeSandbox or Stackblitz example
It's pretty obvious. Please see images above.
Steps to reproduce the issue (if applicable)
No response
Release date (if applicable)
No response
Code of Conduct