Improved display of export options

Using the same layout as the global options.
felixgirault · Apr 20, 2024 · 34cbeaf · 34cbeaf
1 parent 4e0f3b5
commit 34cbeaf
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 19 deletions.
diff --git a/src/global.css b/src/global.css
@@ -352,6 +352,9 @@ input[type='range'] {
 .data-options {
 	position: sticky;
 	top: 1rem;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(28ch, 1fr));
+	gap: 1rem;
 	min-width: 20ch;
 }
 

diff --git a/src/lib/components/combinations/Combinations.svelte b/src/lib/components/combinations/Combinations.svelte
@@ -64,9 +64,6 @@
 
 <style>
 	.data-options {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(28ch, 1fr));
-		gap: 1rem;
 		animation: slide-up 250ms ease-out;
 		contain: layout;
 	}

diff --git a/src/lib/components/export/Export.svelte b/src/lib/components/export/Export.svelte
@@ -183,25 +183,29 @@
 						</div>
 					</fieldset>
 
-					<label for="prefix">Variables prefix</label>
-					<input
-						id="prefix"
-						name="prefix"
-						type="text"
-						bind:value={$exportPrefix}
-					/>
+					<div>
+						<label for="prefix">Variables prefix</label>
+						<input
+							id="prefix"
+							name="prefix"
+							type="text"
+							bind:value={$exportPrefix}
+						/>
+					</div>
 				{/if}
 
 				{#if $exportFormat !== 'tokens' && $exportColorFormat !== 'hex' && $exportColorFormat !== 'rgb'}
-					<label for="precision">Precision</label>
-					<input
-						id="precision"
-						name="precision"
-						type="number"
-						min={0}
-						max={5}
-						bind:value={$exportPrecision}
-					/>
+					<div>
+						<label for="precision">Precision</label>
+						<input
+							id="precision"
+							name="precision"
+							type="number"
+							min={0}
+							max={5}
+							bind:value={$exportPrecision}
+						/>
+					</div>
 				{/if}
 			</div>
 		</div>