--- a/browser/components/preferences/in-content/preferences.js
+++ b/browser/components/preferences/in-content/preferences.js
@@ -72,61 +72,26 @@ function init_all() {
   });
   categories.addEventListener("mousedown", function() {
     this.removeAttribute("keyboard-navigation");
   });
 
   window.addEventListener("hashchange", onHashChange);
   gotoPref();
 
-  init_dynamic_padding();
-
-  let helpButton = document.querySelector(".help-button");
+  let helpButton = document.querySelector(".help-button > .text-link");
   let helpUrl = Services.urlFormatter.formatURLPref("app.support.baseURL") + "preferences";
   helpButton.setAttribute("href", helpUrl);
 
   document.dispatchEvent(new CustomEvent("Initialized", {
     "bubbles": true,
     "cancelable": true
   }));
 }
 
-// Make the space above the categories list shrink on low window heights
-function init_dynamic_padding() {
-  let categories = document.getElementById("categories");
-  let catPadding = Number.parseInt(getComputedStyle(categories)
-                                     .getPropertyValue("padding-top"));
-  let helpButton = document.querySelector(".help-button");
-  let helpButtonCS = getComputedStyle(helpButton);
-  let helpHeight = Number.parseInt(helpButtonCS.height);
-  let helpBottom = Number.parseInt(helpButtonCS.bottom);
-  // Reduce the padding to account for less space, but due
-  // to bug 1357841, the status panel will overlap the link.
-  const reducedHelpButtonBottomFactor = .75;
-  let reducedHelpButtonBottom = helpBottom * reducedHelpButtonBottomFactor;
-  let fullHelpHeight = helpHeight + reducedHelpButtonBottom;
-  let fullHeight = categories.lastElementChild.getBoundingClientRect().bottom +
-                   fullHelpHeight;
-  let mediaRule = `
-  @media (max-height: ${fullHeight}px) {
-    #categories {
-      padding-top: calc(100vh - ${fullHeight - catPadding}px);
-      padding-bottom: ${fullHelpHeight}px;
-    }
-    .help-button {
-      bottom: ${reducedHelpButtonBottom / 2}px;
-    }
-  }
-  `;
-  let mediaStyle = document.createElementNS("http://www.w3.org/1999/xhtml", "html:style");
-  mediaStyle.setAttribute("type", "text/css");
-  mediaStyle.appendChild(document.createCDATASection(mediaRule));
-  document.documentElement.appendChild(mediaStyle);
-}
-
 function telemetryBucketForCategory(category) {
   category = category.toLowerCase();
   switch (category) {
     case "containers":
     case "general":
     case "privacy":
     case "search":
     case "sync":

--- a/browser/components/preferences/in-content/preferences.xul
+++ b/browser/components/preferences/in-content/preferences.xul
@@ -117,74 +117,79 @@
   <stringbundleset id="appManagerBundleset">
     <stringbundle id="appManagerBundle"
                   src="chrome://browser/locale/preferences/applicationManager.properties"/>
   </stringbundleset>
 
   <stack flex="1">
   <hbox flex="1">
 
-    <!-- category list -->
-    <richlistbox id="categories">
-      <richlistitem id="category-general"
-                    class="category"
-                    value="paneGeneral"
-                    helpTopic="prefs-main"
-                    tooltiptext="&paneGeneral.title;"
-                    align="center">
-        <image class="category-icon"/>
-        <label class="category-name" flex="1">&paneGeneral.title;</label>
-      </richlistitem>
+    <vbox class="navigation">
+      <!-- category list -->
+      <richlistbox id="categories">
+        <richlistitem id="category-general"
+                      class="category"
+                      value="paneGeneral"
+                      helpTopic="prefs-main"
+                      tooltiptext="&paneGeneral.title;"
+                      align="center">
+          <image class="category-icon"/>
+          <label class="category-name" flex="1">&paneGeneral.title;</label>
+        </richlistitem>
 
-      <richlistitem id="category-search"
-                    class="category"
-                    value="paneSearch"
-                    helpTopic="prefs-search"
-                    tooltiptext="&paneSearch.title;"
-                    align="center">
-        <image class="category-icon"/>
-        <label class="category-name" flex="1">&paneSearch.title;</label>
-      </richlistitem>
+        <richlistitem id="category-search"
+                      class="category"
+                      value="paneSearch"
+                      helpTopic="prefs-search"
+                      tooltiptext="&paneSearch.title;"
+                      align="center">
+          <image class="category-icon"/>
+          <label class="category-name" flex="1">&paneSearch.title;</label>
+        </richlistitem>
+
+        <richlistitem id="category-containers"
+                      class="category"
+                      value="paneContainers"
+                      helpTopic="prefs-containers"
+                      hidden="true"/>
 
-      <richlistitem id="category-containers"
-                    class="category"
-                    value="paneContainers"
-                    helpTopic="prefs-containers"
-                    hidden="true"/>
+        <richlistitem id="category-privacy"
+                      class="category"
+                      value="panePrivacy"
+                      helpTopic="prefs-privacy"
+                      tooltiptext="&panePrivacySecurity.title;"
+                      align="center">
+          <image class="category-icon"/>
+          <label class="category-name" flex="1">&panePrivacySecurity.title;</label>
+        </richlistitem>
 
-      <richlistitem id="category-privacy"
-                    class="category"
-                    value="panePrivacy"
-                    helpTopic="prefs-privacy"
-                    tooltiptext="&panePrivacySecurity.title;"
-                    align="center">
-        <image class="category-icon"/>
-        <label class="category-name" flex="1">&panePrivacySecurity.title;</label>
-      </richlistitem>
+        <richlistitem id="category-sync"
+                      class="category"
+                      value="paneSync"
+                      helpTopic="prefs-weave"
+                      tooltiptext="&paneSync1.title;"
+                      align="center">
+          <image class="category-icon"/>
+          <label class="category-name" flex="1">&paneSync1.title;</label>
+        </richlistitem>
+      </richlistbox>
 
-      <richlistitem id="category-sync"
-                    class="category"
-                    value="paneSync"
-                    helpTopic="prefs-weave"
-                    tooltiptext="&paneSync1.title;"
-                    align="center">
-        <image class="category-icon"/>
-        <label class="category-name" flex="1">&paneSync1.title;</label>
-      </richlistitem>
-    </richlistbox>
+      <spacer flex="1"/>
+
+      <hbox class="help-button" pack="center">
+        <label class="text-link">
+          <image class="help-icon"/><label class="help-label" flex="1">&helpButton2.label;</label>
+        </label>
+      </hbox>
+    </vbox>
 
     <keyset>
       <key key="&focusSearch1.key;" modifiers="accel" id="focusSearch1" oncommand="gSearchResultsPane.searchInput.focus();"/>
     </keyset>
 
-    <html:a class="help-button" target="_blank" aria-label="&helpButton2.label;">
-      <html:img class="help-icon" src="chrome://global/skin/icons/help.svg"/>
-      <html:span class="help-label">&helpButton2.label;</html:span>
-    </html:a>
-
     <vbox class="main-content" flex="1" align="start">
       <vbox class="pane-container">
         <hbox class="search-container" pack="end">
           <textbox type="search" id="searchInput" style="width: &searchField.width;" hidden="true" clickSelectsAll="true"/>
         </hbox>
         <prefpane id="mainPrefPane">
 #include searchResults.xul
 #include main.xul

--- a/browser/themes/linux/preferences/in-content/preferences.css
+++ b/browser/themes/linux/preferences/in-content/preferences.css
@@ -10,17 +10,17 @@ window * {
   font-size: 1.11rem;
 }
 
 caption > label:not(.dialogTitle) {
   font-size: 1.27rem;
 }
 
 .tip-caption,
-.help-button {
+.help-label {
   font-size: 1rem;
 }
 
 .treecol-sortdirection {
   /* override the Linux only toolkit rule */
   -moz-appearance: none;
 }
 

--- a/browser/themes/osx/preferences/in-content/preferences.css
+++ b/browser/themes/osx/preferences/in-content/preferences.css
@@ -10,17 +10,17 @@ window * {
   font-size: 1.36rem;
 }
 
 caption > label:not(.dialogTitle) {
   font-size: 1.55rem;
 }
 
 .tip-caption,
-.help-button {
+.help-label {
   font-size: 1.18rem;
 }
 
 .actionsMenu > .menulist-label-box > .menulist-icon {
   margin-top: 2px;
   margin-inline-start: 2px;
   margin-inline-end: 8px !important;
 }

--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -108,16 +108,24 @@ button > hbox > label {
 .subcategory:not([hidden]) ~ .subcategory {
   margin-top: 32px;
   padding-top: 15px;
   border-top: 1px solid rgba(12, 12, 13, 0.15);
 }
 
 /* Category List */
 
+#categories > scrollbox {
+  overflow: visible !important; /* Cancel scrollbar and do not clip overflow content when window size goes very small */
+}
+
+#categories > scrollbox > box {
+  padding: 1px; /* Adding padding around richlistitem in order to make entire keyboard focusing outline visible */
+}
+
 #category-general > .category-icon {
   list-style-image: url("chrome://browser/skin/preferences/in-content/general.svg");
 }
 
 #category-search > .category-icon {
   list-style-image: url("chrome://browser/skin/preferences/in-content/search.svg");
 }
 
@@ -600,65 +608,80 @@ button > hbox > label {
 }
 
 @media (min-resolution: 1.1dppx) {
   .update-throbber {
     list-style-image: url("chrome://global/skin/icons/loading@2x.png");
   }
 }
 
-.help-button {
-  display: flex;
-  align-items: center;
-  position: fixed;
-  left: 0;
-  bottom: 36px;
-  background-image: none;
-  -moz-context-properties: fill, fill-opacity;
-  fill: currentColor;
-  line-height: 22px;
-  height: unset;
-  min-height: 36px;
-  width: 168px;
-  padding-inline-start: 18px;
-  margin-inline-start: 34px;
+.navigation {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.navigation > .help-button {
+  margin-bottom: 36px;
+  padding: 1px; /* Adding padding around help label in order to make entire keyboard focusing outline visible */
 }
 
-.help-button:-moz-locale-dir(rtl) {
-  background-position: right 10px top 10px;
-  left: auto;
-  right: 0;
+.help-button > .text-link {
+  -moz-box-flex: 1;
+  margin-inline-start: 34px;
+  margin-inline-end: 0;
+  text-decoration: none;
+  color: currentColor;
+  width: 36px;
+  height: 36px;
+  cursor: default;
 }
 
-.help-button:hover {
-  fill: currentColor;
-}
-
-.help-button:link,
-.help-button:visited {
-  color: var(--in-content-category-text);
-  text-decoration: none;
+.help-button > .text-link:hover {
+  background-color: var(--in-content-category-background-hover);
   border-radius: 2px;
 }
 
+.help-button > .text-link:hover:active:not([disabled]) {
+  background-color: var(--in-content-category-background-active);
+}
+
+.help-button > .text-link:-moz-focusring {
+  outline: var(--in-content-category-outline-focus);
+}
+
 .help-icon {
+  list-style-image: url("chrome://global/skin/icons/help.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
   width: 16px;
   height: 16px;
+  margin: 10px;
+  margin-inline-start: 13px;
+  vertical-align: middle;
+}
+
+.help-icon:hover {
+  fill: currentColor !important;
 }
 
 .help-label {
-  margin: 0 14px;
+  margin: 0 4px;
+  -moz-user-select: none;
 }
 
 @media (max-width: 830px) {
-  .help-button {
+  .help-button > .text-link {
+    -moz-box-flex: 0;
     width: 36px;
-    padding: 0;
-    justify-content: center;
-    margin-inline-start: 40px;
+    height: 36px;
+    margin-inline-start: 0;
+  }
+
+  .help-icon {
+    margin: 10px;
   }
 
   .help-label {
     display: none;
   }
 }
 
 .face-sad {

--- a/browser/themes/windows/preferences/in-content/preferences.css
+++ b/browser/themes/windows/preferences/in-content/preferences.css
@@ -10,17 +10,17 @@ window * {
   font-size: 1.25rem;
 }
 
 caption > label:not(.dialogTitle) {
   font-size: 1.42rem;
 }
 
 .tip-caption,
-.help-button {
+.help-label {
   font-size: 1.08rem;
 }
 
 .actionsMenu > .menulist-label-box > .menulist-icon {
   margin-inline-end: 9px;
 }
 
 filefield + button {

--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -16,17 +16,17 @@
   --in-content-box-background-hover: #ebebeb;
   --in-content-box-background-active: #dadada;
   --in-content-box-border-color: #d7d7db;
   --in-content-item-hover: rgba(0,149,221,0.25);
   --in-content-item-selected: #0a84ff;
   --in-content-border-highlight: #0a84ff;
   --in-content-border-focus: #0a84ff;
   --in-content-border-color: #d7d7db;
-  --in-content-category-border-focus: 1px dotted #0a84ff;
+  --in-content-category-outline-focus: 1px dotted #0a84ff;
   --in-content-category-text: rgba(12,12,13);
   --in-content-category-text-active: #0c0c0d;
   --in-content-category-text-selected: #0a84ff;
   --in-content-category-text-selected-active: #0060df;
   --in-content-category-background-hover: rgba(12,12,13,0.1);
   --in-content-category-background-active: rgba(12,12,13,0.15);
   --in-content-category-background-selected-hover: rgba(12,12,13,0.15);
   --in-content-category-background-selected-active: rgba(12,12,13,0.2);
@@ -686,17 +686,17 @@ xul|*.radio-label-box {
 
 *|*.category[selected]:hover:active,
 *|*.category.selected:hover:active {
   color: var(--in-content-category-text-selected-active);
   background-color: var(--in-content-category-background-selected-active);
 }
 
 *|*#categories[keyboard-navigation="true"]:-moz-focusring > *|*.category[current] {
-  border: var(--in-content-category-border-focus);
+  outline: var(--in-content-category-outline-focus);
 }
 
 *|*.category-name {
   line-height: 22px;
   padding-bottom: 2px;
   padding-inline-start: 9px;
   margin: 0;
   -moz-user-select: none;
@@ -714,23 +714,23 @@ xul|*.radio-label-box {
   fill-opacity: 1;
 }
 
 @media (max-width: 830px) {
   #categories {
     width: 118px;
   }
 
-  .category-icon ~ .category-name {
+  .category-icon + .category-name {
     display: none;
   }
 
   .category {
     padding-inline-start: 13px; /* make category icons align center */
-    margin-inline-end: 35px;
+    margin-inline-end: 33px;
   }
 
   .main-content {
     padding-left: 0;
     padding-right: 0;
   }
 
   .pane-container {