ParkerTenBroeck/automata
1
0
Fork 0
mirror of https://github.com/ParkerTenBroeck/automata.git synced 2026-06-07 05:28:45 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed small issue where main vertical splitter was causing overflow

Browse source
This commit is contained in:
ParkerTenBroeck 2026-01-08 17:06:32 -05:00
parent 7b1693e9d2
commit 13bcab9cd1
3 changed files with 17 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/root/index.html
View file

@ -36,7 +36,7 @@
<div class="hSplit" style="--split-default: 50%" title="Drag to resize canvas height"></div> <div class="hSplit" style="--split-default: 50%" title="Drag to resize canvas height"></div>
<div style="padding-bottom: 10px"> <div class="flexCol">
<div class="controls" style="background: var(--bg-0)"> <div class="controls" style="background: var(--bg-0)">
<button id="togglePhysics" class="btn btn-toggle active" title="Toggle physics layout"> <button id="togglePhysics" class="btn btn-toggle active" title="Toggle physics layout">
Physics: ON Physics: ON

5
web/root/src/splitters.ts
View file

@ -154,10 +154,7 @@ export function enableFlexSplitters() {
const gap = splitter.getBoundingClientRect().width || 8; const gap = splitter.getBoundingClientRect().width || 8;
splitter.style.flex = `0 0 ${gap}px`; splitter.style.flex = `0 0 ${gap}px`;
// Optional per-splitter CSS vars:
// --split-default: 30% (right pane width)
// --split-min-a: 220px (min left)
// --split-min-b: 220px (min right)
const defPct = getVarPct(splitter, "--split-default", 50); const defPct = getVarPct(splitter, "--split-default", 50);
const minA = getVarPx(splitter, "--split-min-a", 220); const minA = getVarPx(splitter, "--split-min-a", 220);
const minB = getVarPx(splitter, "--split-min-b", 220); const minB = getVarPx(splitter, "--split-min-b", 220);

16
web/root/style/style.scss
View file

@ -29,7 +29,17 @@ body {
.vscroll { .vscroll {
height: 100%; height: 100%;
overflow-x: scroll; overflow-y: scroll;
}
.flexCol{
display: flex;
flex-direction: column;
}
.flexRow{
display: flex;
flex-direction: row;
} }
.hSplit { .hSplit {
@ -37,6 +47,8 @@ body {
cursor: col-resize; cursor: col-resize;
} }
height: 8px; height: 8px;
min-height: 8px;
max-height: 8px;
background: var(--separator-bg); background: var(--separator-bg);
transition: transition:
background var(--dur-med) var(--ease-standard), background var(--dur-med) var(--ease-standard),
@ -48,6 +60,8 @@ body {
cursor: col-resize; cursor: col-resize;
} }
width: 8px; width: 8px;
min-width: 8px;
max-width: 8px;
background: var(--separator-bg); background: var(--separator-bg);
transition: transition:
background var(--dur-med) var(--ease-standard), background var(--dur-med) var(--ease-standard),