Add the quantity input to the item details tab (closes #154)

styles/v3/elements/label.scss

@@ -2,4 +2,8 @@
 
 .dotdungeon.style-v3 > .window-content label {
 	cursor: pointer;
+
+	&.justify-start {
+		justify-self: start;
+	}
 }

styles/v3/elements/number-input.scss

@@ -7,9 +7,8 @@
 	padding: 4px 8px;
 	color: white;
 	transition: all 200ms ease-in-out;
-	width: 50px;
-	height: auto;
 	text-align: center;
+	line-height: 1rem;
 
 	&:hover {
 		@include material.elevate(4);

styles/v3/elements/panel.scss

@@ -12,6 +12,10 @@
 			flex-direction: row;
 			gap: var(--gap);
 			align-items: center;
+
+			&.space-between {
+				justify-content: space-between;
+			}
 		}
 	}
 }

styles/v3/elements/select.scss

@@ -8,6 +8,7 @@
 		padding: 4px 8px;
 		color: white;
 		transition: all 200ms ease-in-out;
+		width: 6.25rem;
 
 		&:hover {
 			@include material.elevate(4);

styles/v3/index.scss

@@ -14,6 +14,7 @@
 @use "./elements/icons.scss";
 @use "./elements/nav.scss";
 @use "./elements/panel.scss";
+@use "./elements/label.scss";
 
 /* Sheet Layouts */
 @use "./layouts/datasheet.scss";

styles/v3/layouts/items/untyped/v2.scss

@@ -48,6 +48,12 @@
 
 	@include utils.tab("details") {
 		@extend %flex-col;
+
+		.number {
+			display: grid;
+			grid-template-columns: 1fr 55px;
+			align-items: center;
+		}
 	}
 
 	@include utils.tab("settings") {

templates/items/untyped/v2/tabs/details.v2.untyped.hbs

@@ -1,10 +1,12 @@
 <div class="tab" data-group="page" data-tab="details">
-	<div class="cost panel--row">
+	<div class="number panel">
 		{{#if meta.isEditable}}
-			<label for="{{meta.idp}}-purchase-cost">
+			<label
+				for="{{meta.idp}}-purchase-cost"
+				class="justify-start"
+			>
 				Purchase Cost
 			</label>
-			<div class="grow"></div>
 			<input
 				type="number"
 				name="system.buy"
@@ -14,16 +16,17 @@
 			>
 		{{else}}
 			Purchase Cost
-			<div class="grow"></div>
 			{{dd-empty-state system.buy}}
 		{{/if}}
 	</div>
-	<div class="usage-cost panel--row">
+	<div class="number panel">
 		{{#if meta.isEditable}}
-			<label for="{{meta.idp}}-usage-cost">
+			<label
+				for="{{meta.idp}}-usage-cost"
+				class="justify-start"
+			>
 				Usage Cost
 			</label>
-			<div class="grow"></div>
 			<input
 				type="number"
 				name="system.usage_cost"
@@ -33,13 +36,11 @@
 			>
 		{{else}}
 			Usage Cost
-			<div class="grow"></div>
 			{{dd-empty-state system.usage_cost}}
 		{{/if}}
 	</div>
-	<div class="tier panel--row">
+	<div class="detail panel--row space-between">
 		Rarity
-		<div class="grow"></div>
 		{{#if meta.isEditable}}
 			<select
 				class="text-center"
@@ -53,9 +54,8 @@
 		{{/if}}
 	</div>
 	{{#if meta.isEmbedded}}
-		<div class="location panel--row">
+		<div class="detail panel--row space-between">
 			Item Location
-			<div class="grow"></div>
 			{{#if meta.isEditable}}
 				<select
 					class="text-center"
@@ -68,8 +68,22 @@
 				{{dd-i18n (concat "dotdungeon.location." system.location)}}
 			{{/if}}
 		</div>
-		<div class="quantity panel">
+		<div class="number panel">
+			{{#if meta.isEditable}}
+				<label for="{{meta.idp}}-quantity">
 					Quantity
+				</label>
+				<input
+					type="number"
+					min="0"
+					name="system.quantity"
+					value="{{system.quantity}}"
+					id="{{meta.idp}}-quantity"
+				>
+			{{else}}
+				Quantity
+				{{system.quantity}}
+			{{/if}}
 		</div>
 	{{/if}}
 </div>