fix: display issues

greymass · Oct 3, 2024 · 91cc963 · 91cc963
1 parent 371b216
commit 91cc963
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 51 deletions.
diff --git a/src/app.css b/src/app.css
@@ -59,7 +59,7 @@
 		@apply flex flex-wrap gap-4;
 	}
 
-	.layout-switcher>* {
+	.layout-switcher > * {
 		flex-grow: 1;
 		flex-basis: calc((var(--switcher-threshold) - 100%) * 999);
 	}
@@ -83,10 +83,10 @@
 
 	/* table styles */
 	.table-row-element {
-		@apply border-b border-neutral-300/10 bg-gradient-to-r from-transparent to-transparent last:border-none odd:via-mineShaft-950 group-[.table-head]:bg-none data-[hoverEffect=true]:hover:via-skyBlue-500/10
+		@apply border-b border-neutral-300/10 bg-gradient-to-r from-transparent to-transparent last:border-none odd:via-mineShaft-950 group-[.table-head]:bg-none data-[hoverEffect=true]:hover:via-skyBlue-500/10;
 	}
 
 	.table-header-element {
-		@apply py-1.5 pl-2 pr-2 text-left font-medium text-mineShaft-200/60 first:pl-0 last:pr-0
+		@apply py-1.5 pl-2 pr-2 text-left font-medium text-mineShaft-200/60 first:pl-0 last:pr-0;
 	}
 }
diff --git a/src/lib/components/chart/barchart.svelte b/src/lib/components/chart/barchart.svelte
@@ -70,7 +70,7 @@
 	<canvas bind:this={ctx}></canvas>
 	<hr class="h-px border-0 bg-shark-200/50" />
 	<div class="flex items-center justify-between font-medium">
-		<span class="text-shark-200/70">{data.length} days</span>
+		<!-- <span class="text-shark-200/70">{String(data.length)} days</span> -->
 		<div class="flex gap-4">
 			<div class="flex items-center gap-1">
 				<div class="size-4 rounded bg-[#00ED97]"></div>

diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
@@ -4,7 +4,7 @@
 
 	const codeStyles = 'bg-shark-900/40 text-xs text-white font-mono rounded-md px-2 py-1';
 	const preStyles =
-		'bg-shark-900/20 text-sm text-white font-mono rounded-lg px-2 py-2 overflow-x-auto';
+		'bg-shark-900/20 text-sm text-white font-mono rounded-lg px-2 py-2 overflow-x-scroll';
 </script>
 
 <svelte:element this={tag} class={props.inline ? codeStyles : preStyles}>

diff --git a/src/lib/components/input/asset.svelte b/src/lib/components/input/asset.svelte
@@ -3,6 +3,7 @@
 	import type { ComponentProps } from 'svelte';
 	import TextInput from './text.svelte';
 	import Big from 'big.js';
+	import Code from '../code.svelte';
 
 	interface AssetInputProps extends ComponentProps<TextInput> {
 		min?: number;
@@ -129,26 +130,24 @@
 
 {#if debug}
 	<h3>Component State</h3>
-	<pre>
-
-input (string):   "{input}"
-input (number):   "{number}"
+	<!-- prettier-ignore -->
+	<Code>
+input (string): "{input}"
+input (number): "{number}"
 input (decimals): {decimals}
-input (min):      {min}
+input (min): {min}
 input (minUnits): {minUnits}
-input (max):      {max}
+input (max): {max}
 input (maxUnits): {maxUnits}
-token symbol:     {symbol}
-precision:        {symbol.precision}
-formatted:        {formatted}
-Asset:            {asset}
-
----
-
-Valid Input:       {satisfies}
-Valid Number:      {satisfiesNumber}
-Valid Precision:   {satisfiesPrecision}
-Valid Minimum:     {satisfiesMinimum}
-Valid Maximum:     {satisfiesMaximum}
-</pre>
+token symbol: {symbol}
+precision: {symbol.precision}
+formatted: {formatted}
+Asset: {asset}
+--- 
+Valid Input: {satisfies}
+Valid Number: {satisfiesNumber}
+Valid Precision: {satisfiesPrecision}
+Valid Minimum: {satisfiesMinimum}
+Valid Maximum: {satisfiesMaximum}
+	</Code>
 {/if}
diff --git a/src/lib/components/input/assetOrUnits.svelte b/src/lib/components/input/assetOrUnits.svelte
@@ -6,6 +6,7 @@
 	import Button from '../button/button.svelte';
 	import Cluster from '$lib/components/layout/cluster.svelte';
 	import Stack from '$lib/components/layout/stack.svelte';
+	import Code from '../code.svelte';
 
 	interface AssetOrUnitsProps extends ComponentProps<TextInput> {
 		assetValue: Asset;
@@ -85,12 +86,13 @@
 	{#if debug}
 		<div class="mt-4">
 			<h3>Component State</h3>
-			<pre>
-                Input Type: {format === 'asset' ? 'Asset' : 'Units'}
-                Asset Value: {assetValue}
-                Units Value: {unitsValue}
-                Symbol: {assetValue?.symbol.code}
-			</pre>
+			<!-- prettier-ignore -->
+			<Code>
+Input Type: {format === 'asset' ? 'Asset' : 'Units'}
+Asset Value: {assetValue}
+Units Value: {unitsValue}
+Symbol: {assetValue?.symbol.code}
+			</Code>
 		</div>
 	{/if}
 </div>
diff --git a/src/lib/components/input/number.svelte b/src/lib/components/input/number.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import TextInput from './text.svelte';
+	import Code from '../code.svelte';
 
 	interface NumberInputProps extends Omit<HTMLInputAttributes, 'type' | 'value'> {
 		ref?: HTMLInputElement;
@@ -41,14 +42,15 @@
 {#if debug}
 	<div class="mt-4">
 		<h3>Component State</h3>
-		<pre>
-			Input Value: {inputValue}
-			Parsed Value: {_value}
-			Satisfies Minimum: {satisfiesMinimum}
-			Satisfies Maximum: {satisfiesMaxmimum}
-			Satisfies: {satisfies}
-			Min: {props.min}
-			Max: {props.max}
-		</pre>
+		<!-- prettier-ignore -->
+		<Code>
+Input Value: {inputValue}
+Parsed Value: {_value}
+Satisfies Minimum: {satisfiesMinimum}
+Satisfies Maximum: {satisfiesMaxmimum}
+Satisfies: {satisfies}
+Min: {props.min}
+Max: {props.max}
+		</Code>
 	</div>
 {/if}
diff --git a/src/lib/components/select/elements/trigger.svelte b/src/lib/components/select/elements/trigger.svelte
@@ -10,9 +10,10 @@
 		children: Snippet;
 		open: Readable<boolean>;
 		trigger: AnyMeltElement;
+		class?: string;
 	}
 
-	const { trigger, open, ...props }: Props = $props();
+	const { trigger, open, class: className = '', ...props }: Props = $props();
 </script>
 
 <button
@@ -37,6 +38,7 @@
 	data-[variant=form]:rounded-lg
 	data-[variant=pill]:rounded-full
 	data-[variant=form]:py-4
+	{className}
 	"
 	data-variant={props.variant}
 	use:melt={$trigger}

diff --git a/src/lib/components/select/token.svelte b/src/lib/components/select/token.svelte
@@ -17,6 +17,7 @@
 		required?: boolean;
 		multiple?: boolean;
 		sameWidth?: boolean;
+		class?: string;
 	}
 
 	let {
@@ -27,7 +28,8 @@
 		disabled = false,
 		required = false,
 		multiple = false,
-		sameWidth = true
+		sameWidth = true,
+		class: className = ''
 	}: Props = $props();
 
 	const variant = 'form';
@@ -101,7 +103,7 @@
 	}
 </script>
 
-<SelectTrigger {variant} {id} {open} {trigger}>
+<SelectTrigger {variant} {id} {open} {trigger} class={className}>
 	{#if selectedTokenImage}
 		<img src={selectedTokenImage} alt={$selectedLabel} class="mr-2 size-5 object-contain" />
 	{/if}

diff --git a/src/routes/[network]/(dev)/debug/components/sections/select.svelte b/src/routes/[network]/(dev)/debug/components/sections/select.svelte
@@ -7,6 +7,7 @@
 	import TokenSelect from '$lib/components/select/token.svelte';
 	import type { SelectOption } from '@melt-ui/svelte';
 	import Button from '$lib/components/button/button.svelte';
+	import Code from '$lib/components/code.svelte';
 
 	const options: SelectOption[] = [
 		{ value: 30, label: '30d' },
@@ -120,14 +121,17 @@
 		</Cluster>
 	</Stack>
 
-	<Stack class="items-start">
+	<Stack>
 		<h3 class="h3">Token Select</h3>
-		<Cluster class="items-end">
-			<Stack class="gap-2">
-				<Label for="token-select">Select a token</Label>
-				<TokenSelect id="token-select" options={tokenOptions} bind:selected={tokenSelected} />
-			</Stack>
-			<span>Value in parent: {JSON.stringify(tokenSelected.metadata.id)}</span>
-		</Cluster>
+		<Stack class="gap-2">
+			<Label for="token-select">Select a token</Label>
+			<TokenSelect
+				id="token-select"
+				class="self-start"
+				options={tokenOptions}
+				bind:selected={tokenSelected}
+			/>
+			<Code>Value in parent: {JSON.stringify(tokenSelected.metadata.id, null, 2)}</Code>
+		</Stack>
 	</Stack>
 </Stack>
diff --git a/src/routes/[network]/+layout.svelte b/src/routes/[network]/+layout.svelte
@@ -79,7 +79,7 @@
 	min-h-svh
 	w-svw
 	max-w-screen-xl
-	grid-cols-[16px_auto_auto_16px]
+	grid-cols-[16px_1fr_1fr_16px]
 	grid-rows-[0_min-content_auto_56px]
 	gap-y-4
 	bg-shark-950