From 0e08ec89c36e7d2e3e96fa3d579fe12199f56f31 Mon Sep 17 00:00:00 2001
From: Mothblocks <35135081+Mothblocks@users.noreply.github.com>
Date: Thu, 30 Sep 2021 17:54:21 -0700
Subject: [PATCH] Fix the species list not scrolling, fix halloween species
 runtimes (#61764)

---
 code/modules/mob/mob.dm                       |  9 ++++
 .../PreferencesMenu/SpeciesPage.tsx           | 46 +++++++++----------
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/code/modules/mob/mob.dm b/code/modules/mob/mob.dm
index ee046a33062..2fa09a584a4 100644
--- a/code/modules/mob/mob.dm
+++ b/code/modules/mob/mob.dm
@@ -910,6 +910,15 @@
 
 ///Add a spell to the mobs spell list
 /mob/proc/AddSpell(obj/effect/proc_holder/spell/S)
+	// HACK: Preferences menu creates one of every selectable species.
+	// Some species, like vampires, create spells when they're made.
+	// The "action" is created when those spells Initialize.
+	// Preferences menu can create these assets at *any* time, primarily before
+	// the atoms SS initializes.
+	// That means "action" won't exist.
+	if (isnull(S.action))
+		return
+
 	LAZYADD(mob_spell_list, S)
 	S.action.Grant(src)
 
diff --git a/tgui/packages/tgui/interfaces/PreferencesMenu/SpeciesPage.tsx b/tgui/packages/tgui/interfaces/PreferencesMenu/SpeciesPage.tsx
index 27c98ba946b..b3b6cbe1e65 100644
--- a/tgui/packages/tgui/interfaces/PreferencesMenu/SpeciesPage.tsx
+++ b/tgui/packages/tgui/interfaces/PreferencesMenu/SpeciesPage.tsx
@@ -259,33 +259,33 @@ const SpeciesPageInner = (props: {
       <Stack.Item grow>
         <Stack fill>
           <Stack.Item>
-            <Stack vertical fill>
+            <Box height="calc(100vh - 170px)" overflowY="auto" pr={3}>
               {species.map(([speciesKey, species]) => {
                 return (
-                  <Stack.Item key={speciesKey}>
-                    <Button
-                      onClick={() => setSpecies(speciesKey)}
-                      selected={
-                        data.character_preferences.misc.species === speciesKey
-                      }
-                      tooltip={species.name}
-                      style={{
-                        height: "64px",
-                        width: "64px",
-                      }}
-                    >
-                      <Box
-                        className={classes([
-                          "species64x64",
-                          species.icon,
-                        ])}
-                        ml={-1}
-                      />
-                    </Button>
-                  </Stack.Item>
+                  <Button
+                    key={speciesKey}
+                    onClick={() => setSpecies(speciesKey)}
+                    selected={
+                      data.character_preferences.misc.species === speciesKey
+                    }
+                    tooltip={species.name}
+                    style={{
+                      display: "block",
+                      height: "64px",
+                      width: "64px",
+                    }}
+                  >
+                    <Box
+                      className={classes([
+                        "species64x64",
+                        species.icon,
+                      ])}
+                      ml={-1}
+                    />
+                  </Button>
                 );
               })}
-            </Stack>
+            </Box>
           </Stack.Item>
 
           <Stack.Item grow>