Fix clipped keyboard settings overlay.

chrome/browser/resources/options/chromeos/keyboard_overlay.html

 <div id="keyboard-overlay" class="page" hidden>
   <div class="close-button"></div>
   <h1 i18n-content="keyboardOverlayTitle"></h1>
   <div class="content-area">
     <table class="option-control-table">
        <tr>
          <td>
            <label class="option-name" for="remap-search-key-to"
                i18n-content="remapSearchKeyToContent">
            </label>
@@ skipping 59 matching lines @@
          </td>
          <td class="option-value">
            <select id="remap-diamond-key-to" class="control"
                data-type="number"
                metric="Options_KeyboardRemapDiamondKey"
                pref="settings.language.remap_diamond_key_to"
                i18n-options="remapDiamondKeyToValue" dialog-pref></select>
          </td>
        </tr>
     </table>
     <div class="settings-row">

[Dan Beam, 2014/07/10 02:22:28]

^ like this

       <div class="checkbox">
         <span class="controlled-setting-with-label">
           <input id="send-function-keys" type="checkbox"
               pref="settings.language.send_function_keys" dialog-pref>
           <span>
             <label for="send-function-keys" i18n-content="sendFunctionKeys">
             </label>
             <span class="bubble-button controlled-setting-indicator"
                 pref="settings.language.send_function_keys"></span>
           </span>
         </span>
       </div>
       <label id="send-function-keys-description" for="send-function-keys"
           i18n-content="sendFunctionKeysDescription">
       </label>
     </div>

[Dan Beam, 2014/07/10 02:22:28]

I meant:

  <div class="settings-row">
    <button>
    <button>
  </div>

or

  <div class="settings-row">
    <button ...>
  </div>
  <div class="settings-row">
    <button ...>
  </div>

if they need to be on separate lines (for some reason)

[michaelpg, 2014/07/10 02:43:17]

That's what I had at first, but I did a code search and there didn't seem to be
a specific structure. So I wasn't sure.

Searching for 'class=\"settings-row\"' turns up examples like

<div class="settings-row">
<span class="settings-row">
<label class="settings-row">

Can I ask what the <div> adds? Easier to see the structure in the code?

[Dan Beam, 2014/07/10 21:00:49]

<div>s are block

-  </div>
-  <div class="content-area">
-    <button id="keyboard-shortcuts" class="link-button"
+    <button id="keyboard-shortcuts" class="settings-row link-button"
         i18n-content="showKeyboardShortcuts"></button>
-  </div>
-  <div class="content-area">
-    <button id="languages-and-input-settings" class="link-button"
+    <button id="languages-and-input-settings" class="settings-row link-button"
         i18n-content="changeLanguageAndInputSettings"></button>
   </div>
   <div class="action-area">
     <div class="button-strip">
       <button id="keyboard-cancel" type="reset" i18n-content="cancel"></button>
       <button id="keyboard-confirm" class="default-button" type="submit"
           i18n-content="ok">
       </button>
     </div>
   </div>
 </div>