Change layout of preferences page on mobiles.

Author: Sashank999

extension/changelog.json

@@ -3,7 +3,7 @@
 		"version": { "major": 7, "minor": 5, "build": 2 },
 		"title": "Beta",
 		"date": false,
-		"logs": { "features": [], "fixes": [], "changes": [], "removed": [] }
+		"logs": { "features": [], "fixes": [], "changes": [{ "message": "Change layout of preferences page on mobiles.", "contributor": "TheFoxMan" }], "removed": [] }
 	},
 	{
 		"version": { "major": 7, "minor": 5, "build": 1 },

extension/pages/settings/preferences.css

@@ -5,6 +5,14 @@ main#preferences > h2 {
 	margin-left: 8em;
 }
 
+body.tt-mobile main#preferences {
+	margin: auto;
+}
+
+body.tt-mobile main#preferences > section {
+	width: 88%;
+}
+
 body.tt-mobile .no-mobile {
 	display: none !important;
 }
@@ -204,10 +212,19 @@ body.dark #tt-search-list::-webkit-scrollbar-thumb {
 	padding: 0;
 }
 
+body.tt-mobile #preferences > section:first-of-type {
+	flex-flow: column;
+}
+
 #preferences nav {
 	width: max-content;
 }
 
+body.tt-mobile #preferences nav {
+	width: unset;
+	overflow: hidden;
+}
+
 body.light #preferences nav {
 	border-right: 1px solid lightgray;
 	background-color: #f1f1f1;
@@ -224,6 +241,16 @@ body.dark #preferences nav {
 	margin: 0;
 }
 
+body.tt-mobile #preferences nav ul {
+	display: flex;
+	flex-flow: row;
+	overflow: auto;
+}
+
+body.tt-mobile #preferences nav ul::-webkit-scrollbar {
+	display: none;
+}
+
 #preferences nav ul > li {
 	padding: 7px;
 	border-bottom: 1px solid lightgray;

extension/scripts/global/functions/pages.css

@@ -91,6 +91,10 @@ body.tt-unscrollable {
 
 /* General pages */
 
+body.tt-mobile main {
+	margin: auto;
+}
+
 main > h2 {
 	text-align: center;
 }
@@ -107,7 +111,7 @@ body:not(.tt-mobile) main > section {
 }
 
 body.tt-mobile main > section {
-	width: 95%;
+	width: 88%;
 }
 
 body.light main > section {