Icinga / icingaweb2

A lightweight and extensible web interface to keep an eye on your environment. Analyse problems and act on them.
https://icinga.com/get-started/
GNU General Public License v2.0
808 stars 280 forks source link

Large-text labeled radio buttons overflow across from inputs column #4588

Open Al2Klimov opened 2 years ago

Al2Klimov commented 2 years ago

Describe the bug

Bildschirmfoto 2021-11-07 um 11 41 32

To Reproduce

<?php
// SPDX-License-Identifier: AGPL-3.0-or-later
namespace Icinga\Module\Manufaktura_elfov\Forms;

use Icinga\Web\Form;

class RegisterPhotosForm extends Form
{
    public function init(): void
    {
        $this->setTitle($this->translate('Donate your photos'));
        $this->setSubmitLabel($this->translate('Register'));
    }

    public function createElements(array $formData): void
    {
        $this->addElement('text', 'name', [
            'label' => $this->translate('Your name (latin)'),
            'required' => true
        ]);

        $this->addElement(
            'note',
            'name_notice',
            [
                'value'         => '<strong class="form-notifications warning">'
                    . $this->getView()->escape($this->translate(
                        "Your name won't be published unless you wish it. (See below.)"
                    ))
                    . '</strong>'
            ]
        );

        $this->addElement('radio', 'credits', [
            'label' => $this->translate('Credits'),
            'required' => true,
            'multiOptions' => [
                'anonymous'=>$this->translate(
                    "I want to stay anonymous, I fear the Russian Federal Service of Barbarians (FSB)."
                ),
                'report'=>$this->translate(
                    'Mention my name in your regularily published transparency reports for periods you use my photos during.'
                ),
                'usage'=>$this->translate(
                    'Mention my name in your regularily published transparency reports for periods you use my photos during and below every single photo usage.'
                )
            ]
        ]);
    }
}

Expected behavior

Imagine the form is a table of two columns, one for the element names and one for the inputs. The inputs shall not cross their column.

Your Environment

Docker master.

Additional context

A nice, small, isolated trainee task.

Al2Klimov commented 2 years ago

Same for long notes.