https://runway.powerhrg.com/backlog_items/INC-2579
At some point in the begining of February, the styling on the Add Credit Card/ACH flyouts changed. The input labels are now centered rather than left aligned.
Seems to be inheriting from the Install Schedule potentially on quick initial investigation.
The stylesheet /components/installation_scheduler/app/components/InstallScheduleV3App/ScheduleRoutes/OptimizeScheduleFlyout/styles.module.scss" has a rule to centering text into pb_dialog's at line 9.
...
[class^=pb_dialog] {
z-index: 10020;
text-align: center;
}
...
it sees to be changed at 1/23, by #45561
If we are inheriting it from somewhere else, can we update it so it no longer inherits styling from a different page?
The first thought was to set text-align: left for pb_dialog on the flyout stylesheet. But as the Install Scheduller stylesheet is called after the Flyout stylesheet, text-align still being overwritted.
It solves the alignment for every pb_caption on Flyout; but as the Install Scheduller stylesheet did, we can unintentionally impact on another component as Flyout was unintentionally impacted.
🖼️ Screenshots
It solves the alignment for every pb_caption on Flyout without impact another components.
3.1 Our primary suggestion is to fix this CSS leak at the root by lazy-loading this CSS file for React, like this. This would not only prevent styles from affecting unintended dialogs but also improve how elements load within Nitro.
3.2 Another suggestion is to avoid modifying element behavior globally. Instead, wrap changes in a custom class and use it only inside the specific component being updated.