Give the topic a full-width row so the setter's full host fits on one line
This commit is contained in:
parent
606c212d3a
commit
aa2e36007d
2 changed files with 34 additions and 32 deletions
|
|
@ -111,6 +111,37 @@ export function ChanAdminModal() {
|
|||
return (
|
||||
<Modal title={t('modals.chanadmin.manage', { chan })} wide onClose={() => setModal('')}>
|
||||
<div className="ca-layout">
|
||||
<div className="ca-sec ca-topicrow">
|
||||
<h4 className="ca-h">{t('modals.chanadmin.subject')}</h4>
|
||||
{editingTopic ? (
|
||||
<div className="modal__actions">
|
||||
{/* Editing works on the RAW topic (colour/format codes intact) so
|
||||
setting it back never silently strips the colours. */}
|
||||
<input className="modal__input" autoFocus value={topic} placeholder={t('modals.chanadmin.topic')}
|
||||
onChange={(e) => setTopicVal(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') { modTopic(topic); setEditingTopic(false); } }} />
|
||||
<button className="upbtn upbtn--primary" onClick={() => { modTopic(topic); setEditingTopic(false); }}>{t('modals.chanadmin.setTopic')}</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<button className="ca-topic" onClick={() => { setTopicVal(buffer?.topic || ''); setEditingTopic(true); }} title={t('modals.chanadmin.editTopic')}>
|
||||
<span className="ca-topic__txt">
|
||||
{buffer?.topic ? formatIrc(buffer.topic, false, false) : <span className="ca-topic__empty">{t('modals.chanadmin.noTopicYet')}</span>}
|
||||
</span>
|
||||
<span className="ca-topic__pen" aria-hidden="true">✎</span>
|
||||
</button>
|
||||
{buffer.topicBy ? (
|
||||
<div className="ca-topicby">
|
||||
<span className="ca-topicby__by">
|
||||
{t('modals.chanadmin.topicBy')}{' '}
|
||||
<span className="ca-topicby__who">{setterMask(buffer.topicBy, buffer.members || {})}</span>
|
||||
</span>
|
||||
{buffer.topicAt ? <span className="ca-topicby__when"> · {ago(buffer.topicAt, locale)}</span> : null}
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="ca-main">
|
||||
<div className="ca-tabs" role="tablist">
|
||||
{tabBtn('overview', t('modals.chanadmin.tabOverview'))}
|
||||
|
|
@ -127,38 +158,6 @@ export function ChanAdminModal() {
|
|||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="ca-sec">
|
||||
<h4 className="ca-h">{t('modals.chanadmin.subject')}</h4>
|
||||
{editingTopic ? (
|
||||
<div className="modal__actions">
|
||||
{/* Editing works on the RAW topic (colour/format codes intact) so
|
||||
setting it back never silently strips the colours. */}
|
||||
<input className="modal__input" autoFocus value={topic} placeholder={t('modals.chanadmin.topic')}
|
||||
onChange={(e) => setTopicVal(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') { modTopic(topic); setEditingTopic(false); } }} />
|
||||
<button className="upbtn upbtn--primary" onClick={() => { modTopic(topic); setEditingTopic(false); }}>{t('modals.chanadmin.setTopic')}</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<button className="ca-topic" onClick={() => { setTopicVal(buffer?.topic || ''); setEditingTopic(true); }} title={t('modals.chanadmin.editTopic')}>
|
||||
<span className="ca-topic__txt">
|
||||
{buffer?.topic ? formatIrc(buffer.topic, false, false) : <span className="ca-topic__empty">{t('modals.chanadmin.noTopicYet')}</span>}
|
||||
</span>
|
||||
<span className="ca-topic__pen" aria-hidden="true">✎</span>
|
||||
</button>
|
||||
{buffer.topicBy ? (
|
||||
<div className="ca-topicby">
|
||||
<span className="ca-topicby__by">
|
||||
{t('modals.chanadmin.topicBy')}{' '}
|
||||
<span className="ca-topicby__who">{setterMask(buffer.topicBy, buffer.members || {})}</span>
|
||||
</span>
|
||||
{buffer.topicAt ? <span className="ca-topicby__when"> · {ago(buffer.topicAt, locale)}</span> : null}
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="ca-sec">
|
||||
<h4 className="ca-h">{t('modals.chanadmin.access')}</h4>
|
||||
<div className="ca-param">
|
||||
|
|
|
|||
|
|
@ -1488,6 +1488,9 @@ html[data-density="compact"] .sysline { padding-top: .06rem; padding-bottom: .06
|
|||
.modal:has(.ca-layout) { width: min(800px, 96vw); max-height: 92vh; overflow-y: auto; }
|
||||
.ca-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.4rem; }
|
||||
.ca-main { min-width: 0; }
|
||||
/* Topic spans the full modal width so a long nick!user@host mask (e.g. an IPv6
|
||||
host) fits on one line without being truncated. */
|
||||
.ca-topicrow { grid-column: 1 / -1; margin-top: 0; min-width: 0; }
|
||||
.ca-banscol { min-width: 0; border-left: 1px solid var(--border-2); padding-left: 1.4rem; display: flex; flex-direction: column; }
|
||||
.ca-banscol .ca-h { margin-top: 0; }
|
||||
@media (max-width: 680px) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue