Skip to content

How to make the dialog wider? #18

Answered by Th3S4mur41
tzatos asked this question in Q&A
Discussion options

You must be logged in to vote

The dialog style is currently assuming it is mostly used for simple content (single column).
Therefor its width (inline-size) is limited by two factors:

  • --max-line-length: which is the maximum length suggested for textual content
  • calc(100vw - var(--spacing-xl)): the viewport size minus some space left and right of the dialog

To get a wider dialog if you e.g. intend to use multiple columns would mean removing the first factor by setting

max-inline-size: calc(100vw - var(--spacing-xl));

This is a good indication, that we might want to reconsider the current style and add --max-line-length to more direct content elements like <p> a and <h1> instead

Replies: 1 comment

Comment options

You must be logged in to vote
0 replies
Answer selected by tzatos
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet
2 participants