RTL layout fixes

beszel/site/src/components/charts/area-chart.tsx

@@ -84,6 +84,8 @@ export default memo(function AreaChartDefault({
 				<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
+						direction="ltr"
+						orientation={chartData.orientation}
 						className="tracking-tighter"
 						width={yAxisWidth}
 						tickFormatter={(value) => {

beszel/site/src/components/charts/container-chart.tsx

@@ -101,10 +101,10 @@ export default memo(function ContainerChart({
 					return (
 						<span className="flex">
 							{decimalString(received)} MB/s
-							<span className="opacity-70 ml-0.5"> rx </span>
+							<span className="opacity-70 ms-0.5"> rx </span>
 							<Separator orientation="vertical" className="h-3 mx-1.5 bg-primary/40" />
 							{decimalString(sent)} MB/s
-							<span className="opacity-70 ml-0.5"> tx</span>
+							<span className="opacity-70 ms-0.5"> tx</span>
 						</span>
 					)
 				} catch (e) {
@@ -145,6 +145,8 @@ export default memo(function ContainerChart({
 				>
 					<CartesianGrid vertical={false} />
 					<YAxis
+						direction="ltr"
+						orientation={chartData.orientation}
 						className="tracking-tighter"
 						width={yAxisWidth}
 						tickFormatter={tickFormatter}

beszel/site/src/components/charts/disk-chart.tsx

@@ -40,6 +40,8 @@ export default memo(function DiskChart({
 				<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
+						direction="ltr"
+						orientation={chartData.orientation}
 						className="tracking-tighter"
 						width={yAxisWidth}
 						domain={[0, diskSize]}

beszel/site/src/components/charts/mem-chart.tsx

@@ -30,6 +30,8 @@ export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
 					<CartesianGrid vertical={false} />
 					{totalMem && (
 						<YAxis
+							direction="ltr"
+							orientation={chartData.orientation}
 							// use "ticks" instead of domain / tickcount if need more control
 							domain={[0, totalMem]}
 							tickCount={9}

beszel/site/src/components/charts/swap-chart.tsx

@@ -31,6 +31,8 @@ export default memo(function SwapChart({ chartData }: { chartData: ChartData })
 				<AreaChart accessibilityLayer data={chartData.systemStats} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
+						direction="ltr"
+						orientation={chartData.orientation}
 						className="tracking-tighter"
 						domain={[0, () => toFixedWithoutTrailingZeros(chartData.systemStats.at(-1)?.stats.s ?? 0.04, 2)]}
 						width={yAxisWidth}

beszel/site/src/components/charts/temperature-chart.tsx

@@ -64,6 +64,8 @@ export default memo(function TemperatureChart({ chartData }: { chartData: ChartD
 				<LineChart accessibilityLayer data={newChartData.data} margin={chartMargin}>
 					<CartesianGrid vertical={false} />
 					<YAxis
+						direction="ltr"
+						orientation={chartData.orientation}
 						className="tracking-tighter"
 						domain={[0, "auto"]}
 						width={yAxisWidth}

beszel/site/src/components/routes/system.tsx

@@ -85,8 +85,7 @@ async function getStats<T>(collection: string, system: SystemRecord, chartTime:
 }
 
 export default function SystemDetail({ name }: { name: string }) {
-	const { t } = useTranslation()
+	const { t, i18n } = useTranslation()
-
 	const systems = useStore($systems)
 	const chartTime = useStore($chartTime)
 	/** Max CPU toggle value */
@@ -158,9 +157,10 @@ export default function SystemDetail({ name }: { name: string }) {
 			systemStats,
 			containerData,
 			chartTime,
+			orientation: i18n.dir() == "rtl" ? "right" : "left",
 			...getTimeData(chartTime, lastCreated),
 		}
-	}, [systemStats, containerData])
+	}, [systemStats, containerData, t])
 
 	// get stats
 	useEffect(() => {
@@ -339,7 +339,7 @@ export default function SystemDetail({ name }: { name: string }) {
 								})}
 							</div>
 						</div>
-						<div className="lg:ml-auto flex items-center gap-2 max-sm:-mb-1">
+						<div className="lg:ms-auto flex items-center gap-2 max-sm:-mb-1">
 							<ChartTimeSelect className="w-full lg:w-40" />
 							<TooltipProvider delayDuration={100}>
 								<Tooltip>
@@ -542,7 +542,7 @@ function ContainerFilterBar() {
 
 	return (
 		<>
-			<Input placeholder={t("filter")} className="pl-4 pr-8" value={containerFilter} onChange={handleChange} />
+			<Input placeholder={t("filter")} className="ps-4 pe-8" value={containerFilter} onChange={handleChange} />
 			{containerFilter && (
 				<Button
 					type="button"
@@ -567,8 +567,8 @@ function SelectAvgMax({ store }: { store: [boolean, React.Dispatch<React.SetStat
 
 	return (
 		<Select value={max ? "max" : "avg"} onValueChange={(e) => setMax(e === "max")}>
-			<SelectTrigger className="relative pl-10 pr-5">
+			<SelectTrigger className="relative ps-10 pe-5">
-				<Icon className="h-4 w-4 absolute left-4 top-1/2 -translate-y-1/2 opacity-85" />
+				<Icon className="h-4 w-4 absolute start-4 top-1/2 -translate-y-1/2 opacity-85" />
 				<SelectValue />
 			</SelectTrigger>
 			<SelectContent>
@@ -606,9 +606,9 @@ function ChartCard({
 			<CardHeader className="pb-5 pt-4 relative space-y-1 max-sm:py-3 max-sm:px-4">
 				<CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
 				<CardDescription>{description}</CardDescription>
-				{cornerEl && <div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:right-3.5">{cornerEl}</div>}
+				{cornerEl && <div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:end-3.5">{cornerEl}</div>}
 			</CardHeader>
-			<div className="pl-0 w-[calc(100%-1.6em)] h-52 relative">
+			<div className="ps-0 w-[calc(100%-1.6em)] h-52 relative">
 				{<Spinner msg={empty ? t("monitor.waiting_for") : undefined} />}
 				{isIntersecting && children}
 			</div>

beszel/site/src/components/systems-table/systems-table.tsx

@@ -80,12 +80,12 @@ function sortableHeader(column: Column<SystemRecord, unknown>, name: string, Ico
 	return (
 		<Button
 			variant="ghost"
-			className="h-9 px-3 rtl:ml-auto flex"
+			className="h-9 px-3 flex"
 			onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
 		>
 			<Icon className="me-2 h-4 w-4" />
 			{name}
-			{!hideSortIcon && <ArrowUpDownIcon className="ml-2 h-4 w-4" />}
+			{!hideSortIcon && <ArrowUpDownIcon className="ms-2 h-4 w-4" />}
 		</Button>
 	)
 }
@@ -218,24 +218,24 @@ export default function SystemsTable({ filter }: { filter?: string }) {
 										>
 											{status === "paused" ? (
 												<>
-													<PlayCircleIcon className="mr-2.5 h-4 w-4" />
+													<PlayCircleIcon className="me-2.5 h-4 w-4" />
 													{t("systems_table.resume")}
 												</>
 											) : (
 												<>
-													<PauseCircleIcon className="mr-2.5 h-4 w-4" />
+													<PauseCircleIcon className="me-2.5 h-4 w-4" />
 													{t("systems_table.pause")}
 												</>
 											)}
 										</DropdownMenuItem>
 										<DropdownMenuItem onClick={() => copyToClipboard(host)}>
-											<CopyIcon className="mr-2.5 h-4 w-4" />
+											<CopyIcon className="me-2.5 h-4 w-4" />
 											{t("systems_table.copy_host")}
 										</DropdownMenuItem>
 										<DropdownMenuSeparator className={cn(isReadOnlyUser() && "hidden")} />
 										<AlertDialogTrigger asChild>
 											<DropdownMenuItem className={cn(isReadOnlyUser() && "hidden")}>
-												<Trash2Icon className="mr-2.5 h-4 w-4" />
+												<Trash2Icon className="me-2.5 h-4 w-4" />
 												{t("systems_table.delete")}
 											</DropdownMenuItem>
 										</AlertDialogTrigger>

beszel/site/src/lib/languages.json

@@ -17,7 +17,7 @@
 	{
 		"lang": "es",
 		"label": "Español",
-		"e": "🇪🇸"
+		"e": "🇲🇽"
 	},
 	{
 		"lang": "fr",

beszel/site/src/types.d.ts

@@ -161,6 +161,7 @@ type ChartDataContainer = {
 export interface ChartData {
 	systemStats: SystemStatsRecord[]
 	containerData: ChartDataContainer[]
+	orientation: "right" | "left"
 	ticks: number[]
 	domain: number[]
 	chartTime: ChartTimes