In the various modal dialog boxes around the site (for flagging, closing, etc.), users are typically presented with several options to chose from using a set of radio buttons.
Problem
The content in the <label> for each option is not styled properly, creating unclickable dead-zones. It is especially annoying in between the action name and description. This can be seen in the screenshot below. Looking at the it is not an answer option, I've placed a yellow background behind the clickable areas to select that radio button.
The markup for each option looks like this:
<li>
<label>
<input type="radio" name="top-form" value="AnswerNotAnAnswer">
<span class="action-name"> it is not an answer</span>
<span class="action-desc">This was posted as an answer, but it does not attempt to answer the question. It should possibly be an edit, a comment, another question, or deleted altogether.</span>
</label>
</li>
Solution
For maximum usability, the clickable area should look like this:
The <input> element should be moved within the first <span> and some new CSS should be added.
<li>
<label>
<span class="action-name"><input type="radio" name="top-form" value="AnswerNotAnAnswer">it is not an answer</span>
<span class="action-desc">This was posted as an answer, but it does not attempt to answer the question. It should possibly be an edit, a comment, another question, or deleted altogether.</span>
</label>
</li>
.action-name {
display: block;
}
.action-name input {
margin-right: 5px;
}
.action-desc {
/* margin: 6px 0 10px 18px; remove the margin, replace with padding */
padding: 6px 0 10px 18px;
}
These changes will keep the same presentation, but allow the entirety of the label to be clicked to select the radio button.
