Inconsistent Widths in Form Section Components #4

New issue

Closed

opened 2024-11-16 10:44:22 +00:00 by revengeday · 0 comments

revengeday commented

2024-11-16 10:44:22 +00:00

Owner

The styling of the <section class="form-section"> contains inconsistent widths, causing the input field for the Fediverse handle to not align with the width of the software selection radio buttons and the generate button. This inconsistency affects the overall visual unity and alignment of the form elements.

Steps to Reproduce:

Navigate to the page containing the form section in question.
Observe the width of the Fediverse handle input field.
Compare it to the widths of the software selection radio buttons and the generate button.

Expected Behavior:
All components within the form section, including the Fediverse handle input, software selection, and generate button, should have consistent widths for a harmonious visual appearance.

Affected HTML Section:

<section class="form-section">
    <div class="form-container">
        <form id="generateForm" onsubmit="(async () => await circleMain())(); return false;">
            <input id="txt_mastodon_handle" type="text" placeholder="e.g. @datakrash@corteximplant.net" required="">
            <div class="radio-group">
                <input type="radio" id="detect" name="backend" value="detect" autocomplete="off" checked="">
                <label for="detect">↳ Autodetect</label>
                <input type="radio" id="mastodon" name="backend" value="mastodon" autocomplete="off">
                <label for="mastodon">Mastodon API</label>
                <input type="radio" id="misskey" name="backend" value="misskey" autocomplete="off">
                <label for="misskey">Misskey API</label>
                <input type="radio" id="pleroma" name="backend" value="pleroma" autocomplete="off">
                <label for="pleroma">Pleroma API</label>
            </div>
            <div class="slider-container">
                <label for="countSlider">Cyber Score:</label>
                <input type="range" id="countSlider" name="count" min="1" max="1000" value="250" step="1">
                <span id="sliderValueDisplay">250</span>
            </div>
            <button type="submit" id="generateButton">⟨ Generate ⟩</button>
        </form>
    </div>
</section>

The styling of the `<section class="form-section">` contains inconsistent widths, causing the input field for the Fediverse handle to not align with the width of the software selection radio buttons and the generate button. This inconsistency affects the overall visual unity and alignment of the form elements. Steps to Reproduce: 1. Navigate to the page containing the form section in question. 2. Observe the width of the Fediverse handle input field. 3. Compare it to the widths of the software selection radio buttons and the generate button. Expected Behavior: All components within the form section, including the Fediverse handle input, software selection, and generate button, should have consistent widths for a harmonious visual appearance. Affected HTML Section: ```html <section class="form-section"> <div class="form-container"> <form id="generateForm" onsubmit="(async () => await circleMain())(); return false;"> <input id="txt_mastodon_handle" type="text" placeholder="e.g. @datakrash@corteximplant.net" required=""> <div class="radio-group"> <input type="radio" id="detect" name="backend" value="detect" autocomplete="off" checked=""> <label for="detect">↳ Autodetect</label> <input type="radio" id="mastodon" name="backend" value="mastodon" autocomplete="off"> <label for="mastodon">Mastodon API</label> <input type="radio" id="misskey" name="backend" value="misskey" autocomplete="off"> <label for="misskey">Misskey API</label> <input type="radio" id="pleroma" name="backend" value="pleroma" autocomplete="off"> <label for="pleroma">Pleroma API</label> </div> <div class="slider-container"> <label for="countSlider">Cyber Score:</label> <input type="range" id="countSlider" name="count" min="1" max="1000" value="250" step="1"> <span id="sliderValueDisplay">250</span> </div> <button type="submit" id="generateButton">⟨ Generate ⟩</button> </form> </div> </section> ```