style(next)/search in note: gracefully handle narrow widths

This commit is contained in:
Adorian Doran 2025-03-03 22:47:32 +02:00
parent 605d99a7e8
commit 3b16ad508e

View File

@ -138,6 +138,10 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
* Search in text panel
*/
.find-replace-widget {
container-type: inline-size;
}
.find-replace-widget > div {
padding: 8px;
}
@ -159,8 +163,73 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
.find-replace-widget .form-check {
padding-left: 0;
white-space: nowrap;
}
.find-replace-widget .form-check .form-check-input {
margin-left: 0;
}
/* Narrow version */
@container (max-width: 600px) {
.find-replace-widget > *,
.find-replace-widget input,
.find-replace-widget button.btn.btn-sm {
font-size: .9em;
}
.find-widget-box {
position: relative;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
}
.find-widget-box,
.replace-widget-box {
padding-right: 3em !important;
}
.find-widget-close-button {
position: absolute;
top: .85em;
right: .5em;
}
.find-widget-box > * {
margin: unset !important;
}
div.find-widget-search-term-input-group {
margin-bottom: 8px;
max-width: unset;
width: 100%;
}
.find-widget-found-wrapper,
.find-widget-found-wrapper > span {
min-width: 0 !important;
}
.find-widget-spacer {
display: none;
}
.form-check {
min-height: unset;
margin-bottom: unset;
}
.replace-widget-box {
gap: 8px;
}
.replace-widget-box > * {
margin-right: unset !important;
}
div.replace-widget-box button.btn.btn-sm {
min-width: unset;
white-space: nowrap;
}
}