[TB] Images up against the edge, no padding/margin

[aaronreed708]

Problem/Concern

If you load the Organisms->Images->Background Image & Text page, the left-side images are right up against the edge with no padding/margin. Same with the labels.

The left images with no padding/margin are in Grid items, but they fill the Grid item including their margins, that is why they are up against the edge. The images are supposed to be different sizes but currently aren't, so should probably fix that problem at the same time. I'll open a different issue for that.

Proposed Solution

[aaronreed708]

@aaronreed708 and @lwnoble to verify

[aaronreed708]

@lwnoble believes that the left alignment is correct and the right padding is actually where it is incorrect. @aaronreed708 to work with Lise to resolve this.

[aaronreed708]

@lwnoble looks like this is related to a change that you made at https://github.com/finos/a11y-theme-builder/blob/89049fe753eaa1cb87cd0a8f3f9478c56eb87243/code/src/ui/src/mui-a11y-tb/themes/Theme.css#L10

This is causing the white space to the right of the image

.MuiGrid-container {
  width: calc(100% - var(--spacing-4)) !important;    <-------- the issue is here
  margin: var(--spacing-2);
}

[PaulaPaul]

@lwnoble - asking for feedback on this on your return

[Turntabl-DorothyEwuah]

@aaronreed708 is there any feedback on this

[aaronreed708]

@lwnoble asking for clarification on this. It looks like components like SmBackgroundImageTextRight are using grids to layout the text and image displayed by the component. As noted above, the grids are automatically buffered on the right by making the grid --spacing-4 less wide than its parent. Which causes the right-side images in the Background Image & Text panel of the Organisms tab to not reach all the way to the edge of the browser. There is also an issue where each grid item is supposed to have a left padding of 16px which gives the text on the left room so that it isn't against the left edge of the grid parent, but that doesn't have the same effect on the background images so the images are right up against the left edge.

So what we are looking for is a clarification of what the desired behavior should be:

• SHOULD the text go right up to the left edge of the Background Image & Text panel?
• SHOULD the text go right up to the left edge of the Background Image & Text panel?
• SHOULD the image go right up to the left edge of the Background Image & Text panel?
• SHOULD the image go right up to the left edge of the Background Image & Text panel?
• SHOULD the grid be --spacing-4 less wide than its parent in ALL situations? Maybe we shouldn't use a Grid in these BackgroundImage components?

[evangk6]

@aaronreed708 - @lwnoble to schedule time on your calendar to go over this and other issues

[aaronreed708]

Discussed with @lwnoble today. The issue appears to be specific to MUI Grid. The goal behavior is:

• a Grid container should stretch 100% width, left side to right side
• a Grid item with a background image should have the background image spanning the complete size of the grid item, regardless of padding on the item
• a Grid item with text should obey any padding on the item

So essentially, on the page in question, the images should go up to the left and right edges of the content area, but the text should not.

When Lise and I tried to do this by hand with CSS in the browser inspector, removing the rules mentioned above and adding padding to the Grid items did not give the desired behavior. Somehow the right grid item ended up overflowing the panel and getting cropped. So this requires some experimentation and research about MUI Grid to see if the desired behavior can be accomplished.

[aaronreed708]

I'm removing the "In Progress" state as I don't have time to pursue this issue currently. Moving to triage for new priority given information above. I'm removing @lwnoble and myself as assignees so that this might possibly be investigated by a new contributor who currently has more time. We should bump up the priority if we find that this Grid issue affects more components.