Fix outfit editor bug where opening style picker increases page height

Now that some of these series names are very long (like "Prismatic
Cocoa: Festive"), they can throw off the layout. Let's just use the
shorter one, it's clear enough!

app/controllers/alt_styles_controller.rb

@@ -27,11 +27,9 @@ class AltStylesController < ApplicationController
 				render
 			}
 			format.json {
-				@alt_styles = @alt_styles.includes(swf_assets: [:zone]).
-					sort_by(&:full_name)
+				@alt_styles = @alt_styles.includes(swf_assets: [:zone]).by_name_grouped
 				render json: @alt_styles.as_json(
-					only: [:id, :species_id, :color_id, :body_id, :series_name,
-								 :adjective_name, :thumbnail_url],
+					only: [:id, :species_id, :color_id, :body_id, :thumbnail_url],
 					include: {
 						swf_assets: {
 							only: [:id, :body_id],
@@ -39,7 +37,7 @@ class AltStylesController < ApplicationController
 							methods: [:urls, :known_glitches],
 						}
 					},
-					methods: [:series_name, :adjective_name, :thumbnail_url],
+					methods: [:series_main_name, :adjective_name],
 				)
 			}
 		end

app/javascript/wardrobe-2020/WardrobePage/PosePicker.js

@@ -283,7 +283,7 @@ const PosePickerButton = React.forwardRef(
 		const theme = useTheme();
 
 		const icon = altStyle != null ? twemojiSunglasses : getIcon(pose);
-		const label = altStyle != null ? altStyle.seriesName : getLabel(pose);
+		const label = altStyle != null ? altStyle.seriesMainName : getLabel(pose);
 
 		return (
 			<ClassNames>
@@ -723,6 +723,13 @@ function StyleOption({ altStyle, checked, onChange, inputRef }) {
 						checked={checked}
 						onChange={(e) => onChange(altStyle.id)}
 						ref={inputRef}
+						// HACK: Without this, the page extends super long. I think this is
+						//       because the VisuallyHidden just uses `position: absolute`,
+						//       which makes it float invisibly *beyond* the scrolling
+						//       container it's in, extending the page? But if we put it at
+						//       the top-left corner instead, it doesn't.
+						left="0"
+						top="0"
 					/>
 					<Flex
 						alignItems="center"

app/javascript/wardrobe-2020/loaders/alt-styles.js

@@ -49,7 +49,7 @@ function normalizeAltStyle(altStyleData) {
 		speciesId: String(altStyleData.species_id),
 		colorId: String(altStyleData.color_id),
 		bodyId: String(altStyleData.body_id),
-		seriesName: altStyleData.series_name,
+		seriesMainName: altStyleData.series_main_name,
 		adjectiveName: altStyleData.adjective_name,
 		thumbnailUrl: altStyleData.thumbnail_url,
 

app/models/alt_style.rb

@@ -26,6 +26,24 @@ class AltStyle < ApplicationRecord
     #       created around midnight.
     order(Arel.sql("DATE(CONVERT_TZ(created_at, '+00:00', '-08:00')) DESC"))
   }
+  scope :by_series_main_name, -> {
+    # The main part of the series name, like "Nostalgic".
+    order(Arel.sql("SUBSTRING_INDEX(series_name, ': ', -1)"))
+  }
+  scope :by_series_variant_name, -> {
+    # The variant part of the series name, like "Prismatic Cyan".
+    order(Arel.sql("SUBSTRING_INDEX(series_name, ': ', 1)"))
+  }
+  scope :by_color_name, -> {
+    joins(:color).order(Color.arel_table[:name])
+  }
+  scope :by_name_grouped, -> {
+    # Sort by the color name, then the main part of the series name, then the
+    # variant part of the series name. This way, all the, say, Christmas colors
+    # and their Prismatic variants will be together, including both Festive and
+    # Nostalgic cases.
+    by_color_name.by_series_main_name.by_series_variant_name
+  }
   scope :unlabeled, -> { where(series_name: nil) }
   scope :newest, -> { order(created_at: :desc) }
 
@@ -58,6 +76,14 @@ class AltStyle < ApplicationRecord
     real_series_name.present?
   end
 
+  def series_main_name
+    series_name.split(': ').last
+  end
+
+  def series_variant_name
+    series_name.split(': ').first
+  end
+
   def adjective_name
     "#{series_name} #{color.human_name}"
   end
@@ -106,9 +132,9 @@ class AltStyle < ApplicationRecord
   end
 
   def self.all_series_names
-    # Sort by the part *after* the colon, then before (if any).
-    distinct.where.not(series_name: nil).pluck(:series_name).
-      sort_by { |series_name| series_name.split(': ', 2).reverse }
+    distinct.where.not(series_name: nil).
+      by_series_main_name.by_series_variant_name.
+      pluck(:series_name)
   end
 
   def self.all_supported_colors