trotFunky
2b3dd28fed
It looks like the width of the element is calculated *inside* the padding, so the outer width is really width+2*padding. This leads to the edit box going outside of the truth column and clipping the graph. Compute the width to take the padding into account.
86 lines
1.3 KiB
CSS
86 lines
1.3 KiB
CSS
.top_bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-right: 2em;
|
|
}
|
|
|
|
.page_body {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
.truth_list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 50vw;
|
|
padding-left: 1eM;
|
|
}
|
|
|
|
.individual_truth {
|
|
padding-bottom: 2em;
|
|
}
|
|
|
|
.editor {
|
|
width: calc(100% - 1.25em); /* The width is calculated *inside* the padding, so adjust for it. */
|
|
height: 6eM;
|
|
font-size: large;
|
|
padding: 0.5em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.graph {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-content: center;
|
|
margin-right: 2vw;
|
|
width: 45vw;
|
|
height: auto;
|
|
}
|
|
|
|
.graph > div {
|
|
width: 100%;
|
|
height: 80vh;
|
|
position: sticky;
|
|
top: 25%;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 2px solid #9ec5fe;
|
|
color: #9ec5fe;
|
|
overflow: visible;
|
|
text-align: center;
|
|
height: 5px;
|
|
width: 100%;
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 2px solid #9ec5fe;
|
|
padding-left: 1eM;
|
|
margin-left: 1.5eM
|
|
}
|
|
|
|
blockquote > blockquote {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
body {
|
|
margin-bottom: 10eM;
|
|
}
|
|
|
|
body > h2 {
|
|
padding-left: 0.25eM;
|
|
}
|
|
|
|
@media (orientation: portrait) {
|
|
.truth_list {
|
|
width: 60vw;
|
|
}
|
|
|
|
.graph {
|
|
width: 35vw;
|
|
}
|
|
}
|