openvibers/openvibe.chat Commits

Settings on phones fit the screen: the form's column could not shrink (a 30 px sideways scroll cut every long line) and a full-width select stuck out by its margin (#119)

OP OpenVibers committed 28 days ago · b10aa48f83 · 1 file, +2 −2

Changes

ddiff --git a/public/web/chat.css b/public/web/chat.css
iindex af68d65..5456393 100644
---- a/public/web/chat.css
++++ b/public/web/chat.css
@@@ -68,11 +68,11 @@ button[disabled] { opacity: .6; cursor: default; }
.oc-conv a { flex: 1; min-width: 0; color: var(--oc-text); text-decoration: none; display: flex; flex-direction: column; }
.oc-conv .oc-last { font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-conv.oc-unread { border-color: var(--oc-accent); }
--.oc-form { display: grid; gap: 10px; max-width: 520px; }
++.oc-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 520px; } /* minmax(0, 1fr): a long label wraps instead of widening the column past a phone screen */
.oc-check { display: flex; gap: 8px; align-items: center; }
.oc-fieldset { border: 1px solid var(--oc-line); border-radius: 12px; padding: 8px 12px; display: grid; gap: 6px; }
.oc-form h2 { font-size: 1rem; margin: 18px 0 4px; }
--.oc-form select { margin-left: 8px; }
++.oc-form select { margin-left: 8px; max-width: calc(100% - 8px); } /* its margin counts too: a full-width select stuck 8 px out on phones */
@media (max-width: 560px) {
.oc-main { padding: 12px 12px 40px; }
.oc-feed { max-height: 60vh; }