Refactor support-form CSS to be more reusable layout

Specifically, I'm going for a more-vertical layout, cuz I want to bring
PetState over to it, and the weird grid situation wasn't gonna fit the
big pose label radios.

app/assets/stylesheets/application/support-form.sass

@@ -4,27 +4,29 @@
 	gap: 1em
 	align-items: flex-start
 
-	fieldset
+	.fields
+		list-style-type: none
+		display: flex
+		flex-direction: column
+		gap: .75em
 		width: 100%
-		display: grid
-		grid-template-columns: auto 1fr
-		align-items: center
-		gap: 1em
 
-		> *:nth-child(2n)
+		li
-			width: 40rch
+			display: flex
-			max-width: 100%
+			flex-direction: column
-			box-sizing: border-box
+			gap: .25em
+			max-width: 60ch
 
-		input[type=url]
+			> label
-			font-size: .85em
+				display: block
+				font-weight: bold
 
-		> label, .field-name
+	input[type=text], input[type=url]
-			font-weight: bold
+		width: 100%
-			&:has(+ .radio-field)
+		min-width: 10ch
-				align-self: start
+		box-sizing: border-box
 
-	.thumbnail-field
+	.thumbnail-input
 		display: flex
 		align-items: center
 		gap: .25em
@@ -33,14 +35,14 @@
 			width: 40px
 			height: 40px
 
-		input
+	fieldset[data-type=radio]
-			flex: 1 0 20ch
-
-	.radio-field
 		display: flex
 		flex-direction: column
 		gap: .25em
 
+		legend
+			font-weight: bold
+
 	.field_with_errors
 		display: contents
 

app/models/alt_style.rb

@@ -37,7 +37,7 @@ class AltStyle < ApplicationRecord
   # `fits:<New?>-faerie-draik` intentionally will not work, and the canonical
   # filter name will be `fits:alt-style-IDNUMBER`, instead.
   def series_name
-    real_series_name || "<New?>"
+    real_series_name || AltStyle.placeholder_name
   end
 
   def real_series_name=(new_series_name)
@@ -97,6 +97,10 @@ class AltStyle < ApplicationRecord
     thumbnail_url != DEFAULT_THUMBNAIL_URL
   end
 
+  def self.placeholder_name
+    "<New?>"
+  end
+
   # For convenience in the console!
   def self.find_by_name(color_name, species_name)
     color = Color.find_by_name(color_name)

app/views/alt_styles/edit.html.haml

@@ -20,14 +20,17 @@
 			%ul.errors
 				- @alt_style.errors.each do |error|
 					%li= error.full_message
-	%fieldset
+	%ul.fields
-		= f.label :real_series_name, "Series"
+		%li
-		= f.text_field :real_series_name, autofocus: !@alt_style.real_series_name?
+			= f.label :real_series_name, "Series"
-		= f.label :thumbnail_url, "Thumbnail"
+			= f.text_field :real_series_name, autofocus: !@alt_style.real_series_name?,
-		.thumbnail-field
+				placeholder: AltStyle.placeholder_name
-			- if @alt_style.thumbnail_url?
+		%li
-				= image_tag @alt_style.thumbnail_url
+			= f.label :thumbnail_url, "Thumbnail"
-			= f.url_field :thumbnail_url
+			.thumbnail-input
+				- if @alt_style.thumbnail_url?
+					= image_tag @alt_style.thumbnail_url
+				= f.url_field :thumbnail_url
 	.actions
 		= f.submit "Save changes"
 		%label{title: "If checked, takes you to the next unlabeled pet style, if any. Useful for labeling in bulk!"}

app/views/items/edit.html.haml

@@ -15,43 +15,49 @@
 			%ul.errors
 				- @item.errors.each do |error|
 					%li= error.full_message
