diff --git a/src/features/script-tokens/ScriptTokensPage.tsx b/src/features/script-tokens/ScriptTokensPage.tsx index 4b8887b..b490d94 100644 --- a/src/features/script-tokens/ScriptTokensPage.tsx +++ b/src/features/script-tokens/ScriptTokensPage.tsx @@ -362,109 +362,111 @@ function ScriptTokensPage() {
{/* Left Panel */} diff --git a/src/features/script-tokens/TokenUsagePage.tsx b/src/features/script-tokens/TokenUsagePage.tsx index 9aa5646..085241c 100644 --- a/src/features/script-tokens/TokenUsagePage.tsx +++ b/src/features/script-tokens/TokenUsagePage.tsx @@ -277,9 +277,8 @@ function TokenUsagePage({ ) : null}
- {metricCards.map((card, index) => ( + {metricCards.map((card) => (
- {String(index + 1).padStart(2, "0")} {card.label} {card.value} {card.hint} diff --git a/src/styles/pages/ecommerce.css b/src/styles/pages/ecommerce.css index fae888d..be67177 100644 --- a/src/styles/pages/ecommerce.css +++ b/src/styles/pages/ecommerce.css @@ -8008,9 +8008,8 @@ } .product-clone-page[data-tool="clone"] .clone-ai-logo { - position: sticky; - top: 0; - z-index: 3; + position: static; + z-index: auto; margin: -18px -18px 2px; padding: 16px 18px 14px; border-bottom-color: var(--ecm-line); @@ -8513,7 +8512,7 @@ } .product-clone-page[data-tool="clone"] .clone-ai-logo { - margin: -14px -14px 0; + margin: 0; padding: 14px 54px 12px 14px; } @@ -8792,3 +8791,42 @@ padding-top: 14px; } } + +/* Mobile clone header alignment: keep the tool title in normal flow, but attach it to the top nav rhythm. */ +@media (max-width: 900px) { + .product-clone-page[data-tool="clone"] { + padding-top: 59px; + } + + .product-clone-page[data-tool="clone"] > .product-clone-shell { + min-height: calc(100% - 59px); + } + + .product-clone-page[data-tool="clone"] .clone-ai-panel { + padding-top: 0; + } + + .product-clone-page[data-tool="clone"] .clone-ai-logo { + margin: 0 -18px 2px; + } +} + +@media (max-width: 620px) { + .product-clone-page[data-tool="clone"] .clone-ai-panel { + padding: 0 14px 14px; + } + + .product-clone-page[data-tool="clone"] .clone-ai-logo { + margin: 0 -14px 0; + } +} + +@media (max-width: 480px) { + .product-clone-page[data-tool="clone"] { + padding-top: 59px; + } + + .product-clone-page[data-tool="clone"] > .product-clone-shell { + min-height: calc(100% - 59px); + } +} diff --git a/src/styles/pages/script-tokens-v5.css b/src/styles/pages/script-tokens-v5.css index 932c360..4114e1c 100644 --- a/src/styles/pages/script-tokens-v5.css +++ b/src/styles/pages/script-tokens-v5.css @@ -3421,3 +3421,297 @@ font-size: 13px; } } + +/* Script review left panel overflow guard: keep actions available while history remains scrollable. */ +.script-eval-v5-left { + overflow: hidden; +} + +.script-eval-v5-left-main { + display: flex; + flex: 1 1 auto; + flex-direction: column; + min-height: 0; + overflow-x: hidden; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: rgb(0 255 136 / 35%) transparent; +} + +.script-eval-v5-left-main::-webkit-scrollbar, +.script-eval-v5-history-list::-webkit-scrollbar { + width: 6px; +} + +.script-eval-v5-left-main::-webkit-scrollbar-track, +.script-eval-v5-history-list::-webkit-scrollbar-track { + background: transparent; +} + +.script-eval-v5-left-main::-webkit-scrollbar-thumb, +.script-eval-v5-history-list::-webkit-scrollbar-thumb { + border-radius: 999px; + background: rgb(0 255 136 / 28%); +} + +.script-eval-v5-left-main .script-eval-v5-lp-section.is-fill { + flex: 0 0 auto; + min-height: 210px; +} + +.script-eval-v5-left-main .script-eval-v5-history-list { + min-height: 128px; + max-height: clamp(160px, 28vh, 300px); + overflow-y: auto; +} + +.script-eval-v5-lp-bottom { + position: static; + z-index: auto; + flex-shrink: 0; + margin-top: 0; +} + +@media (max-height: 820px) and (min-width: 901px) { + .script-eval-v5-left-main .script-eval-v5-lp-section.is-fill { + flex-basis: auto; + min-height: 190px; + } + + .script-eval-v5-left-main .script-eval-v5-history-list { + min-height: 118px; + max-height: clamp(142px, 23vh, 220px); + } +} + +@media (max-width: 900px) { + .script-eval-v5-left-main { + overscroll-behavior: contain; + } +} + +@media (max-width: 680px) { + .script-eval-v5-left { + overflow: visible; + } + + .script-eval-v5-left-main { + flex: 0 0 auto; + overflow: visible; + } + + .script-eval-v5-left-main .script-eval-v5-lp-section.is-fill { + min-height: 224px; + } + + .script-eval-v5-left-main .script-eval-v5-history-list { + min-height: 132px; + max-height: min(260px, 42vh); + } + + .script-eval-v5-history-empty { + min-height: 118px; + } +} + +/* Final commercial polish for the script scoring workspace. */ +.script-eval-v5 { + background: + radial-gradient(circle at 12% 0%, rgb(0 255 136 / 5%), transparent 28%), + linear-gradient(180deg, #0d1010 0%, #090b0b 100%); +} + +.script-eval-v5-page { + background: + linear-gradient(90deg, rgb(0 255 136 / 4%), transparent 24%), + linear-gradient(180deg, rgb(255 255 255 / 1.8%), transparent 180px); +} + +.script-eval-v5-left { + background: + linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 180px), + linear-gradient(90deg, rgb(0 255 136 / 4%), transparent 32%), + var(--v5-panel); +} + +.script-eval-v5-left-main { + scroll-padding-block: 18px; +} + +.script-eval-v5-left-main .script-eval-v5-lp-section { + flex-shrink: 0; + padding-inline: 22px; + background: + linear-gradient(180deg, rgb(255 255 255 / 1.8%), transparent 80px); +} + +.script-eval-v5-left-main .script-eval-v5-lp-section + .script-eval-v5-lp-section { + box-shadow: inset 0 1px 0 rgb(255 255 255 / 2.5%); +} + +.script-eval-v5-lp-label { + color: #91a09b; +} + +.script-eval-v5-upload-zone { + display: grid; + place-items: center; + overflow: hidden; + isolation: isolate; +} + +.script-eval-v5-upload-zone::after { + content: ""; + position: absolute; + inset: 1px; + z-index: -1; + border-radius: inherit; + background: + radial-gradient(circle at 50% 18%, rgb(0 255 136 / 11%), transparent 38%), + linear-gradient(180deg, rgb(255 255 255 / 2%), transparent 60%); + opacity: 0.78; + pointer-events: none; +} + +.script-eval-v5-upload-zone:focus-visible { + outline: 2px solid rgb(0 255 136 / 42%); + outline-offset: 3px; +} + +.script-eval-v5.is-ready .script-eval-v5-upload-zone, +.script-eval-v5.is-complete .script-eval-v5-upload-zone { + border-color: rgb(0 255 136 / 28%); + background: + linear-gradient(180deg, rgb(0 255 136 / 8%), rgb(255 255 255 / 2.5%)), + rgb(255 255 255 / 2.8%); +} + +.script-eval-v5-upload-done { + width: min(100%, 320px); + padding: 14px 14px; + box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); +} + +.script-eval-v5-info-grid { + display: grid; + grid-template-columns: 1fr; +} + +.script-eval-v5-info-item { + min-height: 42px; + box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%); +} + +.script-eval-v5-info-empty, +.script-eval-v5-history-empty { + color: #82918c; + background: + linear-gradient(180deg, rgb(255 255 255 / 3.2%), rgb(255 255 255 / 1.8%)); +} + +.script-eval-v5-left-main .script-eval-v5-lp-section.is-fill { + background: + linear-gradient(180deg, rgb(0 255 136 / 3.4%), transparent 92px), + linear-gradient(180deg, rgb(255 255 255 / 1.8%), transparent); +} + +.script-eval-v5-history-list { + padding: 2px 8px 2px 0; +} + +.script-eval-v5-history-item { + min-height: 68px; + box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%); +} + +.script-eval-v5-lp-bottom { + padding: 18px 22px 22px; + background: + linear-gradient(180deg, rgb(255 255 255 / 2.2%), transparent 60px), + #111414; + box-shadow: inset 0 1px 0 rgb(255 255 255 / 3.5%); +} + +.script-eval-v5-export-btn { + border-color: rgb(255 255 255 / 7%); + background: + linear-gradient(180deg, rgb(255 255 255 / 3.5%), rgb(255 255 255 / 1.8%)), + #111414; + color: #7f8d88; +} + +.script-eval-v5-export-btn:not(:disabled):hover { + border-color: rgb(0 255 136 / 22%); + color: #c7d5d0; + background: + linear-gradient(180deg, rgb(0 255 136 / 8%), rgb(255 255 255 / 2%)), + #111414; +} + +.script-eval-v5-eval-btn:disabled, +.script-eval-v5-export-btn:disabled { + opacity: 0.48; + cursor: not-allowed; +} + +.script-eval-v5-right-topbar { + backdrop-filter: blur(14px); + background: + linear-gradient(180deg, rgb(18 22 21 / 92%), rgb(12 14 14 / 88%)); +} + +.script-eval-v5-right-content:not(.is-report) { + background: + radial-gradient(circle at 50% 43%, rgb(0 255 136 / 5%), transparent 32%), + linear-gradient(180deg, transparent, rgb(0 0 0 / 12%)); +} + +.script-eval-v5-upload-card-title { + color: #f0fff8; +} + +.script-eval-v5-upload-card-desc { + max-width: 540px; + color: #96a5a0; +} + +.script-eval-v5-statusbar { + background: + linear-gradient(180deg, rgb(17 20 20 / 84%), rgb(10 12 12 / 92%)); +} + +@media (max-height: 760px) and (min-width: 901px) { + .script-eval-v5-left-main .script-eval-v5-lp-section { + padding-block: 12px; + } + + .script-eval-v5-upload-zone { + min-height: 156px; + } + + .script-eval-v5-left-main .script-eval-v5-lp-section.is-fill { + min-height: 176px; + } + + .script-eval-v5-left-main .script-eval-v5-history-list { + min-height: 110px; + } +} + +@media (max-width: 680px) { + .script-eval-v5-left-main .script-eval-v5-lp-section { + padding-inline: 16px; + } + + .script-eval-v5-upload-zone { + min-height: 164px; + } + + .script-eval-v5-lp-bottom { + padding: 14px 16px 18px; + } + + .script-eval-v5-right-content:not(.is-report) { + padding-top: 22px; + } +}