Mercurial
diff mrjunejune/src/jrpg/jrpg.css @ 272:41a49c29a28f
polish JRPG conversation experience
Integrate desktop conversations into the utility panel, simplify the mobile frame, add modal destinations and a reusable Zenbu composer lab, and preserve explicit conversation resume behavior.
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Fri, 07 Aug 2026 16:05:29 -0700 |
| parents | 04fee26ecce0 |
| children | e02e2036ef84 |
line wrap: on
line diff
--- a/mrjunejune/src/jrpg/jrpg.css Fri Aug 07 13:24:05 2026 -0700 +++ b/mrjunejune/src/jrpg/jrpg.css Fri Aug 07 16:05:29 2026 -0700 @@ -41,6 +41,7 @@ --zenbu-sys-font-family-ui: "Pixel Mplus"; --zenbu-sys-font-family-content: "Pixel Mplus"; --zenbu-sys-font-family-code: "Pixel Mplus"; + --zenbu-sys-type-label-family: "Pixel Mplus"; min-width: 20rem; min-height: 100dvh; overflow: hidden; @@ -254,7 +255,7 @@ .jrpg-shell[data-minimized="true"] .jrpg-workspace > :is( .jrpg-scene, .jrpg-utility, - mjj-jrpg-composer, + mjj-composer, mjj-jrpg-menu ) { visibility: hidden; @@ -262,7 +263,7 @@ .jrpg-workspace > .jrpg-scene, .jrpg-workspace > .jrpg-utility, -.jrpg-workspace > mjj-jrpg-composer, +.jrpg-workspace > mjj-composer, .jrpg-workspace > mjj-jrpg-menu { position: absolute; margin: 0; @@ -291,7 +292,7 @@ height: var(--mjj-frame-utility-height); } -.jrpg-workspace > mjj-jrpg-composer { +.jrpg-workspace > mjj-composer { inset: var(--mjj-frame-composer-block) auto @@ -313,7 +314,7 @@ .jrpg-scene, .jrpg-utility, -mjj-jrpg-composer, +mjj-composer, mjj-jrpg-menu, .jrpg-preview-panel { box-sizing: border-box; @@ -393,10 +394,11 @@ } mjj-jrpg-chat { + box-sizing: border-box; position: relative; z-index: 1; display: grid; - grid-template-rows: auto minmax(0, 1fr) auto; + grid-template-rows: minmax(0, 1fr) auto; align-self: stretch; min-height: 0; padding: var(--zenbu-sys-padding-md); @@ -407,15 +409,6 @@ var(--mjj-jrpg-info); } -.jrpg-panel-heading { - display: flex; - align-items: baseline; - justify-content: space-between; - gap: var(--zenbu-sys-space-group); - padding-bottom: var(--zenbu-sys-padding-sm); - border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); -} - .jrpg-menu-label, .jrpg-brand > p, .jrpg-dialog-heading p { @@ -424,12 +417,6 @@ letter-spacing: 0.08em; } -.jrpg-panel-heading h1 { - margin: 0; - color: var(--mjj-jrpg-text); - font-size: var(--zenbu-sys-font-size-lg); -} - zen-message-scroller { display: block; overflow: hidden; @@ -458,12 +445,27 @@ .jrpg-message { display: grid; - grid-template-columns: minmax(4rem, auto) 1fr; + grid-template-columns: minmax(4rem, auto) minmax(0, 1fr); gap: var(--zenbu-sys-space-control); padding-left: var(--zenbu-sys-padding-sm); border-left: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-accent); } +.jrpg-message-speaker { + display: flex; + align-items: center; + gap: var(--zenbu-sys-space-icon-label); + align-self: start; +} + +.jrpg-message-avatar { + width: var(--zenbu-sys-control-height-sm); + height: var(--zenbu-sys-control-height-sm); + flex: none; + object-fit: contain; + image-rendering: pixelated; +} + .jrpg-message[hidden] { display: none; } @@ -511,13 +513,23 @@ .jrpg-turn-navigation { display: grid; - grid-template-columns: auto minmax(0, 1fr) auto; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--zenbu-sys-space-icon-label); padding-top: var(--zenbu-sys-padding-sm); border-top: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); } +.jrpg-turn-navigation zen-button:first-child button { + justify-content: flex-start; + padding-inline-start: var(--zenbu-sys-padding-md); +} + +.jrpg-turn-navigation zen-button:last-child button { + justify-content: flex-end; + padding-inline-end: var(--zenbu-sys-padding-md); +} + .jrpg-turn-navigation zen-button, .jrpg-turn-navigation button { width: 100%; @@ -561,11 +573,8 @@ overflow: hidden; } -.jrpg-utility > mjj-jrpg-preview, -.jrpg-utility > mjj-conversation-archive { +.jrpg-utility > mjj-jrpg-preview { box-sizing: border-box; - grid-column: 1; - grid-row: 1; width: 100%; height: 100%; min-height: 0; @@ -623,9 +632,7 @@ } .jrpg-preview-panel { - display: grid; - grid-template-rows: auto auto minmax(0, 1fr) auto; - gap: var(--zenbu-sys-space-group); + display: block; height: 100%; padding: var(--zenbu-sys-padding-lg); background: @@ -639,6 +646,24 @@ var(--mjj-jrpg-accent); } +.jrpg-preview-panel > :is(.jrpg-preview-content, mjj-conversation-archive) { + box-sizing: border-box; + width: 100%; + height: 100%; + min-width: 0; + min-height: 0; +} + +.jrpg-preview-content { + display: grid; + grid-template-rows: auto auto minmax(0, 1fr) auto; + gap: var(--zenbu-sys-space-group); +} + +.jrpg-preview-content[hidden] { + display: none; +} + .jrpg-preview-panel h2, .jrpg-preview-panel p { margin: 0; @@ -648,7 +673,7 @@ color: var(--mjj-jrpg-primary); } -.jrpg-preview-panel > p { +.jrpg-preview-content > p { color: var(--mjj-jrpg-text); } @@ -1338,7 +1363,7 @@ text-decoration-color: var(--mjj-jrpg-accent); } -mjj-jrpg-composer { +mjj-composer { grid-area: composer; display: block; min-height: 0; @@ -1346,55 +1371,6 @@ background: var(--mjj-jrpg-surface); } -.jrpg-composer { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - grid-template-rows: minmax(0, 1fr) auto; - gap: var(--zenbu-sys-space-control); - height: 100%; - min-height: 0; -} - -.jrpg-composer zen-field[appearance="plain"] { - display: grid; - grid-column: 1; - grid-row: 1; - grid-template-rows: auto minmax(0, 1fr); - gap: var(--zenbu-sys-space-icon-label); - min-height: 0; -} - -.jrpg-composer label, -.jrpg-composer-hint { - grid-column: 1 / -1; - grid-row: 2; - color: var(--mjj-jrpg-text-muted); - font-size: var(--zenbu-sys-font-size-xs); -} - -.jrpg-composer zen-field label { - grid-column: 1; - grid-row: 1; -} - -.jrpg-composer textarea { - box-sizing: border-box; - grid-column: 1; - grid-row: 2; - width: 100%; - height: 100%; - min-height: calc(var(--zenbu-control-height) * 2); - resize: none; - padding: - var(--zenbu-control-padding-block) - var(--zenbu-control-padding-inline); - border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); - border-radius: 0; - background: var(--mjj-jrpg-surface-sunken); - color: var(--mjj-jrpg-text); - font: inherit; -} - .jrpg-composer textarea::placeholder { color: var(--mjj-jrpg-text-muted); } @@ -1404,51 +1380,6 @@ outline-offset: var(--zenbu-sys-focus-offset); } -.jrpg-composer-actions { - display: flex; - grid-column: 2; - grid-row: 1; - flex-direction: column; - justify-content: flex-end; - gap: var(--zenbu-sys-space-control); -} - -.jrpg-composer zen-button { - width: 100%; -} - -.jrpg-composer zen-button[hidden] { - display: none; -} - -.jrpg-composer zen-button > button { - width: 100%; - border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); - border-radius: 0; - background: var(--mjj-jrpg-primary); - color: var(--mjj-jrpg-primary-foreground); - cursor: pointer; -} - -.jrpg-composer zen-button > button:hover { - border-color: var(--mjj-jrpg-primary-hover); - background: var(--mjj-jrpg-primary-hover); -} - -.jrpg-composer [data-cancel-control] > button { - border-color: var(--mjj-jrpg-accent); - background: var(--mjj-jrpg-accent); -} - -.jrpg-composer button:disabled { - opacity: var(--zenbu-sys-opacity-disabled); - cursor: not-allowed; -} - -.jrpg-composer-hint { - margin: 0; -} - mjj-jrpg-menu { grid-area: menu; display: block; @@ -1514,12 +1445,11 @@ .jrpg-workspace > :is( .jrpg-scene, .jrpg-utility, - mjj-jrpg-composer, + mjj-composer, mjj-jrpg-menu ), .jrpg-scene > mjj-jrpg-chat, -.jrpg-utility > mjj-jrpg-preview > .jrpg-preview-panel, -.jrpg-utility > mjj-conversation-archive { +.jrpg-utility > mjj-jrpg-preview > .jrpg-preview-panel { border: 0; background-color: transparent; box-shadow: none; @@ -1529,23 +1459,20 @@ background-image: none; } -.jrpg-workspace > mjj-jrpg-composer, +.jrpg-workspace > mjj-composer, .jrpg-workspace > mjj-jrpg-menu { padding: var(--zenbu-sys-padding-sm); } -.jrpg-workspace > mjj-jrpg-composer textarea { +.jrpg-workspace > mjj-composer textarea { min-height: 0; } -.jrpg-scene .jrpg-panel-heading, .jrpg-scene .jrpg-message, .jrpg-scene .jrpg-turn-navigation, .jrpg-brand, .jrpg-work-showcase a, -.jrpg-preview-panel > .jrpg-preview-dialog > zen-button > button, -mjj-jrpg-composer > .jrpg-composer textarea, -mjj-jrpg-composer > .jrpg-composer zen-button > button, +.jrpg-preview-content > .jrpg-preview-dialog > zen-button > button, mjj-jrpg-menu nav button { border: 0; } @@ -1590,7 +1517,7 @@ .jrpg-workspace > .jrpg-scene, .jrpg-workspace > .jrpg-utility, - .jrpg-workspace > mjj-jrpg-composer, + .jrpg-workspace > mjj-composer, .jrpg-workspace > mjj-jrpg-menu, .jrpg-workspace > .jrpg-brand, .jrpg-workspace > .jrpg-frame-controls, @@ -1853,27 +1780,20 @@ } mjj-conversation-archive { - position: relative; - z-index: 1; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; align-self: stretch; min-height: 0; - padding: var(--zenbu-sys-padding-md); + padding: 0; overflow: hidden; - background: var(--mjj-jrpg-panel-strong); - box-shadow: inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-info); + background: transparent; + box-shadow: none; } mjj-conversation-archive[hidden] { display: none; } -.jrpg-utility > mjj-conversation-archive { - border: 0; - box-shadow: inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-info); -} - .jrpg-archive-heading { display: flex; align-items: baseline; @@ -2214,6 +2134,14 @@ display: none; } +.jrpg-mobile-destination-owner { + display: contents; +} + +.jrpg-page zen-button[hidden] { + display: none; +} + /* ================================================================ Mobile portrait frame layout (≤52rem + portrait) Overrides the generic stacked grid from the 52rem breakpoint. @@ -2225,50 +2153,22 @@ /* ── Aperture geometry: (inline=left%, block=top%, width%, height%) ── */ /* Main conversation */ - --mjj-mobile-scene-inline: 4.5%; - --mjj-mobile-scene-block: 7.5%; - --mjj-mobile-scene-width: 91%; - --mjj-mobile-scene-height: 45.5%; - - /* Preview / utility */ - --mjj-mobile-utility-inline: 4.5%; - --mjj-mobile-utility-block: 54.7%; - --mjj-mobile-utility-width: 91%; - --mjj-mobile-utility-height: 17.1%; + --mjj-mobile-scene-inline: 4.8%; + --mjj-mobile-scene-block: 7.3%; + --mjj-mobile-scene-width: 90.4%; + --mjj-mobile-scene-height: 71.2%; /* Composer */ - --mjj-mobile-composer-inline: 4.5%; - --mjj-mobile-composer-block: 72.8%; - --mjj-mobile-composer-width: 60.3%; - --mjj-mobile-composer-height: 19.2%; - - /* Menu */ - --mjj-mobile-menu-inline: 66.5%; - --mjj-mobile-menu-block: 72.8%; - --mjj-mobile-menu-width: 29%; - --mjj-mobile-menu-height: 19.2%; - - /* Brand / SYS-01 cover */ - --mjj-mobile-brand-inline: 11%; - --mjj-mobile-brand-block: 2.4%; - --mjj-mobile-brand-width: 10%; - --mjj-mobile-brand-height: 3.5%; + --mjj-mobile-composer-inline: 4.8%; + --mjj-mobile-composer-block: 79.6%; + --mjj-mobile-composer-width: 90.4%; + --mjj-mobile-composer-height: 17.7%; /* Baked hamburger overlay */ - --mjj-mobile-hamburger-inline: 89.5%; - --mjj-mobile-hamburger-block: 2%; - --mjj-mobile-hamburger-width: 7%; - --mjj-mobile-hamburger-height: 4%; - - /* Telemetry value absolute positions (x = left-center, y = top-center) */ - --mjj-mobile-telemetry-temp-x: 22%; - --mjj-mobile-telemetry-temp-y: 94.7%; - --mjj-mobile-telemetry-user-x: 45%; - --mjj-mobile-telemetry-user-y: 94.7%; - --mjj-mobile-telemetry-status-x: 73%; - --mjj-mobile-telemetry-status-y: 94.7%; - --mjj-mobile-telemetry-uptime-x: 22%; - --mjj-mobile-telemetry-uptime-y: 97.5%; + --mjj-mobile-hamburger-inline: 87.2%; + --mjj-mobile-hamburger-block: 1.3%; + --mjj-mobile-hamburger-width: 9.4%; + --mjj-mobile-hamburger-height: 5.3%; height: 100dvh; min-height: 0; @@ -2303,12 +2203,9 @@ display: none; } - /* Restore absolute positioning for all aperture elements */ + /* Restore absolute positioning for the two frame apertures */ .jrpg-workspace > .jrpg-scene, - .jrpg-workspace > .jrpg-utility, - .jrpg-workspace > mjj-jrpg-composer, - .jrpg-workspace > mjj-jrpg-menu, - .jrpg-workspace > .jrpg-brand { + .jrpg-workspace > mjj-composer { position: absolute; width: auto; height: auto; @@ -2331,26 +2228,8 @@ ); } - /* Utility / preview aperture */ - .jrpg-workspace > .jrpg-utility { - inset: - var(--mjj-mobile-utility-block) - auto - auto - var(--mjj-mobile-utility-inline); - width: var(--mjj-mobile-utility-width); - height: var(--mjj-mobile-utility-height); - min-height: 0; - overflow: hidden; - font-size: clamp( - var(--zenbu-sys-font-size-xs), - 2.8vw, - var(--zenbu-sys-font-size-sm) - ); - } - /* Composer aperture */ - .jrpg-workspace > mjj-jrpg-composer { + .jrpg-workspace > mjj-composer { inset: var(--mjj-mobile-composer-block) auto @@ -2365,39 +2244,39 @@ ); } - /* Menu aperture */ - .jrpg-workspace > mjj-jrpg-menu { - inset: - var(--mjj-mobile-menu-block) - auto - auto - var(--mjj-mobile-menu-inline); - width: var(--mjj-mobile-menu-width); - height: var(--mjj-mobile-menu-height); - overflow: hidden; - font-size: clamp( - var(--zenbu-sys-font-size-xs), - 2.5vw, - var(--zenbu-sys-font-size-sm) - ); + .jrpg-workspace > :is(.jrpg-utility, mjj-jrpg-menu) { + display: none; } - /* Brand cover (covers baked SYS-01 label) */ .jrpg-workspace > .jrpg-brand { - inset: - var(--mjj-mobile-brand-block) - auto - auto - var(--mjj-mobile-brand-inline); - width: var(--mjj-mobile-brand-width); - height: var(--mjj-mobile-brand-height); - background: var(--mjj-jrpg-canvas); + position: absolute; + z-index: 4; + inset: 1.3% auto auto 50%; + display: grid; + place-items: center; + width: max-content; + max-width: 68%; + height: 5.3%; padding: 0; + border: 0; + background: transparent; box-shadow: none; + text-align: center; + transform: translateX(-50%); + } + + body.jrpg-page .jrpg-brand header { + width: 100%; + text-align: center; + } + + body.jrpg-page .jrpg-brand header h1 { + font-size: var(--zenbu-sys-font-size-sm); + text-shadow: none; } /* Hamburger button: transparent overlay over baked art */ - .jrpg-workspace > .jrpg-mobile-menu-btn { + .jrpg-mobile-destination-owner > .jrpg-mobile-menu-btn { display: grid; place-items: center; position: absolute; @@ -2438,73 +2317,107 @@ opacity: 0.5; } - /* Telemetry: full-workspace container so children use workspace % coords */ .jrpg-workspace > .jrpg-frame-telemetry { - position: absolute; - inset: 0; - display: block; - width: 100%; - height: 100%; - background: transparent; - pointer-events: none; - font-size: clamp( - var(--zenbu-sys-font-size-xs), - 2.5vw, - var(--zenbu-sys-font-size-sm) - ); + display: none; + } + + .jrpg-mobile-destination-dialog { + box-sizing: border-box; + width: calc(100% - var(--zenbu-sys-space-content)); + max-width: 42rem; + height: min(88dvh, 48rem); + max-height: calc(100dvh - var(--zenbu-sys-space-content)); + margin: auto; + padding: var(--zenbu-sys-padding-md); + border: var(--zenbu-sys-stroke-width-emphasis) solid var(--mjj-jrpg-frame); + border-radius: 0; + background: var(--mjj-jrpg-surface); + color: var(--mjj-jrpg-text); + box-shadow: + inset 0 0 0 var(--zenbu-sys-stroke-width) var(--mjj-jrpg-accent), + var(--zenbu-sys-space-control) var(--zenbu-sys-space-control) 0 + var(--mjj-jrpg-accent); } - .jrpg-frame-telemetry > :nth-child(1) { - position: absolute; - left: var(--mjj-mobile-telemetry-temp-x); - top: var(--mjj-mobile-telemetry-temp-y); - transform: translate(-50%, -50%); - background: transparent; - padding-inline: 0; - pointer-events: auto; - white-space: nowrap; + .jrpg-mobile-destination-dialog[open] { + display: grid; + grid-template-rows: auto minmax(0, 1fr); + gap: var(--zenbu-sys-space-group); + } + + .jrpg-mobile-destination-dialog::backdrop { + background: color-mix(in srgb, var(--mjj-jrpg-canvas) 82%, transparent); + } + + .jrpg-mobile-destination-header { + display: grid; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); + align-items: center; + gap: var(--zenbu-sys-space-control); + padding-bottom: var(--zenbu-sys-padding-sm); + border-bottom: var(--zenbu-sys-stroke-width) solid var(--mjj-jrpg-frame-soft); + } + + .jrpg-mobile-destination-header h2 { + margin: 0; + color: var(--mjj-jrpg-primary); + font-size: var(--zenbu-sys-font-size-lg); + text-align: center; } - .jrpg-frame-telemetry > :nth-child(2) { - position: absolute; - left: var(--mjj-mobile-telemetry-user-x); - top: var(--mjj-mobile-telemetry-user-y); - transform: translate(-50%, -50%); + .jrpg-mobile-destination-header zen-button:first-child { + justify-self: start; + } + + .jrpg-mobile-destination-header zen-button:last-child { + justify-self: end; + } + + .jrpg-mobile-destination-header button { + border: 0; + border-radius: 0; background: transparent; - padding-inline: 0; - pointer-events: auto; - white-space: nowrap; + color: var(--mjj-jrpg-text); + cursor: pointer; + } + + .jrpg-mobile-destination-content { + min-width: 0; + min-height: 0; + overflow: hidden; } - .jrpg-frame-telemetry > :nth-child(3) { - position: absolute; - left: var(--mjj-mobile-telemetry-status-x); - top: var(--mjj-mobile-telemetry-status-y); - transform: translate(-50%, -50%); - background: transparent; - padding-inline: 0; - pointer-events: auto; - white-space: nowrap; + .jrpg-mobile-destination-content > :is(mjj-jrpg-menu, .jrpg-utility) { + box-sizing: border-box; + position: static; + width: 100%; + height: 100%; + min-width: 0; + min-height: 0; + } + + .jrpg-mobile-destination-content > [hidden], + [data-mobile-destination-back-owner][hidden] { + display: none; } - .jrpg-frame-telemetry > :nth-child(4) { - position: absolute; - left: var(--mjj-mobile-telemetry-uptime-x); - top: var(--mjj-mobile-telemetry-uptime-y); - transform: translate(-50%, -50%); - background: transparent; - padding-inline: 0; - pointer-events: auto; - white-space: nowrap; + .jrpg-mobile-destination-content > mjj-jrpg-menu { + display: block; + padding: var(--zenbu-sys-padding-md); + overflow-y: auto; } - /* Compact the brand header text for the narrow cover area */ - .jrpg-workspace > .jrpg-brand header h1 { - font-size: clamp( - var(--zenbu-sys-font-size-xs), - 2vw, - var(--zenbu-sys-font-size-xs) - ); + .jrpg-mobile-destination-content > .jrpg-utility { + display: grid; + padding: 0; + border: 0; + overflow: hidden; + background: transparent; + box-shadow: none; + } + + .jrpg-mobile-destination-content .jrpg-archive-heading { + display: none; } /* Compact scene internals for mobile aperture */ @@ -2520,6 +2433,10 @@ display: none; } + .jrpg-scene::before { + display: none; + } + mjj-jrpg-chat { grid-column: 1; grid-row: 1; @@ -2530,35 +2447,22 @@ padding: var(--zenbu-sys-padding-sm); } - .jrpg-utility > mjj-conversation-archive { + .jrpg-preview-panel > mjj-conversation-archive { width: 100%; height: 100%; max-height: 100%; overflow: auto; } - /* Utility compact padding */ - .jrpg-utility { - padding: var(--zenbu-sys-padding-sm); - } - /* Composer: compact single-row within aperture */ - .jrpg-composer { - gap: var(--zenbu-sys-space-icon-label); - padding: var(--zenbu-sys-padding-sm); + .jrpg-workspace > mjj-composer { + padding: var(--zenbu-sys-space-icon-label); } .jrpg-composer-hint { display: none; } - /* Menu compact: single column stacking */ - .jrpg-workspace > mjj-jrpg-menu { - padding: var(--zenbu-sys-padding-xs, var(--zenbu-sys-padding-sm)); - overflow-y: auto; - scrollbar-width: thin; - } - mjj-jrpg-menu nav { height: 100%; grid-template-columns: 1fr; @@ -2580,36 +2484,21 @@ font-size: var(--zenbu-sys-font-size-xs); } - mjj-jrpg-menu[data-mobile-menu-collapsed] { - overflow: hidden; - } - - mjj-jrpg-menu[data-mobile-menu-collapsed] nav { - display: grid; - place-items: center; + /* Preview panel compact for narrow utility aperture */ + .jrpg-preview-panel { + padding: var(--zenbu-sys-padding-sm); + overflow-y: auto; } - mjj-jrpg-menu[data-mobile-menu-collapsed] .jrpg-menu-label { - display: block; - writing-mode: initial; - } - - mjj-jrpg-menu[data-mobile-menu-collapsed] ul { - display: none; - } - - /* Preview panel compact for narrow utility aperture */ - .jrpg-preview-panel { + .jrpg-preview-content { gap: var(--zenbu-sys-space-icon-label); - padding: var(--zenbu-sys-padding-sm); - overflow-y: auto; } .jrpg-preview-panel h2 { font-size: var(--zenbu-sys-font-size-sm); } - .jrpg-preview-panel > p { + .jrpg-preview-content > p { font-size: var(--zenbu-sys-font-size-xs); display: -webkit-box; -webkit-line-clamp: 2;