-	%fieldset
+	%ul.fields
-		= f.label :name
+		%li
-		= f.text_field :name
+			= f.label :name
-		= f.label :thumbnail_url, "Thumbnail"
+			= f.text_field :name
-		.thumbnail-field
+		%li
-			- if @item.thumbnail_url?
+			= f.label :thumbnail_url, "Thumbnail"
-				= image_tag @item.thumbnail_url
+			.thumbnail-input
-			= f.url_field :thumbnail_url
+				- if @item.thumbnail_url?
-		= f.label :description
+					= image_tag @item.thumbnail_url
-		= f.text_field :description
+				= f.url_field :thumbnail_url
-		.field-name Item kind
+		%li
-		.radio-field
+			= f.label :description
-			%label{title: "NC items generally have a rarity value of 500.\nPaintbrush items generally contain a special message in the description."}
+			= f.text_field :description
-				= f.radio_button :is_manually_nc, false
+		%li
-				Automatic: Based on rarity and description
+			%fieldset{"data-type": "radio"}
-			%label{title: "Use this when Neopets releases an NC item, but labels the rarity as something other than 500, usually by mistake."}
+				%legend Item kind
-				= f.radio_button :is_manually_nc, true
+				%label{title: "NC items generally have a rarity value of 500.\nPaintbrush items generally contain a special message in the description."}
-				Manually NC: From the NC Mall, but not r500
+					= f.radio_button :is_manually_nc, false
-		.field-name Modeling status
+					Automatic: Based on rarity and description
-		.radio-field
+				%label{title: "Use this when Neopets releases an NC item, but labels the rarity as something other than 500, usually by mistake."}
-			%label{title: "If we fit two or more species of a standard color, assume we also fit the other standard-color pets that were released at the time.\nRepeat for special colors like Baby and Maraquan."}
+					= f.radio_button :is_manually_nc, true
-				= f.radio_button :modeling_status_hint, ""
+					Manually NC: From the NC Mall, but not r500
-				Automatic: Fits 2+ species → Should fit all
+		%li
-			%label{title: "Use this when e.g. there simply is no Acara version of the item."}
+			%fieldset{"data-type": "radio"}
-				= f.radio_button :modeling_status_hint, "done"
+				%legend Modeling status
-				Done: Neopets.com is missing some models
+				%label{title: "If we fit two or more species of a standard color, assume we also fit the other standard-color pets that were released at the time.\nRepeat for special colors like Baby and Maraquan."}
-			%label{title: "Use this when e.g. this fits the Blue Vandagyre even though it's a Maraquan item.\nBehaves identically to Done, but helps us remember why we did this!"}
+					= f.radio_button :modeling_status_hint, ""
-				= f.radio_button :modeling_status_hint, "glitchy"
+					Automatic: Fits 2+ species → Should fit all
-				Glitchy: Neopets.com has <em>too many</em> models
+				%label{title: "Use this when e.g. there simply is no Acara version of the item."}
-		.field-name Body fit
+					= f.radio_button :modeling_status_hint, "done"
-		.radio-field
+					Done: Neopets.com is missing some models
-			%label{title: "When an asset in a zone like Background is modeled, assume it fits all pets the same, and assign it body ID \#0.\nOtherwise, assume it fits only the kind of pet it was modeled on."}
+				%label{title: "Use this when e.g. this fits the Blue Vandagyre even though it's a Maraquan item.\nBehaves identically to Done, but helps us remember why we did this!"}
-				= f.radio_button :explicitly_body_specific, false
+					= f.radio_button :modeling_status_hint, "glitchy"
-				Automatic: Some zones fit all species
+					Glitchy: Neopets.com has <em>too many</em> models
-			%label{title: "Use this when an item uses a generally-universal zone like Static, but is body-specific regardless. \"Encased in Ice\" is one example.\nThis prevents these uncommon items from breaking every time they're modeled."}
+		%li
-				= f.radio_button :explicitly_body_specific, true
+			%fieldset{"data-type": "radio"}
-				Body-specific: Fits all species differently
+				%legend Body fit
+				%label{title: "When an asset in a zone like Background is modeled, assume it fits all pets the same, and assign it body ID \#0.\nOtherwise, assume it fits only the kind of pet it was modeled on."}
+					= f.radio_button :explicitly_body_specific, false
+					Automatic: Some zones fit all species
+				%label{title: "Use this when an item uses a generally-universal zone like Static, but is body-specific regardless. \"Encased in Ice\" is one example.\nThis prevents these uncommon items from breaking every time they're modeled."}
+					= f.radio_button :explicitly_body_specific, true
+					Body-specific: Fits all species differently
 	.actions
 		= f.submit "Save changes"