Tweak the design so that Drops and a Description can be fit into the sheet

module/sheets/MobSheet.mjs

@@ -7,8 +7,8 @@ export class MobSheet extends GenericActorSheet {
 			super.defaultOptions,
 			{
 				template: `systems/dotdungeon/templates/actors/mobs/main.hbs`,
-				width: 300,
+				width: 750,
-				height: 360,
+				height: 390,
 			}
 		);
 		opts.classes.push(`dotdungeon`);
@@ -34,6 +34,8 @@ export class MobSheet extends GenericActorSheet {
 
 		ctx.computed = {};
 
+		// Compute rolls here
+
 		console.log(actor.uuid, `context:`, ctx)
 		return ctx;
 	};

styles/sheets/actor/mob/mob.scss

@@ -3,21 +3,20 @@
 
 .dotdungeon .actor--mob {
 	--gap: 8px;
-	--avatar-size: 80px;
+	--avatar-size: 100px;
 	--row-height: calc((var(--avatar-size) - var(--gap)) / 2);
 	padding: var(--gap);
 	display: grid;
-	grid-template-columns: var(--avatar-size) 1fr 1fr;
+	grid-template-columns: var(--avatar-size) repeat(4, minmax(0, 1fr));
-	grid-template-rows: repeat(6, var(--row-height)) minmax(var(--row-height), 1fr);
+	grid-template-rows: repeat(5, var(--row-height)) minmax(var(--row-height), 1fr);
 	gap: var(--gap);
 	grid-template-areas:
-		"avatar . ."
+		"avatar . . . ."
-		"avatar . ."
+		"avatar . . . ."
-		"dice . ."
+		"dice . . . ."
-		"dice . ."
+		"dice description description stunts stunts"
-		"dice . ."
+		"dice description description stunts stunts"
-		"dice stunts stunts"
+		"dice description description stunts stunts";
-		"dice stunts stunts";
 
 	label, .dice {
 		border: 2px solid black;
@@ -49,6 +48,8 @@
 			text-align: right;
 			border: none;
 			background: none;
+			border-radius: 0;
+			border-bottom: 1px solid black;
 			&:focus, &:focus-visible {
 				box-shadow: none;
 			}
@@ -63,6 +64,24 @@
 		grid-column: span 2;
 	}
 
+	.mask-textarea {
+		display: flex;
+		flex-direction: column;
+		transition: all ease-in-out 50ms;
+
+		&:focus-within {
+			transform: scale(102%);
+		}
+
+		textarea {
+			flex-grow: 1;
+			resize: none;
+			border: none;
+			box-shadow: none;
+			background: none;
+		}
+	}
+
 
 // Area-specific stylings
 
@@ -95,21 +114,9 @@
 
 	.stunts {
 		grid-area: stunts;
-		display: flex;
+	}
-		flex-direction: column;
+	.description {
-		transition: all ease-in-out 50ms;
+		grid-area: description;
-
-		&:focus-within {
-			transform: scale(102%);
-		}
-
-		textarea {
-			flex-grow: 1;
-			resize: none;
-			border: none;
-			box-shadow: none;
-			background: none;
-		}
 	}
 
 	.avatar {

templates/actors/mobs/main.hbs

@@ -22,20 +22,15 @@
 			value="{{system.bytes}}"
 		>
 	</label>
-	<div class="dice">
+	<label class="immune wide mask-input">
-		Dice:
+		Drops:
-		<button data-roll-formula="2d20" class="roll die reduced-padding neutral">
+		<input
-			2d20x5
+			type="text"
-		</button>
+			class="left"
-		<button data-roll-formula="1d4" class="roll die reduced-padding neutral">
+			name="system.immune"
-			1d4
+			value="{{system.immune}}"
-		</button>
+		>
-		<button data-roll-formula="3d6" class="roll die reduced-padding neutral">
+	</label>
-			3d6
-		</button>
-		<div style="flex-grow: 1"></div>
-		<button class="confirm">Edit</button>
-	</div>
 	<label class="bonus mask-input">
 		Bonus:
 		<input
@@ -52,15 +47,6 @@
 			value="{{system.morale}}"
 		>
 	</label>
-	<label class="immune wide mask-input">
-		Immune:
-		<input
-			type="text"
-			class="left"
-			name="system.immune"
-			value="{{system.immune}}"
-		>
-	</label>
 	<label class="weak wide mask-input">
 		Weak:
 		<input
@@ -70,7 +56,36 @@
 			value="{{system.weak}}"
 		>
 	</label>
-	<label class="stunts">
+	<label class="immune wide mask-input">
+		Immune:
+		<input
+			type="text"
+			class="left"
+			name="system.immune"
+			value="{{system.immune}}"
+		>
+	</label>
+	<div class="dice">
+		Dice:
+		<button data-roll-formula="2d20" class="roll die reduced-padding neutral">
+			2d20x5
+		</button>
+		<button data-roll-formula="1d4" class="roll die reduced-padding neutral">
+			1d4
+		</button>
+		<button data-roll-formula="3d6" class="roll die reduced-padding neutral">
+			3d6
+		</button>
+		<div style="flex-grow: 1"></div>
+		<button class="confirm">Edit</button>
+	</div>
+	<label class="description mask-textarea">
+		Description:
+		<textarea
+			name="system.description"
+		>{{system.description}}</textarea>
+	</label>
+	<label class="stunts mask-textarea">
 		Stunts:
 		<textarea
 			name="system.stunts"