Popover max height

[char-mainewang]

Hey Paste team,

Is there guidance for what an appropriate max height is for the Popover component? I'm designing a view where users click a column to see more info in a popover (figma), but I'm unsure what max height to set to enable scrolling, as the content inside the popover is dynamic based on user setups and can get quite lengthy.

[krisantrobus]

Hey @char-mainewang we are still discussing this internally. Popovers are meant for supplemental or contextual content. If the amount of information exceeds the window size, it's better to consider alternative ways to display it.

Could you share more details about how you are using it. From the figma I see a table with entities that may grow. Have you explored the possibility of other components such as SideModal and SidePanel which overflow naturally and match viewport height?

[char-mainewang]

Ya, for added context, the "Latest Sync" column in this table summarizes the statuses of various entities used by a data consumer. Each entity has its own sync status, and this column displays an aggregated status. When you click on the arrow, you can see the individual statuses for each entity being used. The list can expand based on the number of entities the data consumer uses.

We haven't explored the side panel or side modal yet, but i think the side modal might be a good fit for this use case! It looks like side panel allows users to interact with the background content, which could make the relationship between what you clicked and what you see in the side panel less clear, especially when scrolling through the list of data consumers.

[krisantrobus]

You are correct, SidePanel will stay open and allow you to interact with all of the content on the body by pushing it to the left. SidePanel will overlay the body but not be immediately dismissible. You can configure this with the state hook and trigger this at any point or use the close button.

If you would like to explore this further or discuss any other element options you are very welcome to sign up for office hours and talk to our designers. You can sign up by adding you name to this sheet and joining Design Systems Office Hours