Made windows & taskbar more responsive

src/components/task-bar/TaskBar.module.css

@@ -105,6 +105,7 @@
 
 .Util-icons {
 	display: flex;
+	gap: 0;
 	justify-content: flex-end;
 	align-items: center;
 	height: 100%;
@@ -115,10 +116,14 @@
 
 .Util-icons > * {
 	height: 100%;
+	width: min-content;
+	margin: 0;
 }
 
 .Util-icons > * > svg {
 	height: 1rem;
+	width: 1rem;
+	aspect-ratio: 1;
 }
 
 #desktop-button {

src/components/windows/Window.jsx

@@ -25,6 +25,10 @@ export function Window({ id, app, size, position, focused = false, onInteract, o
 	const windowsManager = useWindowsManager();
 	const nodeRef = useRef(null);
 
+	const [initialised, setInitialised] = useState(false);
+	const [startSize, setStartSize] = useState(size);
+	const [startPosition, setStartPosition] = useState(position);
+
 	const [maximized, setMaximized] = useState(false);
 	const [minimized, setMinimized] = useState(false);
 
@@ -37,10 +41,31 @@ export function Window({ id, app, size, position, focused = false, onInteract, o
 		const resizeObserver = new ResizeObserver((event) => {
 			setScreenWidth(event[0].contentBoxSize[0].inlineSize);
 			setScreenHeight(event[0].contentBoxSize[0].blockSize);
+			setInitialised(true);
 		});
 
 		resizeObserver.observe(document.getElementById("root"));
-	});
+	}, []);
+
+	useEffect(() => {
+		if (!initialised)
+			return;
+
+		if (size.x > screenWidth || size.y > screenHeight) {
+			setStartSize(new Vector2(screenWidth - 32, screenHeight - 32));
+			setStartPosition(new Vector2(16, 16));
+			setMaximized(true);
+		} else {
+			if (position.x > screenWidth) {
+				position.x = 0;
+				setStartPosition(position);
+			}
+			if (position.y > screenHeight) {
+				position.y = 0;
+				setStartPosition(position);
+			}
+		}
+	}, [initialised, position, size, screenHeight, screenWidth]);
 
 	const close = (event) => {
 		event?.preventDefault();
@@ -65,13 +90,13 @@ export function Window({ id, app, size, position, focused = false, onInteract, o
 		<Draggable
 			axis="both"
 			handle={".Handle"}
-			defaultPosition={{ x: position.x, y: position.y }}
+			defaultPosition={startPosition}
 			position={null}
 			scale={1}
 			bounds={{
 				top: 0,
 				bottom: screenHeight - 55,
-				left: -size.x + 85,
+				left: -startSize.x + 85,
 				right: screenWidth - 5
 			}}
 			cancel="button"
@@ -83,8 +108,8 @@ export function Window({ id, app, size, position, focused = false, onInteract, o
 				className={classNames.join(" ")}
 				ref={nodeRef}
 				style={{
-					width: maximized ? null : size.x,
+					width: maximized ? null : startSize.x,
-					height: maximized ? null : size.y,
+					height: maximized ? null : startSize.y,
 				}}
 				onClick={focus}
 			>

src/features/windows/windows.js

@@ -1,7 +1,6 @@
 import ApplicationsManager from "../applications/applications.js";
 import { randomRange } from "../math/random.js";
 import Vector2 from "../math/vector2.js";
-
 import { VirtualFile } from "../virtual-drive/virtual-file.js";
 
 export default class WindowsManager {
@@ -112,6 +111,9 @@ export default class WindowsManager {
 		this.updateWindows = updateWindows;
 	}
 
+	/**
+	 * @returns {string[]}
+	 */
 	get windowIds() {
 		return Object.keys(this.windows);
 	}

src/styles/global.css

@@ -118,6 +118,14 @@ code {
 	font-family: var(--mono-font-family);
 }
 
+button {
+	margin: 0;
+	border: none;
+	outline: none;
+	transition: background-color 100ms ease-in-out;
+	cursor: pointer;
+}
+
 *::selection {
 	color: var(--background-color-c);
 	background-color: var(--grey-b);