Adjustments to tile responsiveness when sidebar is opened

[jmakowski1123]

Currently when the sidebar is opened, tiles with long titles and descriptions become very elongated. UI solution?

[bradenmacdonald]

@jmakowski1123 It only affects smaller displays. I think we can address that by switching to three cards per row instead of four? (for small displays)

[sdaitzman]

Rather than setting a fixed number of columns at specific breakpoints and letting the preview text flow across an arbitrary number of lines, I think we should use different fixed constraints (Figma link with examples and comments):

• Minimum card width: e.g. 200px. This allows minimum recognition and should fit comfortably on mobile sizes, with padding.
• Maximum card width: e.g. 400px. Any greater width adds diminishing value, adds noise, and makes text more difficult to follow.
• Maximum lines of preview text: 3. Cards are intended for quick recognition, and this should be enough to recognize content.

Rather than a fixed number of columns between each breakpoint, this approach limits the card size to ensure all cards are a reasonable size in all dimensions, and allows them to use up more space when it's available.

I've left the constraints a bit open-ended here. I'm wondering about feasibility of this sort of approach— let me know if more specific constraints, examples and breakpoints would be helpful. Does something more like this responsive approach seem possible?

[bradenmacdonald]

@sdaitzman Yes, we can do that and I agree it's better than dealing with breakpoints and fixed columns and all that.

CC @rpenido @ChrisChV

[rpenido]

Ack! I will check that tomorrow and post an update here.

[rpenido]

As the other PR was merged, I will create a small task for this next sprint.

[sdaitzman]

Discussed this at libraries relaunch touchpoint today. We decided to (pending evaluating feasibility of scoping these changes to the content libraries studio page only):

• Drop the xl max-width container, so the header, content, cards and footer can flow across the full screen width
• Add a maximum width for the cards, and allow them to flow across multiple lines and flex within their min/max size range
• Post-MVP, evaluate how list views will handle wide screens / remain legible on them

Before:

After:

[bradenmacdonald]

^ Ideally, we'd add a way that we can enable this "full width mode" for just this one page, and potentially other course authoring MFE pages in the future. If it's too complicated to do, or would affect ALL pages and potentially introduce layout issues on other pages, we can consider postponing it.

[rpenido]

We can parametrize the header only for the library authoring, so I think it is possible to make the change only for this context. Let me know if I should include the header/content size change as part of this issue. CC @bradenmacdonald

[bradenmacdonald]

@rpenido Yes please include it with this issue. Thanks.

[rpenido]

@jmakowski1123 @lizc577 @sdaitzman @marcotuts This is ready for AC testing on the sandbox.

[jmakowski1123]

This looks ok to my non-UI eyes