discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

my-sky applet DEL btn: shift left by half the applet's padding asymmetry so it re-aligns w. the SVG center

Browse Source 
The applet section uses padding 0.75rem 0.75rem 0.75rem 2.5rem — the 2.5rem left gutter holds the rotated h2 — so the SVG's geometric center lands 0.875rem right of the applet's padding-box center. Absolute positioning on the DEL btn references the padding box center, which put the btn 14px left of the wheel's actual center. Compensating w. left:calc(50% + 0.875rem) on #id_applet_sky_delete_btn re-aligns the btn (verified 0px dx/dy in the live browser). The other two DEL anchors (Dashsky #id_sky_delete_form & PICK SKY #id_sky_delete_btn) live in symmetric .sky-wheel-col containers so the base 50%/50% rule still works for them.

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-08 14:44:54 -04:00
parent e9bceaab62
commit 097a5dd437
1 changed files with 8 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/static_src/scss/_sky.scss
View File

@@ -972,6 +972,14 @@ body.page-sky {
margin: 0; margin: 0;
} }
// The applet's padding is asymmetric — 2.5rem left (rotated h2 gutter) and
// 0.75rem right — so the SVG's geometric center sits 0.875rem right of the
// applet's padding-box center. Shift the DEL btn by half the asymmetry so it
// re-aligns with the SVG's actual center instead of the applet's box center.
#id_applet_sky_delete_btn {
left: calc(50% + 0.875rem);
}
// Stack wheel above form; allow body to grow past viewport (page scrolls, not body) // Stack wheel above form; allow body to grow past viewport (page scrolls, not body)
.sky-page .sky-modal-body { .sky-page .sky-modal-body {
flex-direction: column; flex-direction: column;