One weird thing I noticed in the side panel HTML is that there are hidden <p> tags that take up some space at the bottom of the sample / feature metadata coloring panels:
While trying to figure out the cause of this I ran the side panel HTML through prettier (currently prettier just works on the JS/CSS, but it supports HTML). prettier gave the following error:
[error] empress/support_files/templates/side-panel.html: SyntaxError: Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (62:3)
[error] 60 | </p>
[error] 61 | </div>
[error] > 62 | </p>
[error] | ^
[error] 63 | </div>
[error] 64 |
[error] 65 | <!-- Feature Metadata Coloring Options -->
It looks like the reason for this (https://github.com/prettier/prettier/issues/5833) is that putting other <p> tags, or <div> tags, inside of <p> is not allowed per the HTML spec. I suspect this is causing small formatting problems in some browsers, likely including the one I mentioned earlier. (Even if not, we should try to have valid HTML.)
I think the way to address this is change the top-level <p> tags to <div>, make sure they're styled as they were before (or close enough), and then re-run the HTML through prettier. I think this should fix things?
One weird thing I noticed in the side panel HTML is that there are hidden
<p>tags that take up some space at the bottom of the sample / feature metadata coloring panels:While trying to figure out the cause of this I ran the side panel HTML through prettier (currently prettier just works on the JS/CSS, but it supports HTML). prettier gave the following error:
It looks like the reason for this (https://github.com/prettier/prettier/issues/5833) is that putting other
<p>tags, or<div>tags, inside of<p>is not allowed per the HTML spec. I suspect this is causing small formatting problems in some browsers, likely including the one I mentioned earlier. (Even if not, we should try to have valid HTML.)I think the way to address this is change the top-level
<p>tags to<div>, make sure they're styled as they were before (or close enough), and then re-run the HTML through prettier. I think this should fix things?