From 758ee4dae4bca955fcd1f32559dcd9400f94af32 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 30 Dec 2022 05:48:26 -0800
Subject: [PATCH] Fix tablet sizing for JobSection

---
 components/CharacterGrid/index.scss | 4 ++++
 components/JobSection/index.scss    | 8 +++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/CharacterGrid/index.scss b/components/CharacterGrid/index.scss
index e1f3ca07..97fc45ad 100644
--- a/components/CharacterGrid/index.scss
+++ b/components/CharacterGrid/index.scss
@@ -4,6 +4,10 @@
   justify-content: center;
   margin: auto;
   max-width: 761px;
+
+  @include breakpoint(tablet) {
+    align-items: center;
+  }
 }
 
 #grid_characters {
diff --git a/components/JobSection/index.scss b/components/JobSection/index.scss
index 01a926ea..6ef18d49 100644
--- a/components/JobSection/index.scss
+++ b/components/JobSection/index.scss
@@ -1,12 +1,14 @@
 #Job {
-  align-items: center;
   box-sizing: border-box;
   display: flex;
   margin-bottom: $unit * 3;
 
   @include breakpoint(tablet) {
+    align-items: center;
     flex-direction: column;
     gap: $unit;
+    justify-content: center;
+    max-width: 447px;
   }
 
   select {
@@ -58,6 +60,10 @@
     width: $width;
     transition: box-shadow 0.15s ease-in-out;
 
+    @include breakpoint(tablet) {
+      margin-right: 0;
+    }
+
     @include breakpoint(phone) {
       aspect-ratio: 16/9;
       margin: 0;