diff --git a/internal/server/web/templates/forwards.html b/internal/server/web/templates/forwards.html index e03fec4..b7d3c13 100644 --- a/internal/server/web/templates/forwards.html +++ b/internal/server/web/templates/forwards.html @@ -10,22 +10,19 @@ height:40px; box-sizing:border-box; font-size:14px; line-height:1; margin:0; } .frow select { min-width:0; width:100%; padding:0 30px 0 12px; background-position:right 10px center; } - /* The ufw switch hangs under the button, centred on it, level with the note. */ - .frow .act { position:relative; } - .frow .act label.check { - position:absolute; top:100%; left:50%; transform:translateX(-50%); - display:inline-flex; align-items:center; gap:8px; height:20px; margin:12px 0 0; - color:var(--text); font-size:14px; cursor:pointer; - } - .under { min-height:20px; margin:12px 110px 0 0; font-size:13px; line-height:20px; } + /* Under the fields: the note, and the ufw switch at the right, under the + button - on a line of its own when the room runs out, never over the note. */ + .under { display:flex; align-items:flex-start; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; + min-height:20px; margin:12px 0 0; font-size:13px; line-height:20px; } + .under #note { flex:1 1 240px; min-width:0; } + .under label.check { flex:none; display:inline-flex; align-items:center; gap:8px; height:20px; margin:0 0 0 auto; + color:var(--text); font-size:14px; cursor:pointer; white-space:nowrap; } /* Phones: two fields a line, the label and the button each a line of their own. */ @media (max-width: 640px) { .frow .fld, .frow .fld.addr { width:calc(50% - 6px); } .frow .fld.grow { flex:1 1 100%; } - .frow .act { display:flex; align-items:center; gap:16px; width:100%; } - .frow .act button { flex:1; } - .frow .act label.check { position:static; transform:none; margin:0; } - .under { margin-right:0; } + .frow .act { width:100%; } + .frow .act button { width:100%; } }