Make custom callout paragraphs same width?

This custom callout doesn’t properly support multiple paragraphs of varying widths. How do I make it so that that shorter paragraphs match the width of the longest paragraph rather than having their width reduced to fit their content?

]

I want it to look like:

I tried to use width: 85% instead of max-width: 85% but this made all paragraphs equal width, which breaks smaller callouts:

.callout[data-callout|="chatgpt"] {
    margin: var(--size-4-8) 0;
    background-color: unset;
    --callout-prompt-padding: 10px 20px;
}
.callout[data-callout|="chatgpt"] .callout-content {
    padding: unset;
    background-color: unset;
    box-shadow: none;
}
.callout[data-callout="chatgpt-prompt"] .callout-title {
    display: none;
}
.callout[data-callout="chatgpt-prompt"] .callout-content {
    display: flex;
    flex-direction: column;
}
.callout[data-callout="chatgpt-prompt"] .callout-content > * {
    display: inline-block;
    max-width: 85%;
    margin-block-start: unset;
    margin-block-end: unset;
    margin-left: auto;
    padding: var(--callout-prompt-padding);
    text-align: left;
    background-color: var(--background-secondary);
    border-radius: 1.5rem;
    
    &:nth-child(n + 2) {
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        margin-top: 0;
    }

    &:nth-last-child(n + 2) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}
.callout[data-callout="chatgpt-prompt"] .callout-content > * + * {
    margin-top: 1rem;
}
> [!chatgpt-prompt]
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies nunc sit amet urna fringilla tincidunt.
> 
> Cras et mattis eros. 

You tried to adapt the callout’s childs instead of the callout itself :slight_smile:

Here you go :

.callout[data-callout="chatgpt-prompt"] {
  width: fit-content; /* The callout will adapt his width to the content of his childs */
  margin-left: auto !important; /* Align it to the right */

  background-color: var(--background-secondary);
  border-radius: 1.5rem;
  padding: 0 20px;
}

.callout[data-callout="chatgpt-prompt"] > .callout-title {
  display: none;
}

.callout[data-callout="chatgpt-prompt"] > .callout-content {
  text-align: right;
}

Was shared on Discord:

.callout[data-callout|="chatgpt"] {
    margin: var(--size-4-8) 0;
    background-color: unset;
    --callout-prompt-padding: 10px 20px;
}
.callout[data-callout|="chatgpt"] .callout-content {
    padding: unset;
    background-color: unset;
    box-shadow: none;
}
.callout[data-callout="chatgpt-prompt"] .callout-title {
    display: none;
}
.callout[data-callout="chatgpt-prompt"] .callout-content {
    display: grid;
    margin-left: auto;
    max-width: 85%;
    width: fit-content;
}
.callout[data-callout="chatgpt-prompt"] .callout-content > * {
    display: inline-block;
    width: 100%;
    margin-block-start: unset;
    margin-block-end: unset;
    padding: var(--callout-prompt-padding);
    text-align: left;
    background-color: var(--background-secondary);
    border-radius: 1.5rem;
    
    &:nth-child(n + 2) {
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        margin-top: 0;
    }

    &:nth-last-child(n + 2) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}
.callout[data-callout="chatgpt-prompt"] .callout-content > * + * {
    margin-top: 1rem;
}

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.