Give the topic a full-width row so the setter's full host fits on one line

This commit is contained in:
Jean Chevronnet 2026-07-09 19:38:56 +00:00
parent 606c212d3a
commit aa2e36007d
No known key found for this signature in database
2 changed files with 34 additions and 32 deletions

View file

@ -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">

View file

@ -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) {