Session log — medistage how-it-works connector line alignment
← All session logs
Session log — medistage how-it-works connector line alignment
Summary
- Hasmukh shared a screenshot of the "How it works" section on the medistage homepage and pointed out that the thin horizontal connector line between the three numbered circles looked misaligned.
- Confirmed the site in question was medistage.medilearn.africa.
- Diagnosed the cause and corrected the vertical position of the connector so it now threads through the centre of the three numbered badges.
Decisions
- Treat the connector line as visually broken when it does not pass through the vertical centre of the numbered circles.
- Edit the SCSS source held in the database option Medilearn_css, then trigger the HTTPS recompile endpoint to regenerate css.css. Editing css.css directly is not durable on medistage because the recompile overwrites the compiled file from the database source.
- Use a top offset that accounts for the card top padding plus half the circle height, less half the line height, so the line sits exactly on the circle centres.
Changes made
- Located the "How it works" section in the homepage content row and traced its styling to the .steps and .steps::before rules in the medilearn theme stylesheet on medistage.
- Identified that the connector was positioned at top: 36px from the top of the row, while the circle centres sit at 68px (32px card padding plus 36px half-circle), leaving the line about 32px above where it should be.
- Backed up the on-disk css.css to css.css.bak-20260526-stepsline, and saved a copy of the original SCSS source to /root/backups/medistage/medilearn_scss-pre-stepsline-20260526.scss.
- First tried a sed edit on the compiled css.css, then discovered the recompile endpoint overwrites that file from the database, so the change reverted.
- Updated the SCSS source held in the Medilearn_css option in the medistage database, changing top: 36px to top: 67px inside the .steps::before block (1px less than centre to compensate for the 2px line thickness).
- Triggered the HTTPS recompile endpoint on medistage and confirmed the compiled css.css now carries top: 67px.
- Verified by fetching the live stylesheet over HTTPS that the public site is serving the corrected rule.
Follow-ups
- Hasmukh to refresh the medistage homepage with a hard reload and confirm visually that the connector now passes cleanly through the centre of the three circles on desktop.
- If the line position still looks off on a particular screen width, revisit the top value, since the rule only applies above 769px and the circles always sit 68px from the top of the row at that breakpoint.
- The five session logs already queued for publication (broadcast captions, hide register-now button, setshedi block lookup, workspace question, and setshidi profile block request) remain pending. They were not actioned in this session because Hasmukh's request was specifically the connector-line fix.