Expand dotted canvas to full screen and verify real tool gestures

apps/studio/src/styles/infinite-canvas.module.css

@@ -2,3 +2,5 @@
 /* Nodes are real editors in world coordinates. The header alone owns node movement. */
 .card{display:flex;flex-direction:column;overflow:hidden;min-width:260px;min-height:300px}.cardHead{flex-shrink:0;user-select:none}.cardHead>span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cardBody{flex:1;min-height:0;padding:16px;display:flex;flex-direction:column;gap:12px}.cardBody input,.cardBody textarea{width:100%;color:#e0e4e5;background:#181c1f;border:1px solid #3c454b;border-radius:6px;padding:10px;outline-color:#d9ef9b}.cardBody textarea{flex:1;min-height:55px;resize:none;line-height:1.7;touch-action:auto}.cardBody input{flex-shrink:0}.card footer{flex-shrink:0}.image{flex:1;min-height:0}.resize{position:absolute!important;right:0;bottom:0;width:25px;height:25px;padding:0!important;border:0!important;border-radius:5px 0 0!important;cursor:nwse-resize!important;touch-action:none}.viewport{overscroll-behavior:contain}.disconnected{flex-shrink:0}.port{right:0}.world{width:0;height:0}
 .card{overflow:visible}.cardBody{overflow:hidden}.inputPort,.outputPort{position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border:2px solid #1a1d20;border-radius:50%;background:#d9ef9b;pointer-events:none}.inputPort{left:-5px}.outputPort{right:-5px}.cardHead:active{cursor:grabbing}
+/* Full-screen canvas: chrome floats above the world and never reserves layout space. */
+.app{height:100dvh;min-height:0;overflow:hidden}.workspace{position:absolute;inset:0;height:100%;display:block}.canvasArea{position:absolute;inset:0;width:100%;height:100%;background:none}.viewport{inset:0;background-color:#16191c;background-image:radial-gradient(circle,#556068 1px,transparent 1px);background-size:24px 24px}.canvasTitle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.header{position:absolute;z-index:5;top:16px;left:16px;right:auto;height:48px;max-width:calc(100% - 32px);padding:6px 10px;gap:12px;background:#202529eb;border:1px solid #424a51;border-radius:12px;box-shadow:0 8px 24px #0003;backdrop-filter:blur(12px)}.header strong,.header>i,.header .crumb,.header .badge{display:none}.header .brand{font-size:14px}.header .brand span{font-size:18px}.header a[href='/account']{font-size:11px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header .export{padding:8px}.rail{position:absolute;z-index:4;left:16px;top:50%;transform:translateY(-50%);width:48px;height:auto;padding:6px;gap:5px;border:1px solid #424a51;border-radius:12px;background:#202529eb;box-shadow:0 8px 24px #0003;backdrop-filter:blur(12px)}.rail button{width:34px;height:34px;padding:8px}.rail>.spacer,.rail>span{display:none}.rail hr{margin:3px}.canvasBottom{z-index:3;bottom:16px;left:16px;right:16px;pointer-events:none;flex-direction:row;align-items:center}.canvasBottom>span{max-width:none;padding:7px 10px;border-radius:7px;background:#202529c9}.controls{pointer-events:auto}.inspector{display:none;position:absolute;z-index:4;top:76px;left:16px;width:280px;max-height:calc(100dvh - 160px);height:auto;border:1px solid #424a51;border-radius:12px;padding:0 18px 20px;box-shadow:0 12px 32px #0005}.inspectorOpen{display:block}.inspectorClosed{display:none}.panelHeading{height:48px;margin-bottom:18px}.inspector h2{font-size:16px;margin-bottom:16px}.inspector .help{margin-top:18px}@media(max-width:700px){.header{top:10px;left:10px;max-width:calc(100% - 20px);gap:8px}.header>a:not(.brand):not(.back){display:none}.header .brand{font-size:12px}.header .export{font-size:11px}.rail{left:10px}.canvasBottom{left:10px;right:10px;bottom:10px;align-items:flex-end;gap:6px}.canvasBottom>span{max-width:110px;font-size:9px}.controls{gap:1px}.controls button{padding:6px}.inspector{left:10px;top:68px;width:min(280px,calc(100vw - 20px))}}