Skip to content

Prevent Negative Margins#9215

Open
jrjohnson wants to merge 6 commits intoilios:masterfrom
jrjohnson:prevent-nagiative-margins
Open

Prevent Negative Margins#9215
jrjohnson wants to merge 6 commits intoilios:masterfrom
jrjohnson:prevent-nagiative-margins

Conversation

@jrjohnson
Copy link
Member

Adding a linting rule which will prevent negative margins. These are a problem in Ilios because they allow a component to exist outside of it's intended layout which makes working with multiple components in a grouping difficult.

Adding a linting rule which will prevent negative margins. These are a
problem in Ilios because they allow a component to exist outside of it's
intended layout which makes working with multiple components in a
grouping difficult.
I think these made the layout worse, gone now. I also added a number of
screenshot tests and a coruse search test as I was checking this.
Specifically allowing this as it's how the arrows fit back together and
it's internal to the component.
This subtle alignment tweak doesn't hold up everywhere. Removing it
wholesale, we can put it back later if needed.
This won't intrude on other components as it's positioned absolutely,
plus this incantation is kind of a standard and works as is I'm not
included to mess with it.
@netlify
Copy link

netlify bot commented Mar 6, 2026

Deploy Preview for ilios-frontend ready!

Name Link
🔨 Latest commit 705460d
🔍 Latest deploy log https://app.netlify.com/projects/ilios-frontend/deploys/69ab62623281c000081b422e
😎 Deploy Preview https://deploy-preview-9215--ilios-frontend.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sometimes (like when we use a {{let}} at the top of a template) the
first element we encounter isn't the container we want to screenshot.
In that case we can actually keep looking and probably find a good one
to use.
@github-actions
Copy link
Contributor

github-actions bot commented Mar 6, 2026

❌ Visual Diff Report — FAILED

864 images compared: 26 different · 96 added · 742 identical

Details

Differences (26)

File Diff % Notes
desktop-Acceptance _ Program Year - Objective Vocabulary Terms _ manage and save terms _ .png 0.06%
desktop-Integration _ Component _ courses_loading _ it renders _ .png 100.00% ⚠️ Dimension mismatch (2976x1000 → 3290x1000)
laptop-Acceptance _ Admin _ can search for users _ search results dropdown.png 0.09%
laptop-Acceptance _ Program Year - Course associations _ course associations are expanded if URL contains corresponding parameter _ .png 0.07%
laptop-Acceptance _ Program Year - Course associations _ expand and collapse course associations _ .png 0.08%
laptop-Acceptance _ Program Year - Objective Vocabulary Terms _ manage and save terms _ .png 0.06%
laptop-Acceptance _ Program Year - Terms _ list terms _ .png 0.07%
laptop-Acceptance _ Program Year - Terms _ manage terms _ .png 0.05%
phone-Acceptance _ Program Year - Cohort members _ cohort members are expanded if URL contains corresponding parameter _ .png 0.15%
phone-Acceptance _ Program Year - Cohort members _ expand and collapse cohort members _ .png 0.15%
phone-Acceptance _ Program Year - Competencies _ list _ .png 0.13%
phone-Acceptance _ Program Year - Competencies _ list with permission to edit _ .png 0.13%
phone-Acceptance _ Program Year - Objectives _ list editable _ .png 0.10%
phone-Acceptance _ Program Year - Objectives _ list not editable _ .png 0.11%
phone-Acceptance _ Program Year - Terms _ list terms _ .png 0.14%
phone-Acceptance _ Program Year - Terms _ manage terms _ .png 0.12%
phone-Integration _ Component _ courses_loading _ it renders _ .png 100.00% ⚠️ Dimension mismatch (764x1000 → 814x1000)
tablet-Acceptance _ Program Year - Cohort members _ cohort members are expanded if URL contains corresponding parameter _ .png 0.11%
tablet-Acceptance _ Program Year - Cohort members _ expand and collapse cohort members _ .png 0.10%
tablet-Acceptance _ Program Year - Leadership _ collapsed leadership _ .png 0.10%
tablet-Acceptance _ Program Year - Leadership _ list leadership _ .png 0.09%
tablet-Acceptance _ Program Year - Objective Vocabulary Terms _ manage and save terms _ .png 0.09%
tablet-Acceptance _ Program Year - Objectives _ list editable _ .png 0.07%
tablet-Acceptance _ Program Year - Objectives _ list not editable _ .png 0.08%
tablet-Acceptance _ Program Year - Terms _ list terms _ .png 0.11%
… and 1 more

Added Files (96)

  • desktop-Integration _ Component _ instructor-group_header _ it renders _ .png
  • desktop-Integration _ Component _ instructor-group_header _ it renders in read-only mode _ .png
  • desktop-Integration _ Component _ instructor-group_header _ validation fails if title is blank _ .png
  • desktop-Integration _ Component _ instructor-group_header _ validation fails if title is too long _ .png
  • desktop-Integration _ Component _ instructor-group_header _ validation fails if title is too short _ .png
  • desktop-Integration _ Component _ reports_new-subject _ can search for course _ .png
  • desktop-Integration _ Component _ reports_new-subject _ can search for user #2506 _ .png
  • desktop-Integration _ Component _ reports_new-subject _ choosing competency selects correct objects _ .png
  • desktop-Integration _ Component _ reports_new-subject _ choosing course selects correct objects _ .png
  • desktop-Integration _ Component _ reports_new-subject _ choosing instructor group selects correct objects _ .png
  • desktop-Integration _ Component _ reports_new-subject _ choosing instructor selects correct objects _ .png
  • desktop-Integration _ Component _ reports_new-subject _ choosing learning material selects correct objects _ .png
  • desktop-Integration _ Component _ reports_new-subject _ choosing mesh term selects correct objects _ .png
  • desktop-Integration _ Component _ reports_new-subject _ choosing program years selects correct objects _ .png
  • desktop-Integration _ Component _ reports_new-subject _ choosing programs selects correct objects _ .png
  • desktop-Integration _ Component _ reports_new-subject _ choosing session selects correct objects _ .png
  • desktop-Integration _ Component _ reports_new-subject _ choosing session type selects correct objects _ .png
  • desktop-Integration _ Component _ reports_new-subject _ choosing term selects correct objects _ .png
  • desktop-Integration _ Component _ reports_new-subject _ it renders _ .png
  • desktop-Integration _ Component _ reports_new-subject _ selecting and de-selecting a MeSH term as prepositional object _ with descriptor.png
  • desktop-Integration _ Component _ reports_new-subject _ selecting and de-selecting a MeSH term as prepositional object _ with term selected.png
  • desktop-Integration _ Component _ reports_new-subject _ selecting and de-selecting an instructor as prepositional object _ with instructor selected.png
  • desktop-Integration _ Component _ reports_new-subject _ selecting and de-selecting an instructor as prepositional object _ with instructor.png
  • desktop-Integration _ Component _ reports_new-subject _ title too long _ .png
  • laptop-Integration _ Component _ instructor-group_header _ it renders _ .png
  • … and 71 more

Download the results.

@jrjohnson jrjohnson marked this pull request as ready for review March 6, 2026 23:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant