spacing/flex in perf page

Author: aaronshaf

packages/idb-cache-app/src/App.tsx

@@ -8,6 +8,7 @@ import { View } from "@instructure/ui-view";
 import { Flex } from "@instructure/ui-flex";
 import { Heading } from "@instructure/ui-heading";
 import { NumberInput } from "@instructure/ui-number-input";
+import { TextInput } from "@instructure/ui-text-input";
 import GitHubLink from "./components/GitHubLink";
 import BlankStat from "./components/BlankStat";
 
@@ -146,37 +147,59 @@ const App = () => {
 								Test Configuration
 							</legend>
 							<Flex direction="column" gap="small">
-								<div className="flex items-center justify-between">
-									<span>
-										Cache key: <code className="text-sm">{cacheKey}</code>
-									</span>
-									<Button
-										data-testid="reset-cacheKey"
-										onClick={() => {
-											localStorage.removeItem("cacheKey");
-											window.location.reload();
-										}}
-									>
-										Reset
-									</Button>
-								</div>
-								<div className="flex items-center justify-between">
-									<span>
-										Cache buster: <code className="text-sm">{cacheBuster}</code>
-									</span>
-									<Button
-										data-testid="reset-cacheBuster"
-										onClick={() => {
-											localStorage.removeItem("cacheBuster");
-											window.location.reload();
-										}}
-									>
-										Reset
-									</Button>
-								</div>
-
-								<Flex gap="medium">
-									<Flex.Item shouldGrow>
+								<Flex.Item>
+									<Flex gap="medium" justifyItems="space-between">
+										<Flex.Item width="48%">
+											<Flex direction="row" alignItems="end">
+												<Flex.Item shouldGrow>
+													<TextInput
+														renderLabel="Cache key:"
+														interaction="disabled"
+														value={cacheKey}
+													/>
+												</Flex.Item>
+												<Flex.Item>
+													<Button
+														margin="0 0 0 xxx-small"
+														data-testid="reset-cacheKey"
+														onClick={() => {
+															localStorage.removeItem("cacheKey");
+															window.location.reload();
+														}}
+													>
+														Reset
+													</Button>
+												</Flex.Item>
+											</Flex>
+										</Flex.Item>
+										<Flex.Item width="48%">
+											<Flex direction="row" alignItems="end">
+												<Flex.Item shouldGrow>
+													<TextInput
+														renderLabel="Cache buster:"
+														interaction="disabled"
+														value={cacheBuster}
+													/>
+												</Flex.Item>
+												<Flex.Item>
+													<Button
+														margin="0 0 0 xxx-small"
+														data-testid="reset-cacheBuster"
+														onClick={() => {
+															localStorage.removeItem("cacheBuster");
+															window.location.reload();
+														}}
+													>
+														Reset
+													</Button>
+												</Flex.Item>
+											</Flex>
+										</Flex.Item>
+									</Flex>
+								</Flex.Item>
+
+								<Flex justifyItems="space-between">
+									<Flex.Item width="48%">
 										<NumberInput
 											renderLabel="Size of data (KB):"
 											onChange={(e) => {
@@ -196,7 +219,7 @@ const App = () => {
 											value={Math.round(itemSize / 1024)} // Display in KB
 										/>
 									</Flex.Item>
-									<Flex.Item shouldGrow>
+									<Flex.Item width="48%">
 										<NumberInput
 											renderLabel="Number of chunks:"
 											interaction="disabled"