Merge pull request #749 from StioStudio/Options-page-scroll-bar-fix

Full Feature Settings Page - Scrolling Bug

Author: rgantzos

extras/index.html

@@ -26,7 +26,6 @@
       </div>
     </div>
     <div class="section1">
-      <hr style="border: none; height: 1.5rem" />
       <div class="sectionwrap">
         <div class="messaging">
           <div class="messaging-header">
@@ -69,16 +68,18 @@ <h3>Blocked Users</h3>
       </div>
     </div>
     <div class="section2" id="section2">
-      <input class="searchbar" placeholder="Search" /><input
+      <div style="display: flex;margin-top: 1.9rem;">
+        <input class="searchbar" placeholder="Search" /><input
         class="searchbarbutton"
         value=""
         type="submit"
-      />
-      <div class="buttons">
-        <button class="selected" data-type="All">All</button>
-        <button data-type="Website">Website</button>
-        <button data-type="Editor">Editor</button>
-        <button data-type="Forums">Forums</button>
+        />
+        <div class="buttons">
+          <button class="selected" data-type="All">All</button>
+          <button data-type="Website">Website</button>
+          <button data-type="Editor">Editor</button>
+          <button data-type="Forums">Forums</button>
+        </div>
       </div>
       <div class="sectionwrap">
         <div

extras/style.css

@@ -209,8 +209,8 @@ a {
 }
 .section2 {
   border: 0px solid black;
-  min-height: 100% !important;
-  height: 100vh;
+  min-height: calc(100% - 2.5rem - 0.5em - 0.5em) !important;
+  height: calc(100vh - 2.5rem - 0.5em - 0.5em);
   width: 70%;
   margin-left: 0em;
   overflow: auto;
@@ -275,6 +275,13 @@ a {
   padding-left: 2rem;
   height: 2.5rem;
 }
+
+.main-page {
+  height: 2.5rem;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+}
+
 .settings-title {
   font-size: 1.2rem;
   margin-left: 0.8rem;
@@ -297,10 +304,8 @@ a {
   margin-bottom: 2.75em;
   color: var(--primary-color);
   margin-bottom: 0px;
-  margin-top: 4rem;
   margin-left: 2rem;
   position: relative;
-  bottom: -1rem;
 }
 
 .searchbarbutton {
@@ -315,9 +320,10 @@ a {
   background-position: 47% 46%;
   background-size: 20px 20px;
   background-repeat: no-repeat;
-  top: 4.175rem;
+  bottom: 0px;
   position: relative;
   left: 0px;
+  margin-bottom: 0px;
 }
 
 .sectionwrap {
@@ -494,7 +500,6 @@ button.secondary-btn {
 .buttons {
   display: inline-block;
   position: relative;
-  top: 3.1rem;
   border-left: 2px solid var(--searchbar-bg);
   margin-left: 0.5rem;
 }