Refactor options page and optimize for mobile view

Change-Id: I7586e407c80e804b567d645e11e31306a1bd1f90
diff --git a/src/options.css b/src/options.css
index e754e14..46961a2 100644
--- a/src/options.css
+++ b/src/options.css
@@ -1,3 +1,8 @@
+.option {
+  margin: 4px 0;
+  line-height: 1.8em;
+}
+
 .help {
   cursor: help;
   border-bottom: dashed 1px gray;
diff --git a/src/options.html b/src/options.html
index dc63253..29618e5 100644
--- a/src/options.html
+++ b/src/options.html
@@ -3,34 +3,29 @@
   <head>
     <meta charset="utf-8">
     <title>Options</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="options.css">
   </head>
   <body>
     <form>
-      <p>
-        <input type="checkbox" id="list"> <label for="list" data-i18n="list"></label><br>
-        <input type="checkbox" id="thread"> <label for="thread" data-i18n="thread"></label><br>
-        <input type="checkbox" id="threadall"> <label for="threadall" data-i18n="threadall"></label>
-      </p>
+      <div class="option"><input type="checkbox" id="list"> <label for="list" data-i18n="list"></label></div>
+      <div class="option"><input type="checkbox" id="thread"> <label for="thread" data-i18n="thread"></label></div>
+      <div class="option"><input type="checkbox" id="threadall"> <label for="threadall" data-i18n="threadall"></label></div>
       <h4 data-i18n="enhancements"></h4>
-      <p>
-        <input type="checkbox" id="fixedtoolbar"> <label for="fixedtoolbar" data-i18n="fixedtoolbar"></label><br>
-        <input type="checkbox" id="redirect"> <label for="redirect" data-i18n="redirect"></label> <span class="experimental-label" data-i18n="experimental_label"></span><br>
-        <input type="checkbox" id="history"> <label for="history" data-i18n="history"></label><br>
-        <input type="checkbox" id="loaddrafts"> <label for="loaddrafts" data-i18n="loaddrafts"></label> <span class="experimental-label" data-i18n="experimental_label"></span><br>
-        <input type="checkbox" id="increasecontrast"> <label for="increasecontrast" data-i18n="increasecontrast"></label><br>
-        <input type="checkbox" id="stickysidebarheaders"> <label for="stickysidebarheaders" data-i18n="stickysidebarheaders"></label><br>
-        <input type="checkbox" id="ccdarktheme"> <label for="ccdarktheme" data-i18n="ccdarktheme"></label> <span class="experimental-label" data-i18n="experimental_label"></span><br>
-        <input type="checkbox" id="ccforcehidedrawer"> <label for="ccforcehidedrawer" data-i18n="ccforcehidedrawer"></label><br>
-        <span id="dragndrop-wrapper" hidden><input type="checkbox" id="ccdragndropfix"> <label for="ccdragndropfix" data-i18n="ccdragndropfix"></label></span><br>
-      </p>
+      <div class="option"><input type="checkbox" id="fixedtoolbar"> <label for="fixedtoolbar" data-i18n="fixedtoolbar"></label></div>
+      <div class="option"><input type="checkbox" id="redirect"> <label for="redirect" data-i18n="redirect"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
+      <div class="option"><input type="checkbox" id="history"> <label for="history" data-i18n="history"></label></div>
+      <div class="option"><input type="checkbox" id="loaddrafts"> <label for="loaddrafts" data-i18n="loaddrafts"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
+      <div class="option"><input type="checkbox" id="increasecontrast"> <label for="increasecontrast" data-i18n="increasecontrast"></label></div>
+      <div class="option"><input type="checkbox" id="stickysidebarheaders"> <label for="stickysidebarheaders" data-i18n="stickysidebarheaders"></label></div>
+      <div class="option"><input type="checkbox" id="ccdarktheme"> <label for="ccdarktheme" data-i18n="ccdarktheme"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
+      <div class="option"><input type="checkbox" id="ccforcehidedrawer"> <label for="ccforcehidedrawer" data-i18n="ccforcehidedrawer"></label></div>
+      <div id="dragndrop-wrapper" class="option" hidden><input type="checkbox" id="ccdragndropfix"> <label for="ccdragndropfix" data-i18n="ccdragndropfix"></label></div>
       <h4 data-i18n="profileindicator_header"></h4>
-      <p>
-        <input type="checkbox" id="profileindicator"> <label for="profileindicator" data-i18n="profileindicator"></label> <span class="experimental-label" data-i18n="experimental_label"></span><br>
-        <input type="checkbox" id="profileindicatoralt"> <label for="profileindicatoralt" data-i18n="profileindicatoralt"></label> <span class="experimental-label" data-i18n="experimental_label"></span><br>
-        <a href="https://gerrit.avm99963.com/plugins/gitiles/infinitegforums/+/refs/heads/master/docs/op_indicator.md" target="_blank" rel="noreferrer noopener" data-i18n="profileindicator_moreinfo"></a><br>
-      </p>
-      <p class="actions"><button id="save" data-i18n="save"></button></p>
+      <div class="option"><input type="checkbox" id="profileindicator"> <label for="profileindicator" data-i18n="profileindicator"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
+      <div class="option"><input type="checkbox" id="profileindicatoralt"> <label for="profileindicatoralt" data-i18n="profileindicatoralt"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
+      <div class="option"><a href="https://gerrit.avm99963.com/plugins/gitiles/infinitegforums/+/refs/heads/master/docs/op_indicator.md" target="_blank" rel="noreferrer noopener" data-i18n="profileindicator_moreinfo"></a></div>
+      <div class="actions"><button id="save" data-i18n="save"></button></div>
     </form>
     <div id="save-indicator"></div>
     <script src="common/common.js"></script>