Directory block css issue for list view

[kanarb]

Becca (in INC1347815) reports that the style doesn't work in list view on mobile. It results in lines of text one character wide (see screenshot). A quick look led me to believe t might have to do with this style in style.min.css:

.wp-block-column {
min-width: 0;
word-break: break-word;
overflow-wrap: break-word;
}

[knice]

@kanarb Can you send an example URL for us to look at? Also, does this happen when a different theme is enabled? If so, the issue might be with the Gutenberg Blocks plugin and not the UCSC 2022 theme.

[kanarb]

Actually, the problem isn't just on narrow viewports. Check out the following URL:

https://engineering.wordpress.ucsc.edu/departments/applied-mathematics/people/

This is in the engineering theme. I asked Becca in INC1349703 to switch to a different theme and report what she finds.

[kanarb]

@knice Becca has shared a page showing how this problem is occurring in the UCSC theme as well. From Becca:

Yes, (1)the .edu break for long email still happens in the still happens in the UCSC theme. (3) is still aligned middle, and the breakpoints are still odd.
I put this test page on another UCSC Theme Campus Press Wordpress Site
https://bels.wordpress.ucsc.edu/test-contact-us-2/

Not you need to be logged in the view the page.

[knice]

@kanarb The issue happens when a directory block is placed within a column block. There are CSS styles coming from WordPress that are interacting with the CSS for the directory block. Because the problem happens in any theme, this issue is not related to our theme. Rather, the issue should be addressed within the styles provided with the directory block.

If you want to talk more about a solution for this issue, we can have a meeting to talk about how to update the directory block styles to avoid the conflict with WordPress styles.

[kanarb]

Hey Rob. I opened a gutenberg blocks issue for this:

ucsc/ucsc-gutenberg-blocks#103

Closing this one.