Pop-up citation blocked by catalogue entry image

[Erin-Cecele]

Per @zsofiaj in discussion #930

If you click on Romagnoli 1835 in note 3 of the entry below, does the left side of the citation box appear hidden under the image at left? That's what it does on my screen when I click on any citation that is at the far left of the text column. I can attach a screenshot if it doesn't behave the same on your end. Should this be documented under the Issues section?

https://volume-2-batch-1--italian-paintings-live.netlify.app/catalogue/volume-1/the-sienese-school/50/#fn1

[Erin-Cecele]

This has to do with different elements' z-indexes (https://developer.mozilla.org/en-US/docs/Web/CSS/z-index), in other words, the ordering of elements that are layered on top of each other. This can be set in CSS.

Not sure if this is a bug per se yet. Need to see if we can reproduce. Then we will open a new issue.

[lucafalefoto]

z-index works only on positioned elements, and this is not the case as far as I know.

[lucafalefoto]

@Erin-Cecele you can easily reproduce the bug if you follow the original post to the letter, i.e. "Romagnoli 1835 in note 3".

[Erin-Cecele]

Apologies for the confusion; I meant to reproduce it in a new project to ensure it's not something specific to @zsofiaj's project.

[Erin-Cecele]

@lucafalefoto suggests this as a possible solution in the meantime:

.quire-citation .quire-citation__content {
    left: 120%;
}

[zsofiaj]

Thanks so much, @lucafalefoto ! That worked great, although I had to change it to 170%, because the left edge of a handful of citations were still cutting off. One example is note 13 at the link below. Changing it to 170 fixed it.

https://volume-2-batch-1--italian-paintings-live.netlify.app/catalogue/volume-1/the-sienese-school/50/#fn13