YOUreka/tools-legacy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(cropper): responsive editor layout

Browse Source 
Two-column editor at >=900px (crop pad + cleaned preview left, cleaning/
review controls right), single column below; panel headers wrap their
hints onto their own line on narrow screens.
This commit is contained in:
adebisi-fa
2026-10-01 01:22:18 +01:00
parent 58b8b9c862
commit 2f0a1fab21
2 changed files with 73 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/public/assets/style.css
+11
View File
@@ -169,6 +169,17 @@ select.form-control { appearance: auto; }
/* ── alerts ─────────────────────────────────────────────── */
.alert-soft { border-radius: 10px; border: 1px solid var(--err-soft); background: var(--err-soft); color: var(--err); font-size: 13.5px; padding: 0.6rem 0.9rem; }
/* ── editor grid (cropper) ──────────────────────────────── */
.editor-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 900px) {
.editor-grid { grid-template-columns: 300px 1fr; align-items: start; }
}
.panel-head { flex-wrap: wrap; }
.panel-head .hint { flex-basis: 100%; margin-left: 0; }
@media (min-width: 720px) {
.panel-head .hint { flex-basis: auto; margin-left: auto; }
}
/* ── footer ─────────────────────────────────────────────── */
footer.foot { flex-shrink: 0; padding: 1.4rem 0 1.8rem; color: var(--faint); font-size: 12.5px; }
footer.foot .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }