Chatbot: Different option for multi-source navigation

[rebeccaalpert]

IFD is looking for a an overflow container rather than carousel (similar to the PatternFly horizontal nav for navigation) so they can show more cards at larger screen sizes/display modes. Thinking of showing max 3 (right now max 2). 6+ might be a different look.

This originally came from engineering. They were afraid that users might never look at #2 in a paginated card because it's hidden.

Would need breakpoints to handle different sizes/display modes. We would want to ship this layout (if we move forward) separate from our existing sources cards so as not to break anyone else.

Timeline: no deadline

Accessibility notes/questions:

• Maybe consider a “Skip sources” button if there are more than X sources? Similar to how a horizontal nav overflow may be preceded by a “skip to content” link at the top of the page. Should look more into this, though, to ensure it doesn’t cause a worse experience

[kaylachumley]

Spoke to Becky from Ask Redhat on 11/20 to w=talk through some decision directions and asks.
The biggest issue here is needing to see more than 1 source card at once on desktop. We discussed the mobile layout and concluded that its not the best UX to show overflow arrows on the right and left of the source cards. So the solution for mobile is to keep the exisiting paginated source card design and go with the short term option A for desktop. Option B for desktop could be implemented down the line in Q1 or Q2. See option A and B description below:

1. Option A) Easiest solution - Modify flex layout within chatbot container on desktop to allow 2 or 3 source cards to be displayed in a row rather then 1 source card spanning the entire row/horizontal width of the container.

2. Option B) Long term solution - Add overflow arrows to the source cards so the user can paginated/carosoul through options right to left.

Mobile/Overlay exploration for context. No dev follow up needed for overlay size.

[kaylachumley]

@thatblindgeye Added comments above from the multi source card issue - I know we talked about this over a call friday already but just added this for more context for later. Here is the figma file too