Controls: Make timeline shorter on narrow screens

MrTipson · Jul 21, 2024 · 81c318a · 81c318a
1 parent da69c60
commit 81c318a
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
@@ -13,13 +13,14 @@ import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import type { STGSettings } from "@/components/Machine";
 
-export default function Controls({ className, machine, step, setStep, breakpoints, settings }: {
+export default function Controls({ className, machine, step, setStep, breakpoints, settings, isDesktop }: {
 	className?: string,
 	machine: stg_machine,
 	step: number,
 	setStep: Function,
 	breakpoints: Map<number, number>,
-	settings: STGSettings
+	settings: STGSettings,
+	isDesktop: boolean,
 }) {
 	const { toast } = useToast();
 	const [markers, setMarkers] = useState<Map<number, string>>(() => {
@@ -105,7 +106,7 @@ export default function Controls({ className, machine, step, setStep, breakpoint
 			<div className="text-center">
 				Step <span className="font-semibold">{machine.step_number}</span>
 			</div>
-			<Timeline className="m-auto w-[500px]" width={500} step={step} moveTo={moveTo} markers={[...markers.entries()]}></Timeline>
+			<Timeline className={"m-auto " + (isDesktop ? "w-[500px]" : "w-[300px]")} width={isDesktop ? 500 : 300} step={step} moveTo={moveTo} markers={[...markers.entries()]}></Timeline>
 			{
 				definition &&
 				<div className="text-center p-2">

diff --git a/src/components/Machine.tsx b/src/components/Machine.tsx
@@ -74,7 +74,7 @@ export default function Machine() {
 					</Panel>
 				</PanelGroup>
 				{loaded &&
-					<Controls className="bg-background p-2 border" machine={machine} step={step} setStep={setStep} breakpoints={breakpoints} settings={settings} />
+					<Controls className="bg-background p-2 border" machine={machine} step={step} setStep={setStep} breakpoints={breakpoints} settings={settings} isDesktop={isDesktop} />
 				}
 				<Toaster />
 			</div>
@@ -98,7 +98,7 @@ export default function Machine() {
 						<Panel defaultSize={55}><HeapView machine={machine} className="h-full" step={step} settings={settings} /></Panel>
 						<Handle withHandle />
 						<Panel defaultSize={15}><StackView machine={machine} className="h-full" /></Panel>
-						<Controls className="absolute left-0 right-0 m-auto bottom-0 bg-background z-10 p-2 w-fit rounded-t border" machine={machine} step={step} setStep={setStep} breakpoints={breakpoints} settings={settings} />
+						<Controls className="absolute left-0 right-0 m-auto bottom-0 bg-background z-10 p-2 w-fit rounded-t border" machine={machine} step={step} setStep={setStep} breakpoints={breakpoints} settings={settings} isDesktop={isDesktop} />
 					</>
 					|| // not loaded
 					<>

diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
@@ -52,7 +52,7 @@ export default function Timeline({ className, width, markers, step, moveTo }:
 	}
 
 	return (
-		<div className={className + ` w-[${width}px]`}>
+		<div className={className + ` w-[${width}px] relative z-0`}>
 
 			<div className="relative mx-2 h-8">
 				{markers.filter(([i, _]) => i <= limit).map(([i, name]) =>