From fd9b8640b71114c8a947ccd27e3a6323b3f8b564 Mon Sep 17 00:00:00 2001 From: Codex Bot Date: Fri, 30 Oct 2026 14:29:36 +0800 Subject: [PATCH] Keep graphic toolbar and header within narrow viewports --- apps/studio/src/styles/graphic.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/studio/src/styles/graphic.module.css b/apps/studio/src/styles/graphic.module.css index babaec9..2c1f0bf 100644 --- a/apps/studio/src/styles/graphic.module.css +++ b/apps/studio/src/styles/graphic.module.css @@ -4,3 +4,4 @@ .app{background:#e5e5e5;color:#303030}.top{height:52px;border-color:#e5e5e5;padding:0 16px;gap:12px}.body{height:calc(100% - 52px);grid-template-columns:248px minmax(240px,1fr) 264px}.brand>span:first-child{color:#1685e8}.app .primary{background:#1685e8}.viewport{background:#e5e5e5;background-image:none;touch-action:none}.boardWrap{will-change:transform}.tabs{padding:10px;gap:4px}.tabs button{flex:1;padding:8px}.tabs button[aria-pressed=true]{background:#f0f0f0;color:#222}.canvasLabel{color:#888}.tools{bottom:16px;border-radius:13px;padding:7px;border-color:#ddd;box-shadow:0 3px 12px #0002}.tools button:first-child{background:transparent;color:inherit}.tools button[aria-pressed=true]{background:#1685e8;color:white}.element[data-selected=true]{outline-color:#1685e8}.corner{border-color:#1685e8;cursor:nwse-resize;width:11px;height:11px}.measure{background:#1685e8}.agentPanel{padding:30px 20px;display:flex;flex-direction:column;gap:18px}.agentPanel>svg{color:#1685e8}.agentPanel h3{font-size:15px;font-weight:500;margin:0}.agentPanel p,.agentPanel small{font-size:11px;line-height:1.9;color:#888}.agentPanel a{display:flex;gap:8px;align-items:center;font-size:12px;color:#1685e8}.agentPanel small{border-top:1px solid #eee;padding-top:20px}.layer[data-selected=true]{background:#e5f2ff}.pageTitle{border-bottom:1px solid #eee}.top .badge{color:#888}@media(max-width:1100px){.body{grid-template-columns:190px minmax(200px,1fr) 220px}}@media(max-width:760px){.body{grid-template-columns:1fr 200px}}@media(max-width:480px){.body{grid-template-columns:1fr}} .app[data-layers=false] .left,.app[data-properties=false] .right{display:none}.app[data-layers=false] .body{grid-template-columns:minmax(240px,1fr) 264px}.app[data-properties=false] .body{grid-template-columns:248px minmax(240px,1fr)}.app[data-layers=false][data-properties=false] .body{grid-template-columns:1fr}.app[data-layers=false] .tools{left:calc((100% - 264px)/2)}.app[data-properties=false] .tools{left:calc(248px + (100% - 248px)/2)}.app[data-layers=false][data-properties=false] .tools{left:50%}@media(max-width:1100px){.app[data-layers=false] .body{grid-template-columns:minmax(200px,1fr) 220px}.app[data-properties=false] .body{grid-template-columns:190px minmax(200px,1fr)}.app[data-layers=false] .tools{left:calc((100% - 220px)/2)}.app[data-properties=false] .tools{left:calc(190px + (100% - 190px)/2)}}@media(max-width:760px){.app[data-layers=false] .body{grid-template-columns:1fr 200px}.app[data-properties=false] .body{grid-template-columns:1fr}.app[data-properties=false] .tools{left:50%;max-width:calc(100vw - 20px)}}@media(max-width:480px){.app[data-layers=false] .body{grid-template-columns:1fr}.app[data-layers=false] .tools{left:50%}} +@media(max-width:480px){.tools{max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center}.top{gap:3px}.top>input{width:60px;min-width:0;flex:1}.brand{gap:4px}.account{max-width:55px}.top>button{padding:5px}.top .primary{padding:6px;font-size:9px;gap:4px}}