diff --git a/public/robot_kinematics_three_test.html b/public/robot_kinematics_three_test.html index 8c29ce8..c48d7eb 100644 --- a/public/robot_kinematics_three_test.html +++ b/public/robot_kinematics_three_test.html @@ -27,7 +27,7 @@ html, body { width: 100%; - min-height: 100%; + height: 100%; } body { @@ -39,6 +39,7 @@ sans-serif; color: var(--text); background: var(--bg); + overflow: hidden; } button, @@ -129,17 +130,24 @@ .app { display: grid; grid-template-columns: minmax(336px, 420px) minmax(0, 1fr); - min-height: 100dvh; + height: 100dvh; + min-height: 0; + overflow: hidden; } .side { display: flex; flex-direction: column; gap: 16px; + min-height: 0; + height: 100dvh; + overflow-x: hidden; + overflow-y: auto; padding: 18px; border-right: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); + overscroll-behavior: contain; z-index: 2; } @@ -233,7 +241,8 @@ .scene-wrap { position: relative; min-width: 0; - min-height: 100dvh; + min-height: 0; + height: 100dvh; overflow: hidden; background: #dfe7ec; } @@ -242,7 +251,6 @@ display: block; width: 100%; height: 100%; - min-height: 100dvh; } .scene-toolbar { @@ -318,11 +326,21 @@ } @media (max-width: 940px) { + body { + overflow: auto; + } + .app { grid-template-columns: 1fr; + height: auto; + min-height: 100dvh; + overflow: visible; } .side { + height: auto; + max-height: none; + overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); box-shadow: none; @@ -330,7 +348,8 @@ .scene-wrap, #scene { - min-height: 58dvh; + height: 58dvh; + min-height: 360px; } }