TT4 - Visual and Responsiveness Issues in "Footer with 3 Menus" Pattern

[imanish003]

Describe the bug

Two visual and responsiveness issues are observed in the Footer with 3 Menus Pattern in WooCommerce Blocks:

1. The Site title does not visually indicate that it's a clickable link when using the TT4 theme.
2. The pattern is not responsive on Editor side

To reproduce

Issue 1: Site title not appearing clickable

1. Apply the TT4 theme.
2. Add the Footer with 3 Menus Pattern
3. Observe that the Site title does not appear to be a clickable link.

Before

Current

Issue 2: Pattern not responsive

1. Add the Footer with 3 Menus Pattern
2. Reduce the browser window size on Editor
3. Observe that the pattern is not responsive.

Expected behavior

Issue 1
The Site title should be visibly distinguishable as a clickable link, especially when using themes where the text color for links is also black by default.

Issue 2
The pattern should be responsive and adapt to varying screen sizes gracefully on Editor side.

Additional context

These issues may not necessarily be bugs but can impact the user experience.

[danieldudzic]

The Site title should be visibly distinguishable as a clickable link, especially when using themes where the text color for links is also black by default.

I believe this is a design choice of the theme. But I agree that this is not the best UX. Not sure if we should be addressing this via a pattern update, though.

The pattern should be responsive and adapt to varying screen sizes gracefully on Editor side.

I have noticed that the column gaps are insufficient on the front end:

[nerrad]

The Site title should be visibly distinguishable as a clickable link, especially when using themes where the text colour for links is also black by default.

I agree with @danieldudzic, we shouldn't be overriding the theme design aesthetic unless we're implementing opinionated patterns (i.e. ignoring the theme styles).

Observe that the pattern is not responsive.

Good observations, if this is not TT4 specific let's make sure there's a dedicated issue for solving that.

[danieldudzic]

The columns overflow issue is caused by the change in size preset slug naming convention in Twenty Twenty-Four (compared to Twenty Twenty-Three).

I have now opened an issue in the Twenty Twenty-Four repo to discuss potential solutions: WordPress/twentytwentyfour#710

[danieldudzic]

This has been now fixed via #11544.

I'm closing this, as the conversation on the borader issue will continue here: woocommerce/woocommerce#42150