fix unaligned UI elements

yethranayeh · Dec 14, 2024 · e81ea5b · e81ea5b
1 parent e2bd9b3
commit e81ea5b
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/src/components/CalculationView/CalculationResults.tsx b/src/components/CalculationView/CalculationResults.tsx
@@ -1,7 +1,7 @@
 import { AmountDisplay } from "../AmountDisplay";
 
 export const CalculationResults = ({ results }: { results: Array<{ currency: CurrencyKey; calculation: number }> }) => (
-	<div className='flex flex-col'>
+	<div className='flex flex-col w-max self-start'>
 		{results.map((res) => (
 			<AmountDisplay key={res.currency} rate={res.calculation} currencyName={res.currency} />
 		))}

diff --git a/src/components/CalculationView/CalculationView.tsx b/src/components/CalculationView/CalculationView.tsx
@@ -43,7 +43,7 @@ export function CalculationView() {
 
 	return (
 		<div className='w-full flex justify-center px-4'>
-			<div className='min-w-[300px] w-full max-w-[500px] flex flex-col gap-4'>
+			<div className='min-w-[300px] w-full max-w-[500px] flex flex-col gap-4 items-center w-min'>
 				<CurrencySelection value={value} setValue={setValue} selected={selected} setSelected={setSelected} />
 
 				{selected && <CalculationResults results={convertedResults} />}

diff --git a/src/components/CalculationView/CurrencySelection.tsx b/src/components/CalculationView/CurrencySelection.tsx
@@ -31,7 +31,7 @@ export function CurrencySelection({ value, setValue, selected, setSelected }: Pr
 		}
 	}, []);
 	return (
-		<section className='flex flex-col gap-4 items-center'>
+		<section className='flex flex-col gap-4 items-center w-min'>
 			<div className='grid grid-cols-10 w-max'>
 				{currencies.map((c, index) => (
 					<button