[Enhancement] - add responsive mobile view for documents table

[ogorman89]

Describe the Current Behavior/Feature:

Implement a mobile layout for the profile document table using cards. With the existing list of objects implemented in PASS, while it would end up showing the metadata for all documents stored within the Documents container, users could technically still trigger user permissions to block other users from viewing specific files. As such, we could still utilize this list to generate our cards.

In PASS, we have an example of how cards are implemented from a list of objects, check out the existing implementation of message previews from our custom Inbox/Outbox and the MessagePreview component itself.

Rationale:

• implements the desired layout from figma design

Proposed Changes:

• add a mobile view for the document table
• should switch to mobile when the table starts to have a horizontal scroll around 900px
• mobile view should be cards like the current figma design [Update: see issue #626, also see: link to figma]
• should be responsive
• For the responsive breakpoint we could use the existing MUI breakpoint at theme.breakpoints.down('sm') which can be obtained by importing theme and calling const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));.
• should use MUI cards

Possible Drawbacks:

N/A

Alternatives Considered:

N/A

Additional Context:

N/A

[joshua-cornett]

Suppose I'll take a stab at this

[leekahung]

Updated issue description by including additional information that could be useful for implementation.

[andycwilliams]

If you haven't already @joshua-cornett , you can check out how we style messages (should be in MessagePreview.jsx). The base of that might be useful when creating cards for documents. And if we want, we could even create a basic card component to import into both Messages and Documents, similar to how FormSection.jsx works.

If we do decide to go that route, such a refactoring can definitely be left for a separate issue. Just want to mention this since it could save us some effort in the long run. Especially since the Contacts table will likely need cards very similar to the Documents table here as well.

[andycwilliams]

It hasn't been made super clear, so I wanted to mention how there will need to be additional work to finish the full design from Figma.

On mobile at least, there is an additional screen to display the details for the selected contact or document (a driver's license, in this example). In Messages, the user simply clicks on a message to expand it and read the contents. That wouldn't work as well for these, since they may contain much more information (including images).

However, I think that can be left for a separate issue and not be included in this one. The scope might already be a bit too broad, or at least not detailed enough. Maybe even leave it for after MVP.

Edit: Proposed this in #644.

[andycwilliams]

Hey. Just wondering if there's any update with this. Thanks.

[joshua-cornett]

Hey all, so it seems that having description among the cards' primary columns may be problematic given that it is the field with the greatest overflow potential, leaving little room for much else. Instead, I propose we have it beneath the other fields. This is likely best as an expandable element with a more distinct background so as to give it a clear separation from the columns above.

I will include a screenshot of the proposed alternative once I get that up. The primary columns will likely be:

[Name] [Type] [Upload Date] [Expiration Date] [Actions]
[Description] (expandable)

[leekahung]

Hey all, so it seems that having description among the cards' primary columns may be problematic given that it is the field with the greatest overflow potential, leaving little room for much else. Instead, I propose we have it beneath the other fields. This is likely best as an expandable element with a more distinct background so as to give it a clear separation from the columns above.

I will include a screenshot of the proposed alternative once I get that up. The primary columns will likely be:

[Name] [Type] [Upload Date] [Expiration Date] [Actions]
[Description] (expandable)

Should be fine. I'm good with this idea

[andycwilliams]

There's a text truncate util you could use

[leekahung]

Another idea we could try is to use some sort of collapsible to expand the card so you can view more information.
https://dribbble.com/tags/expandable-cards

[joshua-cornett]

Another idea we could try is to use some sort of collapsible to expand the card so you can view more information.
https://dribbble.com/tags/expandable-cards

Yeah having the description be the expandable bit is what I was thinking

[andycwilliams]

We were thinking that since this is a stopgap measure (we'll be creating a separate document view page later anyway), it would be more effort than worthwhile to design and code an expandable section.