From 242bf5de5e5807d2bdd639a855b6fed471ee865d Mon Sep 17 00:00:00 2001
From: Danny McGee <dannymcgee@gmail.com>
Date: Thu, 21 Mar 2024 21:48:27 -0400
Subject: [PATCH] Basic styling for material editor

---
 .../inspector/material-inspector.element.scss | 15 +++-
 .../inspector/material-inspector.element.ts   | 74 ++++++++++---------
 2 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/studio-web/src/lib/inspector/material-inspector.element.scss b/studio-web/src/lib/inspector/material-inspector.element.scss
index f0c516b..5e893b0 100644
--- a/studio-web/src/lib/inspector/material-inspector.element.scss
+++ b/studio-web/src/lib/inspector/material-inspector.element.scss
@@ -11,7 +11,15 @@
 
 h4 {
 	font-weight: 500;
-	margin: 0 0 0.25rem;
+	margin: 0 0 1rem;
+}
+
+.fields {
+	display: grid;
+	grid-template-columns: min-content 1fr;
+	align-items: baseline;
+	row-gap: 0.25rem;
+	column-gap: 0.5rem;
 }
 
 label {
@@ -19,3 +27,8 @@ label {
 	font-size: math.div(14, 16) * 1rem;
 	margin-block-end: 0.333rem;
 }
+
+sts-text-field::part(input) {
+	flex: unset;
+	width: 100%;
+}
diff --git a/studio-web/src/lib/inspector/material-inspector.element.ts b/studio-web/src/lib/inspector/material-inspector.element.ts
index 73a122d..bbef849 100644
--- a/studio-web/src/lib/inspector/material-inspector.element.ts
+++ b/studio-web/src/lib/inspector/material-inspector.element.ts
@@ -68,45 +68,47 @@ export class MaterialInspectorElement extends LitElement {
 		return html`
 			<h4>Material</h4>
 
-			<label for=${this.#baseColorId}>
-				Tint
-			</label>
-			<input
-				id=${this.#baseColorId}
-				type="color"
-				.value=${rgb}
-				@input=${this.onBaseColorInput}
-			/>
+			<div class="fields">
+				<label for=${this.#baseColorId}>
+					Tint
+				</label>
+				<input
+					id=${this.#baseColorId}
+					type="color"
+					.value=${rgb}
+					@input=${this.onBaseColorInput}
+				/>
 
-			<label for=${this.#roughnessId}>
-				Roughness
-			</label>
-			<sts-text-field
-				id=${this.#roughnessId}
-				type="number"
-				.value=${this.roughness.toString(10)}
-				@value-change=${this.updateField("perceptual_roughness")}
-			></sts-text-field>
+				<label for=${this.#roughnessId}>
+					Roughness
+				</label>
+				<sts-text-field
+					id=${this.#roughnessId}
+					type="number"
+					.value=${this.roughness.toString(10)}
+					@value-change=${this.updateField("perceptual_roughness")}
+				></sts-text-field>
 
-			<label for=${this.#metallicId}>
-				Metallic
-			</label>
-			<sts-text-field
-				id=${this.#metallicId}
-				type="number"
-				.value=${this.metallic.toString(10)}
-				@value-change=${this.updateField("metallic")}
-			></sts-text-field>
+				<label for=${this.#metallicId}>
+					Metallic
+				</label>
+				<sts-text-field
+					id=${this.#metallicId}
+					type="number"
+					.value=${this.metallic.toString(10)}
+					@value-change=${this.updateField("metallic")}
+				></sts-text-field>
 
-			<label for=${this.#reflectanceId}>
-				Reflectance
-			</label>
-			<sts-text-field
-				id=${this.#reflectanceId}
-				type="number"
-				.value=${this.reflectance.toString(10)}
-				@value-change=${this.updateField("reflectance")}
-			></sts-text-field>
+				<label for=${this.#reflectanceId}>
+					Reflectance
+				</label>
+				<sts-text-field
+					id=${this.#reflectanceId}
+					type="number"
+					.value=${this.reflectance.toString(10)}
+					@value-change=${this.updateField("reflectance")}
+				></sts-text-field>
+			</div>
 		`;
 	}
 }