--- a/browser/components/preferences/in-content-new/preferences.xul
+++ b/browser/components/preferences/in-content-new/preferences.xul
@@ -172,17 +172,17 @@
     </richlistbox>
 
     <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;">&helpButton2.label;</html:a>
 
-    <vbox class="main-content" flex="1">
+    <vbox class="main-content" flex="1" align="start">
       <vbox class="pane-container">
         <hbox class="search-container" pack="end">
           <textbox type="search" id="searchInput" hidden="true" clickSelectsAll="true"/>
         </hbox>
         <prefpane id="mainPrefPane">
 #include searchResults.xul
 #include main.xul
 #include search.xul

--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -13,18 +13,20 @@
   --in-content-category-background: #fafafc;
 }
 
 .main-content {
   padding-top: 0;
 }
 
 .pane-container {
+  /* A workaround to keep the container always float on the `top: 0` (Bug 1377009) */
   display: block;
-  max-width: 800px;
+  width: 664px;
+  min-width: 530px;
 }
 
 #mainPrefPane {
   width: 100%;
   padding: 0;
   font: message-box;
   color: currentColor;
 }

--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -679,27 +679,43 @@ xul|*.radio-label-box {
   fill: currentColor;
   fill-opacity: 0.8;
 }
 
 *|*.category[selected] > *|*.category-icon {
   fill-opacity: 1;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 830px) {
   #categories {
     width: 118px;
   }
 
   .category-icon ~ .category-name {
     display: none;
   }
 
+  .category {
+    padding-inline-start: 47px; /* make category icons align center */
+  }
+
   .help-button {
     font-size: 0 !important;
+    margin-inline-start: 51px !important; /* make the question mark icon align center */
+    background-position: 0px !important;
+    padding-inline-start: 0px !important;
+  }
+
+  .main-content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .pane-container {
+    margin-inline-end: 10px;
   }
 }
 
 /* header */
 
 *|*.header {
   border-bottom: 1px solid var(--in-content-header-border-color);
   margin-inline-end: 4px; /* add the 4px end-margin of other elements */