Files
mintlify__docs/playground.css
Kaishan (Sam) Ding e10cfd0019 feat: assistant widget (#6754)
* feat: assistant widget

* fix

* docs: rename Assistant Widget to Mintlify Widget

* docs: shorten widget sidebar title

* add starter questions + support email

* new playground

* update

* fix

* remove bg

* remove bg

* fix

* update link

* resolve merge conflicts

* update intro, copy edit

* add prerequisites and confirmation step

* vale warning

* fix

* fix

* fkx

* fix

* fix

* live preview

* fix

---------

Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
2026-07-27 17:37:11 -07:00

57 lines
2.0 KiB
CSS

@media (min-width: 1024px) {
html[data-current-path="/assistant/widget"] #content-area {
position: relative;
max-width: 1800px !important;
margin-inline: auto;
/* Percentage padding resolves against the parent, so cap it at half of the 1800px max-width */
padding-right: calc(min(50%, 900px) + 1rem);
}
html[data-current-path="/assistant/widget"] #content {
position: static;
}
html[data-current-path="/assistant/widget"] [data-assistant-preview] {
position: absolute;
inset: 0 1.5rem 0 auto;
width: calc(50% - 2.5rem);
}
}
html[data-current-path="/assistant/widget"]
div:has(> iframe[title="Live Assistant Widget preview"]) {
min-height: 0;
flex: 1 1 0%;
}
html[data-current-path="/assistant/widget"]
iframe[title="Live Assistant Widget preview"] {
height: 100%;
}
/* The widget playground embeds /assistant/widget-preview in its preview
iframe. The suffix match keeps localized paths covered. Hide every piece of
docs chrome so only the widget renders, and keep the document transparent
so the playground card provides the visible frame. */
html[data-current-path$="/assistant/widget-preview"] #navbar,
html[data-current-path$="/assistant/widget-preview"] #navbar-transition,
html[data-current-path$="/assistant/widget-preview"] #mobile-nav,
html[data-current-path$="/assistant/widget-preview"] #banner,
html[data-current-path$="/assistant/widget-preview"] #sidebar,
html[data-current-path$="/assistant/widget-preview"] #footer,
html[data-current-path$="/assistant/widget-preview"] #assistant-entry,
html[data-current-path$="/assistant/widget-preview"] #assistant-entry-mobile,
html[data-current-path$="/assistant/widget-preview"] [aria-label="Preview Widget"],
html[data-current-path$="/assistant/widget-preview"] [aria-label="Preview Widget Menu"] {
display: none !important;
}
html[data-current-path$="/assistant/widget-preview"],
html[data-current-path$="/assistant/widget-preview"] body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden !important;
background: transparent !important;
}