app/controllers/alt_styles_controller.rb

@@ -27,9 +27,11 @@ class AltStylesController < ApplicationController
 				render
 			}
 			format.json {
-				@alt_styles = @alt_styles.includes(swf_assets: [:zone]).by_name_grouped
+				@alt_styles = @alt_styles.includes(swf_assets: [:zone]).
+					sort_by(&:full_name)
 				render json: @alt_styles.as_json(
-					only: [:id, :species_id, :color_id, :body_id, :thumbnail_url],
+					only: [:id, :species_id, :color_id, :body_id, :series_name,
+								 :adjective_name, :thumbnail_url],
 					include: {
 						swf_assets: {
 							only: [:id, :body_id],
@@ -37,7 +39,7 @@ class AltStylesController < ApplicationController
 							methods: [:urls, :known_glitches],
 						}
 					},
-					methods: [:series_main_name, :adjective_name],
+					methods: [:series_name, :adjective_name, :thumbnail_url],
 				)
 			}
 		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.seriesMainName : getLabel(pose);
+		const label = altStyle != null ? altStyle.seriesName : getLabel(pose);
 
 		return (
 			<ClassNames>
@@ -723,13 +723,6 @@ 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),
-		seriesMainName: altStyleData.series_main_name,
+		seriesName: altStyleData.series_name,
 		adjectiveName: altStyleData.adjective_name,
 		thumbnailUrl: altStyleData.thumbnail_url,
 

app/models/alt_style.rb

@@ -26,24 +26,6 @@ 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) }
 
@@ -76,14 +58,6 @@ 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
@@ -132,9 +106,9 @@ class AltStyle < ApplicationRecord
   end
 
   def self.all_series_names
-    distinct.where.not(series_name: nil).
+    # Sort by the part *after* the colon, then before (if any).
-      by_series_main_name.by_series_variant_name.
+    distinct.where.not(series_name: nil).pluck(:series_name).
-      pluck(:series_name)
+      sort_by { |series_name| series_name.split(': ', 2).reverse }
   end
 
   def self.all_supported_colors