Widen arrow underneath popups

[ErikBoesen]

Would be nice if it matched the width of the popup itself.

[JonathanOppenheimer]

Occurs when there's more than 1 column. Examples below

Correct width:

Insuffcient width:

[JonathanOppenheimer]

Just looked into this and it should be pretty simple -- Erik already set up a variable for the number of columns on line 255 of scripts.js for use in popup.css:

info.style.setProperty('--num-columns', Math.ceil(studentsList.children.length / 5));

In the same vein that --num-columns is used on lines 91-98 (right below) to set the popup content width, it should be super easily done for the tip widths.

.popup-content .institution-container {
margin: 0px auto;
max-width: calc(200px * var(--num-columns));
}
.popup-content {
width: calc(200px * var(--num-columns));
box-sizing: content-box;
}

I set it up using the border.left and the border.right (currently lines 28 and 29) which has a default value of 105px. Multiplying 105px by the number of columns adjusts the tip to be the right size. For example, if we hard set a column number of 2 with the code below, the following is observed:

--border-width: calc(105px * 2);
border-left: var(--border-width) solid transparent;
border-right: var(--border-width) solid transparent;

Works as intended. However when replacing the hardcoded 2 with the actual variable with the code below, the arrow just dips out.

--border-width: calc(105px * var(--num-columns));
border-left: var(--border-width) solid transparent;
border-right: var(--border-width) solid transparent;

I've confirmed that this variable actually does work by logging it and obviously the --num-columns variable works in it's other instances.

I've messed extensively with syntax and other stuff tryna get it to work - I would like the half an hour I spent on a triangle back.

[AndrewLester]

I think we tested this on the max column size and it looked a bit odd. We can either close this issue or attempt a fix for Jonathan's problem. The fix is to just put the css variable one element higher in the DOM.