Results Table Horizontal Responsiveness Updates

[ClaireValdivia]

Why is this issue important?

on smaller screens, grants table text overlaps and is difficult to read

Current State

Horizontal Fit - when the screen size is small, the text in the table overlaps

Expected State

Fix horizontal resizing so that the text does not overflow in to the next cell.

Implementation Plan

tbd

Relevant Code Snippets

No response

[ClaireValdivia]

@caitlinwinner is this ticket ready for an eng volunteer to look into and propose an approach?

[caitlinwinner]

@ClaireValdivia I think we should scope to two tickets. 1/fix horizontal resizing so that the text is clipped rather than overflowing in to the next cell. 2/ (less urgent) look into automatically fitting the vertical height to the screen height rather than using a fixed width.

[adele-usdr]

Instead of clipping the text in the cells, should we have a minimum width of the table, and then allow the page to scroll horizontally, if the table is too big for the viewport?

[adele-usdr]

Maybe a better question is - how is the design supposed to work in a narrow mobile layout?

[caitlinwinner]

the new https://grants.gov/search-grants does a pretty good job with this, take a look @adele-usdr

[adele-usdr]

OK so in that example, the table does have a minimum width for the desktop layout, so at a certain point the table no longer fills the viewport and is truncated horizontally. On mobile though, for very narrow viewports, the table rows turn into vertically stacked items, so you can see all info on the screen. Seems like the ideal behavior to be truly responsive is to combine those approaches. When the window gets too narrow, instead of truncating the table row, shift into a vertically stacked presentation. Screenshot attached. There are layout issues with their controls on the left, but this is just to show the table row layout for the search results. @caitlinwinner does that approach make sense?

[caitlinwinner]

yes! that makes sense to me

…

On Mon, Oct 30, 2023 at 1:00 PM adele-usdr ***@***.***> wrote: OK so in that example, the table does have a minimum width for the desktop layout, so at a certain point the table no longer fills the viewport and is truncated horizontally. On mobile though, for very narrow viewports, the table rows turn into vertically stacked items, so you can see all info on the screen. Seems like the ideal behavior to be truly responsive is to combine those approaches. When the window gets too narrow, instead of truncating the table row, shift into a vertically stacked presentation. Screenshot attached. There are layout issues with their controls on the left, but this is just to show the table row layout for the search results. @caitlinwinner <https://github.com/caitlinwinner> does that approach make sense? [image: image] <https://user-images.githubusercontent.com/146878468/279137306-4ef0fbe6-b454-4cd3-b2d8-3b1e81dab96c.png> — Reply to this email directly, view it on GitHub <#2065 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIM3CSRQT6UBPKH2GZEB4DYB7MKRAVCNFSM6AAAAAA54GTY5OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBVGY3DQMBVHA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[adele-usdr]

Looks like the stacked layout properties don't work well combined with the sticky header. The sticky header seems more important, so I'll leave the stacked change for another time.

[ClaireValdivia]

seeing this in staging but not in prod so moving back to staging status for now!