From 7c59e7e9062b0c26b8411eefbd7e3a170caa1e1b Mon Sep 17 00:00:00 2001
From: Prozilla <business@prozilla.dev>
Date: Tue, 8 Aug 2023 21:14:02 +0200
Subject: [PATCH] Fixed taskbar for mobile

---
 src/App.module.css                         |  1 +
 src/components/task-bar/TaskBar.jsx        | 11 +++---
 src/components/task-bar/TaskBar.module.css | 41 ++++++++++++++++------
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/App.module.css b/src/App.module.css
index 41192a1..0be3495 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -5,4 +5,5 @@
 	width: 100%;
 	height: 100%;
 	text-align: center;
+	overflow: hidden;
 }
diff --git a/src/components/task-bar/TaskBar.jsx b/src/components/task-bar/TaskBar.jsx
index 2f698a1..0d2b493 100644
--- a/src/components/task-bar/TaskBar.jsx
+++ b/src/components/task-bar/TaskBar.jsx
@@ -36,6 +36,7 @@ function AppButton({ app }) {
 
 	return (
 		<button
+			key={app.id}
 			tabIndex={0}
 			className={classNames.join(" ")}
 			onClick={() => { windowsManager.open(app.id); }}
@@ -134,10 +135,12 @@ export function Taskbar() {
 					</OutsideClickListener>
 				</div>
 			</div>
-			<div className={styles["App-icons"]} onScroll={onUpdate} onResize={onUpdate} ref={ref} style={{ boxShadow }}>
-				{ApplicationsManager.APPLICATIONS.map((app) => 
-					<AppButton app={app} key={app.id}/>
-				)}
+			<div className={styles["App-icons"]} style={{ boxShadow }}>
+				<div className={styles["App-icons-inner"]} onScroll={onUpdate} onResize={onUpdate} ref={ref}>
+					{ApplicationsManager.APPLICATIONS.map((app) => 
+						<AppButton app={app} key={app.id}/>
+					)}
+				</div>
 			</div>
 			<div className={styles["Util-icons"]}>
 				<Battery/>
diff --git a/src/components/task-bar/TaskBar.module.css b/src/components/task-bar/TaskBar.module.css
index 8d3bd3f..64ba970 100644
--- a/src/components/task-bar/TaskBar.module.css
+++ b/src/components/task-bar/TaskBar.module.css
@@ -28,7 +28,8 @@
 	z-index: -1;
 }
 
-.Task-bar button:hover, .Task-bar button:focus-visible {
+.Task-bar button:hover,
+.Task-bar button:focus-visible {
 	background-color: var(--task-bar-button-hover-color);
 }
 
@@ -44,43 +45,60 @@
 }
 
 .Menu-icons,
-.App-icons {
+.App-icons-inner {
 	display: flex;
 	align-items: center;
 	height: 100%;
 }
 
 .App-icons {
-	overflow-x: auto;
+	position: relative;
+	width: 100%;
+	height: auto;
+	overflow: hidden;
 	pointer-events: none;
 }
 
-.App-icons::-webkit-scrollbar {
+.App-icons-inner {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	overflow-x: auto;
+	overflow-y: hidden;
+	pointer-events: auto;
+	z-index: -1;
+}
+
+.App-icons-inner::-webkit-scrollbar {
 	display: none;
 }
 
-.App-icons > *,
+.App-icons-inner > *,
 .Menu-button {
 	height: 100%;
 	padding: 0.75rem;
 }
 
-.App-icons > * > svg,
+.App-icons-inner > * > svg,
 .Menu-button > svg {
 	height: 1.25rem;
 }
 
+.App-icons-inner div,
+.App-icons-inner div > svg,
 .Menu-icons div,
-.Menu-icons div > svg,
-.App-icons div,
-.App-icons div > svg {
+.Menu-icons div > svg {
 	height: 100%;
 	width: auto;
 }
 
 .App-icon {
 	position: relative;
-	pointer-events: all;
+	width: var(--task-bar-height);
+	height: var(--task-bar-height);
+	aspect-ratio: 1;
 }
 
 .App-icon::after {
@@ -96,7 +114,8 @@
 	-webkit-transform: translateX(-50%);
 }
 
-.App-icon:hover::after, .App-icon:focus-visible::after {
+.App-icon:hover::after,
+.App-icon:focus-visible::after {
 	width: 100%;
 }