From fd05b181718f30f6866813a6c30253a79d9e4bb9 Mon Sep 17 00:00:00 2001
From: 4yman <170770027+4yman-0@users.noreply.github.com>
Date: Tue, 12 Nov 2024 12:45:33 +0100
Subject: [PATCH 1/6] Fix menu size

---
 menu/index.html | 16 ++++++++++++----
 menu/satus.css  |  3 +--
 2 files changed, 13 insertions(+), 6 deletions(-)
diff --git a/menu/index.html b/menu/index.html
index d4fab8b8b..79f07a027 100644
--- a/menu/index.html
+++ b/menu/index.html
@@ -1,5 +1,10 @@
-<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
-<title>ImprovedTube</title><style>body{width:320px;max-width:320px; margin:0; height:586px;max-height:586px;"}</style>
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<title>ImprovedTube</title>
+<style>body{min-width:320px; margin:0; min-height:586px;"}</style>
 <script src="satus.js"></script>
 <script src="skeleton.js"></script>
 <script src="functions.js"></script>
@@ -31,5 +36,8 @@
 <link rel="stylesheet" href="styles/mixer.css">
 <link rel="stylesheet" href="styles/settings.css">
 <link rel="stylesheet" href="styles/themes.css">
-</head><body><div id="loading" style="animation: 3s linear 0s 1 normal none running fadeIn; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 3px solid rgb(182, 233, 255); border-radius: 80px; padding: 37px; color: rgb(120, 147, 161);">...asking your browser what settings you made here before...</div>
-</body></html>
+</head>
+<body>
+<div id="loading" style="animation: 3s linear 0s 1 normal none running fadeIn; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 3px solid rgb(182, 233, 255); border-radius: 80px; padding: 37px; color: rgb(120, 147, 161);">...asking your browser what settings you made here before...</div>
+</body>
+</html>
diff --git a/menu/satus.css b/menu/satus.css
index 3ebe5e09c..f5b0fbced 100644
--- a/menu/satus.css
+++ b/menu/satus.css
@@ -860,8 +860,7 @@ As our Syntax markup isnt read for <textarea>, is it?
 	display: flex;
 	flex-direction: column;
 
-	width: 100%;
-	height: 100%;
+	min-height: inherit;
 
 	color: var(--satus-base-foreground);
 	background: var(--satus-base-background);

From 9388443498b2d003907a97092ccac1219943ace1 Mon Sep 17 00:00:00 2001
From: 4yman <170770027+4yman-0@users.noreply.github.com>
Date: Fri, 15 Nov 2024 11:22:39 +0100
Subject: [PATCH 2/6] satus - Use grid for section

---
 menu/satus.css | 47 +++++++----------------------------------------
 1 file changed, 7 insertions(+), 40 deletions(-)

diff --git a/menu/satus.css b/menu/satus.css
index f5b0fbced..ca054c598 100644
--- a/menu/satus.css
+++ b/menu/satus.css
@@ -1,42 +1,8 @@
-.satus-section--card, .satus-select, .satus-switch, .satus-switch__content {transition: background-color 0.8s ease-out !important;}
+.satus-section--card, .satus-select, .satus-switch, .satus-switch__content {transition: background-color 0.8s ease-out;}
 .satus-section--card:hover, .satus-select:hover, .satus-switch:hover,  .satus-switch__content:hover  {transition: background-color 0.08s ease-out !important;}
 
-*[data-value][data-value="false"] {margin-bottom: 0; margin-top: 0; transition: margin 0.14s linear !important;}  
-*[data-value][data-value="true"] {margin-bottom: -4.5px !important; margin-top: -3.5px; transition: margin 0.2s linear !important;}
-
-.satus-button--general, .satus-button--appearance, .satus-button--player {
-	margin-left: 9px !important;
-	margin-right: -18px !important;
-	max-width: 272px !important;
-}
-div:not([home-style="list"]) .satus-button--themes, div:not([home-style="list"]) .satus-button--playlist,div:not([home-style="list"])  .satus-button--channel, div:not([home-style="list"]) .satus-button--shortcuts {
-	transform: scale(0.91);
-	margin-top: -10px !important;
-	margin-left: -5px !important;
-	margin-right: -28px !important;
-}
-div:not([home-style="list"]) .satus-button--blocklist, div:not([home-style="list"]) .satus-button--analyzer {
-	transform: scale(0.78);
-	margin-top: -22px !important;
-	margin-left: 110px !important;
-	margin-right: -150px !important;
-}
-
-div[home-style="list"] .satus-button--themes, div[home-style="list"] .satus-button--playlist,div[home-style="list"]  .satus-button--channel, div[home-style="list"] .satus-button--shortcuts {
-	transform: scale(0.92);
-	margin-bottom: -17px !important;
-	margin-left:3px !important;
-	max-width: 197px !important;
-	margin-top:2px !important;
-}
-div[home-style="list"] .satus-button--blocklist, div[home-style="list"] .satus-button--analyzer {
-	transform: scale(0.75);
-	margin-left: 165px !important;
-	max-width: 141px !important;
-	margin-top: -72px !important;
-}
-div[home-style="list"] .satus-button--analyzer {margin-top: -16px !important;}
-
+*[data-value][data-value="false"] {margin-bottom: 0; margin-top: 0; transition: margin 0.14s linear;} 
+*[data-value][data-value="true"] {margin-bottom: -4.5px !important; margin-top: -3.5px; transition: margin 0.2s linear;}
 
 /*--------------------------------------------------------------
 # SCROLLBAR
@@ -714,9 +680,10 @@ As our Syntax markup isnt read for <textarea>, is it?
 --------------------------------------------------------------*/
 
 .satus-section {
-	display: flex;
-
-	flex-wrap: wrap;
+    display: grid;
+    flex-wrap: wrap;
+    grid-template-columns: repeat(3, 1fr);
+    grid-row-gap: 8px;
 }
 
 

From e313e06c3b9ba2e9adc0118cdc50616924c2019f Mon Sep 17 00:00:00 2001
From: 4yman <170770027+4yman-0@users.noreply.github.com>
Date: Fri, 15 Nov 2024 11:36:44 +0100
Subject: [PATCH 3/6] satus - Attempt fixing

---
 menu/satus.css       | 35 ++++++++++++++---------------------
 menu/styles/home.css | 17 ++++++++++++++---
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/menu/satus.css b/menu/satus.css
index ca054c598..ac546f712 100644
--- a/menu/satus.css
+++ b/menu/satus.css
@@ -680,10 +680,8 @@ As our Syntax markup isnt read for <textarea>, is it?
 --------------------------------------------------------------*/
 
 .satus-section {
-    display: grid;
+    display: flex;
     flex-wrap: wrap;
-    grid-template-columns: repeat(3, 1fr);
-    grid-row-gap: 8px;
 }
 
 
@@ -762,9 +760,9 @@ As our Syntax markup isnt read for <textarea>, is it?
 
 .satus-section--card>[class^='satus']:not(.satus-list):not(.satus-section) {
 	display: flex;
+	flex-direction: column;
 
 	min-height: 48px;
-	padding: 8px 12px;
 
 	transition: background-color .18s cubic-bezier(.25, .8, .5, 1);
 	text-align: left;
@@ -1148,26 +1146,21 @@ As our Syntax markup isnt read for <textarea>, is it?
 --------------------------------------------------------------*/
 
 .satus-button {
-	font: inherit;
-
-	position: relative;
-
+    font: inherit;
 	display: inline-flex;
-	overflow: hidden;
-
-	height: 36px;
-	padding: 8px;
-
-	transition: background-color .3s cubic-bezier(.25, .8, .5, 1);
+	align-items: center;
+    overflow: hidden;
+    height: 36px;
+    padding: 8px;
 
-	color: inherit;
-	border: none;
-	border-radius: 6px;
-	outline: none;
-	background: transparent;
+    transition: background-color .3s cubic-bezier(.25, .8, .5, 1);
 
-	appearance: none;
-	align-items: center;
+    color: inherit;
+    border: none;
+    border-radius: 6px;
+    outline: none;
+    background: transparent;
+    appearance: none;
 }
 
 .satus-button:hover {
diff --git a/menu/styles/home.css b/menu/styles/home.css
index 54c4520f2..da2dd4fb0 100644
--- a/menu/styles/home.css
+++ b/menu/styles/home.css
@@ -1,9 +1,22 @@
 /*--------------------------------------------------------------
 >>> HOME:
 ----------------------------------------------------------------
+# Section
 # Buttons
 --------------------------------------------------------------*/
 
+/*--------------------------------------------------------------
+# SECTION
+--------------------------------------------------------------*/
+
+.satus-section--home {
+    display: grid;
+    flex-wrap: wrap;
+
+    grid-template-columns: repeat(3, 1fr);
+    grid-row-gap: 8px;
+}
+
 /*--------------------------------------------------------------
 # BUTTONS
 --------------------------------------------------------------*/
@@ -11,11 +24,9 @@
 .satus-section--home .satus-button {
 	display: flex;
 	flex-direction: column;
+    align-items: center;
 
-	width: calc(100% / 3);
 	height: unset;
-	margin: 8px 0 0;
-	padding: 8px 0;
 }
 
 .satus-base:not([improvedtube-home='list'])[page] .satus-section--home .satus-button {

From 6abc84e2829977ab742630660f4cb4416dd9a8cc Mon Sep 17 00:00:00 2001
From: 4yman <170770027+4yman-0@users.noreply.github.com>
Date: Fri, 15 Nov 2024 11:36:44 +0100
Subject: [PATCH 4/6] satus - Attempt fixing (again)

---
 menu/satus.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/menu/satus.css b/menu/satus.css
index ac546f712..2f48c2997 100644
--- a/menu/satus.css
+++ b/menu/satus.css
@@ -759,13 +759,11 @@ As our Syntax markup isnt read for <textarea>, is it?
 }
 
 .satus-section--card>[class^='satus']:not(.satus-list):not(.satus-section) {
-	display: flex;
-	flex-direction: column;
-
 	min-height: 48px;
 
 	transition: background-color .18s cubic-bezier(.25, .8, .5, 1);
 	text-align: left;
+    padding: 8px 12px;
 
 	border-radius: 0;
 

From 2a4ae1b9144c4e3eb477ad3f86ba59bf1d0fc771 Mon Sep 17 00:00:00 2001
From: 4yman <170770027+4yman-0@users.noreply.github.com>
Date: Fri, 15 Nov 2024 12:12:12 +0100
Subject: [PATCH 5/6] Add margin to grid

---
 menu/styles/home.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/menu/styles/home.css b/menu/styles/home.css
index da2dd4fb0..196601019 100644
--- a/menu/styles/home.css
+++ b/menu/styles/home.css
@@ -12,6 +12,7 @@
 .satus-section--home {
     display: grid;
     flex-wrap: wrap;
+    padding: 8px;
 
     grid-template-columns: repeat(3, 1fr);
     grid-row-gap: 8px;

From a9fff72ef975f985302b530183b882b9bc939a03 Mon Sep 17 00:00:00 2001
From: 4yman <170770027+4yman-0@users.noreply.github.com>
Date: Mon, 18 Nov 2024 01:10:17 +0100
Subject: [PATCH 6/6] Go back to flex (w/ %)

---
 menu/styles/home.css | 32 ++++++++++++++++++++++----------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/menu/styles/home.css b/menu/styles/home.css
index 196601019..482559f89 100644
--- a/menu/styles/home.css
+++ b/menu/styles/home.css
@@ -10,18 +10,37 @@
 --------------------------------------------------------------*/
 
 .satus-section--home {
-    display: grid;
+    display: flex/*grid*/;
     flex-wrap: wrap;
     padding: 8px;
 
-    grid-template-columns: repeat(3, 1fr);
-    grid-row-gap: 8px;
+    /*grid-template-columns: repeat(3, 1fr);
+    grid-row-gap: 8px;*/
 }
 
 /*--------------------------------------------------------------
 # BUTTONS
 --------------------------------------------------------------*/
 
+.satus-button--general,
+.satus-button--player,
+.satus-button--appearance {
+	width: 33%;
+}
+
+.satus-button--shortcuts,
+.satus-button--channel,
+.satus-button--playlist,
+.satus-button--themes {
+	width: 25%;
+}
+
+.satus-button--blocklist,
+.satus-button--analyzer {
+	width: 50%;
+	transform: scale(.9);
+}
+
 .satus-section--home .satus-button {
 	display: flex;
 	flex-direction: column;
@@ -30,10 +49,6 @@
 	height: unset;
 }
 
-.satus-base:not([improvedtube-home='list'])[page] .satus-section--home .satus-button {
-	width: 96px;
-}
-
 .satus-section--home .satus-button:focus,
 .satus-section--home .satus-button:hover {
 	background: transparent;
@@ -67,10 +82,7 @@
 }
 
 .satus-section--home .satus-button> :nth-child(2) {
-	overflow: hidden;
-
 	width: 100%;
-	padding: 0 8px;
 
 	text-align: center;
 	white-space: nowrap;
