From 66e3be157991da0405d3882667fc92e1f4ee53f9 Mon Sep 17 00:00:00 2001
From: Thomas Piccirello <thomas@piccirello.com>
Date: Tue, 16 Oct 2018 00:15:15 -0400
Subject: [PATCH] Replace WebUI Options fixed-width labels

This allows the labels to auto-expand based on the language used, and also removes unnecessary whitespace. Additionally, this results in a look more consistent with the GUI which right-aligns labels.
---
 src/webui/www/private/css/style.css           |  24 --
 src/webui/www/private/download.html           | 138 ++++++---
 .../www/private/preferences_content.html      | 270 +++++++++++++-----
 src/webui/www/private/shareratio.html         |   4 +-
 src/webui/www/private/upload.html             | 126 +++++---
 5 files changed, 369 insertions(+), 193 deletions(-)

diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css
index c47a6a758..12b360888 100644
--- a/src/webui/www/private/css/style.css
+++ b/src/webui/www/private/css/style.css
@@ -375,30 +375,6 @@ fieldset.settings label {
     padding: 2px;
 }
 
-fieldset.settings .leftLabelSmall {
-    width: 5em;
-    float: left;
-    text-align: right;
-    margin-right: 0.5em;
-    display: block;
-}
-
-fieldset.settings .leftLabelMedium {
-    width: 9em;
-    float: left;
-    text-align: right;
-    margin-right: 0.5em;
-    display: block;
-}
-
-fieldset.settings .leftLabelLarge {
-    width: 14em;
-    float: left;
-    text-align: right;
-    margin-right: 0.5em;
-    display: block;
-}
-
 div.formRow {
     clear: left;
     display: block;
diff --git a/src/webui/www/private/download.html b/src/webui/www/private/download.html
index a2312ddc8..b95597031 100644
--- a/src/webui/www/private/download.html
+++ b/src/webui/www/private/download.html
@@ -18,52 +18,98 @@
             <h2 class="vcenter">QBT_TR(Download Torrents from their URLs or Magnet links)QBT_TR[CONTEXT=HttpServer]</h2>
             <textarea id="urls" rows="10" name="urls"></textarea>
             <p>QBT_TR(Only one link per line)QBT_TR[CONTEXT=HttpServer]</p>
-            <fieldset class="settings" style="border: 0; text-align: left;">
-                <div class="formRow" style="margin-top: 6px;">
-                    <label for="savepath" class="leftLabelLarge">QBT_TR(Save files to location:)QBT_TR[CONTEXT=HttpServer]</label>
-                    <input type="text" id="savepath" name="savepath" style="width: 16em;" />
-                </div>
-                <div class="formRow">
-                    <label for="cookie" class="leftLabelLarge">QBT_TR(Cookie:)QBT_TR[CONTEXT=HttpServer]</label>
-                    <input type="text" id="cookie" name="cookie" style="width: 16em;" />
-                </div>
-                <div class="formRow">
-                    <label for="rename" class="leftLabelLarge">QBT_TR(Rename torrent)QBT_TR[CONTEXT=HttpServer]</label>
-                    <input type="text" id="rename" name="rename" style="width: 16em;" />
-                </div>
-                <div class="formRow">
-                    <label for="category" class="leftLabelLarge">QBT_TR(Category:)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
-                    <input type="text" id="category" name="category" style="width: 16em;" />
-                </div>
-                <div class="formRow">
-                    <label for="start_torrent" class="leftLabelLarge">QBT_TR(Start torrent)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
-                    <input type="checkbox" id="start_torrent" checked="checked" />
-                    <input type="hidden" id="add_paused" name="paused" value="false" readonly />
-                </div>
-                <div class="formRow">
-                    <label for="skip_checking" class="leftLabelLarge">QBT_TR(Skip hash check)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
-                    <input type="checkbox" id="skip_checking" name="skip_checking" value="true" />
-                </div>
-                <div class="formRow">
-                    <label for="root_folder" class="leftLabelLarge">QBT_TR(Create subfolder)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
-                    <input type="checkbox" id="root_folder" name="root_folder" value="true" checked="checked" />
-                </div>
-                <div class="formRow">
-                    <label for="sequentialDownload" class="leftLabelLarge">QBT_TR(Download in sequential order)QBT_TR[CONTEXT=TransferListWidget]</label>
-                    <input type="checkbox" id="sequentialDownload" name="sequentialDownload" value="true" />
-                </div>
-                <div class="formRow">
-                    <label for="firstLastPiecePrio" class="leftLabelLarge">QBT_TR(Download first and last pieces first)QBT_TR[CONTEXT=TransferListWidget]</label>
-                    <input type="checkbox" id="firstLastPiecePrio" name="firstLastPiecePrio" value="true" />
-                </div>
-                <div class="formRow">
-                    <label for="dlLimit" class="leftLabelLarge">QBT_TR(Limit download rate)QBT_TR[CONTEXT=HttpServer]</label>
-                    <input type="text" id="dlLimit" name="dlLimit" style="width: 16em;" placeholder="Bytes/s" />
-                </div>
-                <div class="formRow">
-                    <label for="upLimit" class="leftLabelLarge">QBT_TR(Limit upload rate)QBT_TR[CONTEXT=HttpServer]</label>
-                    <input type="text" id="upLimit" name="upLimit" style="width: 16em;" placeholder="Bytes/s" />
-                </div>
+            <fieldset class="settings" style="border: 0; text-align: left; margin-top: 6px;">
+                <table style="margin: auto;">
+                    <tr>
+                        <td>
+                            <label for="savepath">QBT_TR(Save files to location:)QBT_TR[CONTEXT=HttpServer]</label>
+                        </td>
+                        <td>
+                            <input type="text" id="savepath" name="savepath" style="width: 16em;" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="cookie">QBT_TR(Cookie:)QBT_TR[CONTEXT=HttpServer]</label>
+                        </td>
+                        <td>
+                            <input type="text" id="cookie" name="cookie" style="width: 16em;" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="rename">QBT_TR(Rename torrent)QBT_TR[CONTEXT=HttpServer]</label>
+                        </td>
+                        <td>
+                            <input type="text" id="rename" name="rename" style="width: 16em;" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="category">QBT_TR(Category:)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
+                        </td>
+                        <td>
+                            <input type="text" id="category" name="category" style="width: 16em;" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="start_torrent">QBT_TR(Start torrent)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
+                        </td>
+                        <td>
+                            <input type="checkbox" id="start_torrent" checked="checked" />
+                            <input type="hidden" id="add_paused" name="paused" value="false" readonly />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="skip_checking">QBT_TR(Skip hash check)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
+                        </td>
+                        <td>
+                            <input type="checkbox" id="skip_checking" name="skip_checking" value="true" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="root_folder">QBT_TR(Create subfolder)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
+                        </td>
+                        <td>
+                            <input type="checkbox" id="root_folder" name="root_folder" value="true" checked="checked" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="sequentialDownload">QBT_TR(Download in sequential order)QBT_TR[CONTEXT=TransferListWidget]</label>
+                        </td>
+                        <td>
+                            <input type="checkbox" id="sequentialDownload" name="sequentialDownload" value="true" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="firstLastPiecePrio">QBT_TR(Download first and last pieces first)QBT_TR[CONTEXT=TransferListWidget]</label>
+                        </td>
+                        <td>
+                            <input type="checkbox" id="firstLastPiecePrio" name="firstLastPiecePrio" value="true" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="dlLimit">QBT_TR(Limit download rate)QBT_TR[CONTEXT=HttpServer]</label>
+                        </td>
+                        <td>
+                            <input type="text" id="dlLimit" name="dlLimit" style="width: 16em;" placeholder="Bytes/s" />
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="upLimit">QBT_TR(Limit upload rate)QBT_TR[CONTEXT=HttpServer]</label>
+                        </td>
+                        <td>
+                            <input type="text" id="upLimit" name="upLimit" style="width: 16em;" placeholder="Bytes/s" />
+                        </td>
+                    </tr>
+                </table>
                 <div id="submitbutton" style="margin-top: 12px; text-align: center;">
                     <button type="submit" id="submitButton">QBT_TR(Download)QBT_TR[CONTEXT=downloadFromURL]</button>
                 </div>
diff --git a/src/webui/www/private/preferences_content.html b/src/webui/www/private/preferences_content.html
index 630d185c0..1820325c0 100644
--- a/src/webui/www/private/preferences_content.html
+++ b/src/webui/www/private/preferences_content.html
@@ -83,23 +83,47 @@
     <fieldset class="settings">
         <legend><input type="checkbox" id="mail_notification_checkbox" onclick="updateMailNotification();" />
             <label for="mail_notification_checkbox">QBT_TR(Email notification upon download completion)QBT_TR[CONTEXT=OptionsDialog]</label></legend>
-        <div class="formRow">
-            <label for="dest_email_txt" class="leftLabelMedium">QBT_TR(To:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="dest_email_txt" />
-        </div>
-        <div class="formRow">
-            <label for="smtp_server_txt" class="leftLabelMedium">QBT_TR(SMTP server:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="smtp_server_txt" />
-        </div>
+        <table>
+            <tr>
+                <td>
+                    <label for="dest_email_txt">QBT_TR(To:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                </td>
+                <td>
+                    <input type="text" id="dest_email_txt" />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label for="smtp_server_txt">QBT_TR(SMTP server:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                </td>
+                <td>
+                    <input type="text" id="smtp_server_txt" />
+                </td>
+            </tr>
+        </table>
         <div class="formRow">
             <input type="checkbox" id="mail_ssl_checkbox" /><label for="mail_ssl_checkbox">QBT_TR(This server requires a secure connection (SSL))QBT_TR[CONTEXT=OptionsDialog]</label>
         </div>
         <fieldset class="settings">
             <legend><input type="checkbox" id="mail_auth_checkbox" onclick="updateMailAuthSettings();" /><label for="mail_auth_checkbox">QBT_TR(Authentication)QBT_TR[CONTEXT=OptionsDialog]</label></legend>
-            <div class="formRow">
-                <label for="mail_username_text" class="leftLabelMedium">QBT_TR(Username:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="mail_username_text" />
-            </div>
-            <div class="formRow">
-                <label for="mail_password_text" class="leftLabelMedium">QBT_TR(Password:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="password" id="mail_password_text" />
-            </div>
+            <table>
+                <tr>
+                    <td>
+                        <label for="mail_username_text">QBT_TR(Username:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                    </td>
+                    <td>
+                        <input type="text" id="mail_username_text" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="mail_password_text">QBT_TR(Password:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                    </td>
+                    <td>
+                        <input type="password" id="mail_password_text" />
+                    </td>
+                </tr>
+            </table>
         </fieldset>
     </fieldset>
 
@@ -178,23 +202,33 @@
 
     <fieldset class="settings">
         <legend>QBT_TR(Proxy Server)QBT_TR[CONTEXT=OptionsDialog]</legend>
-        <div class="formRow">
-            <label for="peer_proxy_type_select" class="leftLabelSmall">QBT_TR(Type:)QBT_TR[CONTEXT=OptionsDialog]</label>
-            <select id="peer_proxy_type_select" onchange="updatePeerProxySettings();">
-                <option value="none">QBT_TR((None))QBT_TR[CONTEXT=OptionsDialog]</option>
-                <option value="socks4">QBT_TR(SOCKS4)QBT_TR[CONTEXT=OptionsDialog]</option>
-                <option value="socks5">QBT_TR(SOCKS5)QBT_TR[CONTEXT=OptionsDialog]</option>
-                <option value="http">QBT_TR(HTTP)QBT_TR[CONTEXT=OptionsDialog]</option>
-            </select>
-        </div>
-        <div class="formRow">
-            <label for="peer_proxy_host_text" class="leftLabelSmall">QBT_TR(Host:)QBT_TR[CONTEXT=OptionsDialog]</label>
-            <input type="text" id="peer_proxy_host_text" />
-        </div>
-        <div class="formRow">
-            <label for="peer_proxy_port_value" class="leftLabelSmall">QBT_TR(Port:)QBT_TR[CONTEXT=OptionsDialog]</label>
-            <input type="text" id="peer_proxy_port_value" style="width: 4em;" />
-        </div>
+        <table>
+            <tr>
+                <td>
+                    <label for="peer_proxy_type_select">QBT_TR(Type:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                </td>
+                <td>
+                    <select id="peer_proxy_type_select" onchange="updatePeerProxySettings();">
+                        <option value="none">QBT_TR((None))QBT_TR[CONTEXT=OptionsDialog]</option>
+                        <option value="socks4">QBT_TR(SOCKS4)QBT_TR[CONTEXT=OptionsDialog]</option>
+                        <option value="socks5">QBT_TR(SOCKS5)QBT_TR[CONTEXT=OptionsDialog]</option>
+                        <option value="http">QBT_TR(HTTP)QBT_TR[CONTEXT=OptionsDialog]</option>
+                    </select>
+                </td>
+                <td>
+                    <label for="peer_proxy_host_text">QBT_TR(Host:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                </td>
+                <td>
+                    <input type="text" id="peer_proxy_host_text" />
+                </td>
+                <td>
+                    <label for="peer_proxy_port_value">QBT_TR(Port:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                </td>
+                <td>
+                    <input type="text" id="peer_proxy_port_value" style="width: 4em;" />
+                </td>
+            </tr>
+        </table>
         <div class="formRow">
             <input type="checkbox" id="use_peer_proxy_checkbox" />
             <label for="use_peer_proxy_checkbox">QBT_TR(Use proxy for peer connections)QBT_TR[CONTEXT=OptionsDialog]</label>
@@ -210,14 +244,24 @@
         <fieldset class="settings">
             <legend><input type="checkbox" id="peer_proxy_auth_checkbox" onclick="updatePeerProxyAuthSettings();" />
                 <label for="peer_proxy_auth_checkbox">QBT_TR(Authentication)QBT_TR[CONTEXT=OptionsDialog]</label></legend>
-            <div class="formRow">
-                <label for="peer_proxy_username_text" class="leftLabelMedium">QBT_TR(Username:)QBT_TR[CONTEXT=OptionsDialog]</label>
-                <input type="text" id="peer_proxy_username_text" />
-            </div>
-            <div class="formRow">
-                <label for="peer_proxy_password_text" class="leftLabelMedium">QBT_TR(Password:)QBT_TR[CONTEXT=OptionsDialog]</label>
-                <input type="password" id="peer_proxy_password_text" />
-            </div>
+            <table>
+                <tr>
+                    <td>
+                        <label for="peer_proxy_username_text">QBT_TR(Username:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                    </td>
+                    <td>
+                        <input type="text" id="peer_proxy_username_text" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="peer_proxy_password_text">QBT_TR(Password:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                    </td>
+                    <td>
+                        <input type="password" id="peer_proxy_password_text" />
+                    </td>
+                </tr>
+            </table>
         </fieldset>
     </fieldset>
 
@@ -321,18 +365,32 @@
     <fieldset class="settings">
         <legend><input type="checkbox" id="queueing_checkbox" onclick="updateQueueingSystem();" />
             <label for="queueing_checkbox">QBT_TR(Torrent Queueing)QBT_TR[CONTEXT=OptionsDialog]</label></legend>
-        <div class="formRow">
-            <label for="max_active_dl_value" style="margin-left: 20px;" class="leftLabelLarge">QBT_TR(Maximum active downloads:)QBT_TR[CONTEXT=OptionsDialog]</label>
-            <input type="text" id="max_active_dl_value" style="width: 4em;" />
-        </div>
-        <div class="formRow">
-            <label for="max_active_up_value" style="margin-left: 20px;" class="leftLabelLarge">QBT_TR(Maximum active uploads:)QBT_TR[CONTEXT=OptionsDialog]</label>
-            <input type="text" id="max_active_up_value" style="width: 4em;" />
-        </div>
-        <div class="formRow">
-            <label for="max_active_to_value" style="margin-left: 20px;" class="leftLabelLarge">QBT_TR(Maximum active torrents:)QBT_TR[CONTEXT=OptionsDialog]</label>
-            <input type="text" id="max_active_to_value" style="width: 4em;" />
-        </div>
+        <table>
+            <tr>
+                <td>
+                    <label for="max_active_dl_value">QBT_TR(Maximum active downloads:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                </td>
+                <td>
+                    <input type="text" id="max_active_dl_value" style="width: 4em;" />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label for="max_active_up_value">QBT_TR(Maximum active uploads:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                </td>
+                <td>
+                    <input type="text" id="max_active_up_value" style="width: 4em;" />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label for="max_active_to_value">QBT_TR(Maximum active torrents:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                </td>
+                <td>
+                    <input type="text" id="max_active_to_value" style="width: 4em;" />
+                </td>
+            </tr>
+        </table>
         <div class="formRow">
             <input type="checkbox" id="dont_count_slow_torrents_checkbox" />
             <label for="dont_count_slow_torrents_checkbox">QBT_TR(Do not count slow torrents in these limits)QBT_TR[CONTEXT=OptionsDialog]</label>
@@ -440,33 +498,64 @@
 
     <fieldset class="settings">
         <legend>QBT_TR(Web User Interface (Remote control))QBT_TR[CONTEXT=OptionsDialog]</legend>
-        <label class="leftLabelMedium" for="webui_address_value">QBT_TR(IP address:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="webui_address_value" />
-        <label for="webui_port_value" style="margin-left: 10px;">QBT_TR(Port:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="webui_port_value" style="width: 4em;" /><br/>
+        <table>
+            <tr>
+                <td>
+                    <label for="webui_address_value">QBT_TR(IP address:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                </td>
+                <td>
+                    <input type="text" id="webui_address_value" />
+                    <label for="webui_port_value" style="margin-left: 10px;">QBT_TR(Port:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                    <input type="text" id="webui_port_value" style="width: 4em;" /><br/>
+                </td>
+            </tr>
+        </table>
         <input type="checkbox" id="webui_upnp_checkbox" />
         <label for="webui_upnp_checkbox">QBT_TR(Use UPnP / NAT-PMP to forward the port from my router)QBT_TR[CONTEXT=OptionsDialog]</label><br/>
         <fieldset class="settings">
             <legend><input type="checkbox" id="use_https_checkbox" onclick="updateHttpsSettings();" />
                 <label for="use_https_checkbox">QBT_TR(Use HTTPS instead of HTTP)QBT_TR[CONTEXT=OptionsDialog]</label></legend>
-            <div class="formRow">
-                <label class="leftLabelSmall" for="ssl_key_textarea">QBT_TR(Key:)QBT_TR[CONTEXT=OptionsDialog]</label>
-                <textarea id="ssl_key_textarea" rows="5" cols="70"></textarea>
-            </div>
-            <div class="formRow">
-                <label class="leftLabelSmall" for="ssl_cert_textarea">QBT_TR(Certificate:)QBT_TR[CONTEXT=OptionsDialog]</label>
-                <textarea id="ssl_cert_textarea" rows="5" cols="70"></textarea>
-            </div>
+            <table>
+                <tr>
+                    <td>
+                        <label for="ssl_key_textarea">QBT_TR(Key:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                    </td>
+                    <td>
+                        <textarea id="ssl_key_textarea" rows="5" cols="70"></textarea>
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="ssl_cert_textarea">QBT_TR(Certificate:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                    </td>
+                    <td>
+                        <textarea id="ssl_cert_textarea" rows="5" cols="70"></textarea>
+                    </td>
+                </tr>
+            </table>
             <div style="padding-left: 10px;"><a target="_blank" href="https://httpd.apache.org/docs/current/ssl/ssl_faq.html#aboutcerts">QBT_TR(Information about certificates)QBT_TR[CONTEXT=HttpServer]</a></div>
         </fieldset>
 
         <fieldset class="settings">
             <legend>QBT_TR(Authentication)QBT_TR[CONTEXT=OptionsDialog]</legend>
-            <div class="formRow">
-                <label for="webui_username_text" class="leftLabelSmall">QBT_TR(Username:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="webui_username_text" />
-            </div>
-            <div class="formRow">
-                <label for="webui_password_text" class="leftLabelSmall">QBT_TR(Password:)QBT_TR[CONTEXT=OptionsDialog]</label>
-                <input type="password" id="webui_password_text" placeholder="QBT_TR(Change current password)QBT_TR[CONTEXT=OptionsDialog]" />
-            </div>
+            <table>
+                <tr>
+                    <td>
+                        <label for="webui_username_text">QBT_TR(Username:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                    </td>
+                    <td>
+                        <input type="text" id="webui_username_text" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="webui_password_text">QBT_TR(Password:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                    </td>
+                    <td>
+                        <input type="password" id="webui_password_text" placeholder="QBT_TR(Change current password)QBT_TR[CONTEXT=OptionsDialog]" />
+                    </td>
+                </tr>
+            </table>
             <div class="formRow">
                 <input type="checkbox" id="bypass_local_auth_checkbox" />
                 <label for="bypass_local_auth_checkbox">QBT_TR(Bypass authentication for clients on localhost)QBT_TR[CONTEXT=OptionsDialog]</label>
@@ -496,10 +585,16 @@
                     <input type="checkbox" id="host_header_validation_checkbox" onclick="updateHostHeaderValidationSettings();" />
                     <label for="host_header_validation_checkbox">QBT_TR(Enable Host header validation)QBT_TR[CONTEXT=OptionsDialog]</label>
                 </legend>
-                <div class="formRow">
-                    <label class="leftLabelMedium" for="webui_domain_textarea">QBT_TR(Server domains:)QBT_TR[CONTEXT=OptionsDialog]</label>
-                    <textarea id="webui_domain_textarea" rows="1" cols="60"></textarea>
-                </div>
+                <table>
+                    <tr>
+                        <td>
+                            <label for="webui_domain_textarea">QBT_TR(Server domains:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                        </td>
+                        <td>
+                            <textarea id="webui_domain_textarea" rows="1" cols="60"></textarea>
+                        </td>
+                    </tr>
+                </table>
             </fieldset>
         </fieldset>
     </fieldset>
@@ -512,15 +607,32 @@
             <option value="1">NO-IP</option>
         </select>
         <input type="button" value="QBT_TR(Register)QBT_TR[CONTEXT=OptionsDialog]" onclick="registerDynDns();" /><br/><br/>
-        <div class="formRow">
-            <label for="dyndns_domain_text" class="leftLabelMedium">QBT_TR(Domain name:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="dyndns_domain_text" />
-        </div>
-        <div class="formRow">
-            <label for="dyndns_username_text" class="leftLabelMedium">QBT_TR(Username:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="dyndns_username_text" />
-        </div>
-        <div class="formRow">
-            <label for="dyndns_password_text" class="leftLabelMedium">QBT_TR(Password:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="password" id="dyndns_password_text" />
-        </div>
+        <table>
+            <tr>
+                <td>
+                    <label for="dyndns_domain_text">QBT_TR(Domain name:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                </td>
+                <td>
+                    <input type="text" id="dyndns_domain_text" />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label for="dyndns_username_text">QBT_TR(Username:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                </td>
+                <td>
+                    <input type="text" id="dyndns_username_text" />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <label for="dyndns_password_text">QBT_TR(Password:)QBT_TR[CONTEXT=OptionsDialog]</label>
+                </td>
+                <td>
+                    <input type="password" id="dyndns_password_text" />
+                </td>
+            </tr>
+        </table>
     </fieldset>
 </div>
 
diff --git a/src/webui/www/private/shareratio.html b/src/webui/www/private/shareratio.html
index 2c867b0bd..cf8b025c3 100644
--- a/src/webui/www/private/shareratio.html
+++ b/src/webui/www/private/shareratio.html
@@ -150,12 +150,12 @@
 
         <div style="margin-left: 40px; margin-bottom: 5px;">
             <input type="checkbox" id="setRatio" class="shareLimitInput" onclick="enableInputBoxes()" />
-            <label for="setRatio" class="leftLabelLarge">QBT_TR(ratio)QBT_TR[CONTEXT=UpDownRatioDialog]</label>
+            <label for="setRatio">QBT_TR(ratio)QBT_TR[CONTEXT=UpDownRatioDialog]</label>
             <input type="number" id="ratio" value="0.00" step=".01" min="0" max="9999" class="shareLimitInput" />
         </div>
         <div style="margin-left: 40px; margin-bottom: 5px;">
             <input type="checkbox" id="setMinutes" class="shareLimitInput" onclick="enableInputBoxes()" />
-            <label for="setMinutes" class="leftLabelLarge">QBT_TR(minutes)QBT_TR[CONTEXT=UpDownRatioDialog]</label>
+            <label for="setMinutes">QBT_TR(minutes)QBT_TR[CONTEXT=UpDownRatioDialog]</label>
             <input type="number" id="minutes" value="0" step="1" min="0" max="525600" class="shareLimitInput" />
         </div>
         <div style="text-align: center; padding-top: 10px;">
diff --git a/src/webui/www/private/upload.html b/src/webui/www/private/upload.html
index ba07e781d..d0d9a7624 100644
--- a/src/webui/www/private/upload.html
+++ b/src/webui/www/private/upload.html
@@ -16,48 +16,90 @@
         <div style="margin-top: 25px; display: inline-block; border: 1px solid lightgrey; border-radius: 4px;">
             <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
         </div>
-        <fieldset class="settings" style="border: 0; text-align: left;">
-            <div class="formRow" style="margin-top: 12px;">
-                <label for="savepath" class="leftLabelLarge">QBT_TR(Save files to location:)QBT_TR[CONTEXT=HttpServer]</label>
-                <input type="text" id="savepath" name="savepath" style="width: 16em;" />
-            </div>
-            <div class="formRow">
-                <label for="rename" class="leftLabelLarge">QBT_TR(Rename torrent)QBT_TR[CONTEXT=HttpServer]</label>
-                <input type="text" id="rename" name="rename" style="width: 16em;" />
-            </div>
-            <div class="formRow">
-                <label for="category" class="leftLabelLarge">QBT_TR(Category:)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
-                <input type="text" id="category" name="category" style="width: 16em;" />
-            </div>
-            <div class="formRow">
-                <label for="start_torrent" class="leftLabelLarge">QBT_TR(Start torrent)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
-                <input type="checkbox" id="start_torrent" checked="checked" />
-                <input type="hidden" id="add_paused" name="paused" value="false" readonly />
-            </div>
-            <div class="formRow">
-                <label for="skip_checking" class="leftLabelLarge">QBT_TR(Skip hash check)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
-                <input type="checkbox" id="skip_checking" name="skip_checking" value="true" />
-            </div>
-            <div class="formRow">
-                <label for="root_folder" class="leftLabelLarge">QBT_TR(Create subfolder)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
-                <input type="checkbox" id="root_folder" name="root_folder" value="true" checked="checked" />
-            </div>
-            <div class="formRow">
-                <label for="sequentialDownload" class="leftLabelLarge">QBT_TR(Download in sequential order)QBT_TR[CONTEXT=TransferListWidget]</label>
-                <input type="checkbox" id="sequentialDownload" name="sequentialDownload" value="true" />
-            </div>
-            <div class="formRow">
-                <label for="firstLastPiecePrio" class="leftLabelLarge">QBT_TR(Download first and last pieces first)QBT_TR[CONTEXT=TransferListWidget]</label>
-                <input type="checkbox" id="firstLastPiecePrio" name="firstLastPiecePrio" value="true" />
-            </div>
-            <div class="formRow">
-                <label for="dlLimit" class="leftLabelLarge">QBT_TR(Limit download rate)QBT_TR[CONTEXT=HttpServer]</label>
-                <input type="text" id="dlLimit" name="dlLimit" style="width: 16em;" placeholder="Bytes/s" />
-            </div>
-            <div class="formRow">
-                <label for="upLimit" class="leftLabelLarge">QBT_TR(Limit upload rate)QBT_TR[CONTEXT=HttpServer]</label>
-                <input type="text" id="upLimit" name="upLimit" style="width: 16em;" placeholder="Bytes/s" />
-            </div>
+        <fieldset class="settings" style="border: 0; text-align: left; margin-top: 12px;">
+            <table style="margin: auto;">
+                <tr>
+                    <td>
+                        <label for="savepath">QBT_TR(Save files to location:)QBT_TR[CONTEXT=HttpServer]</label>
+                    </td>
+                    <td>
+                        <input type="text" id="savepath" name="savepath" style="width: 16em;" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="rename">QBT_TR(Rename torrent)QBT_TR[CONTEXT=HttpServer]</label>
+                    </td>
+                    <td>
+                        <input type="text" id="rename" name="rename" style="width: 16em;" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="category">QBT_TR(Category:)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
+                    </td>
+                    <td>
+                        <input type="text" id="category" name="category" style="width: 16em;" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="start_torrent">QBT_TR(Start torrent)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
+                    </td>
+                    <td>
+                        <input type="checkbox" id="start_torrent" checked="checked" />
+                        <input type="hidden" id="add_paused" name="paused" value="false" readonly />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="skip_checking">QBT_TR(Skip hash check)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
+                    </td>
+                    <td>
+                        <input type="checkbox" id="skip_checking" name="skip_checking" value="true" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="root_folder">QBT_TR(Create subfolder)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
+                    </td>
+                    <td>
+                        <input type="checkbox" id="root_folder" name="root_folder" value="true" checked="checked" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="sequentialDownload">QBT_TR(Download in sequential order)QBT_TR[CONTEXT=TransferListWidget]</label>
+                    </td>
+                    <td>
+                        <input type="checkbox" id="sequentialDownload" name="sequentialDownload" value="true" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="firstLastPiecePrio">QBT_TR(Download first and last pieces first)QBT_TR[CONTEXT=TransferListWidget]</label>
+                    </td>
+                    <td>
+                        <input type="checkbox" id="firstLastPiecePrio" name="firstLastPiecePrio" value="true" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="dlLimit">QBT_TR(Limit download rate)QBT_TR[CONTEXT=HttpServer]</label>
+                    </td>
+                    <td>
+                        <input type="text" id="dlLimit" name="dlLimit" style="width: 16em;" placeholder="Bytes/s" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="upLimit">QBT_TR(Limit upload rate)QBT_TR[CONTEXT=HttpServer]</label>
+                    </td>
+                    <td>
+                        <input type="text" id="upLimit" name="upLimit" style="width: 16em;" placeholder="Bytes/s" />
+                    </td>
+                </tr>
+            </table>
             <div id="submitbutton" style="margin-top: 30px; text-align: center;">
                 <button type="submit" style="font-size: 1em;">QBT_TR(Upload Torrents)QBT_TR[CONTEXT=HttpServer]</button>
             </div>