From b6f5e9a64c9d937ec9368a7de84eec39b2bacc1a Mon Sep 17 00:00:00 2001
From: ryanmaietta <ryanamaietta@gmail.com>
Date: Wed, 21 May 2025 13:18:15 -0700
Subject: [PATCH 1/2] Adjust responsive behavior of SortBar component

---
 src/components/PokemonList/PokemonSortBar.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/PokemonList/PokemonSortBar.tsx b/src/components/PokemonList/PokemonSortBar.tsx
index ca8a09a4..e7e21c17 100644
--- a/src/components/PokemonList/PokemonSortBar.tsx
+++ b/src/components/PokemonList/PokemonSortBar.tsx
@@ -41,9 +41,9 @@ export const SortBar: React.FC<SortBarProps> = ({
   const setSortDirection = useFilterStore((state) => state.setSortDirection);
 
   return (
-    <div className="border-b-1 flex w-full items-center justify-between border-neutral-600/50 bg-zinc-900">
+    <div className="border-b-1 flex w-full items-center justify-between border-neutral-600/50 bg-zinc-900 px-3">
       {/* Sort buttons group */}
-      <div className="ml-3 flex h-11 flex-1 text-nowrap">
+      <div className="flex h-11 flex-1 text-nowrap overflow-x-auto">
         {sortOptions.map((option) => {
           const value = option.statType
             ? `${option.value}:${option.statType}`
@@ -74,7 +74,7 @@ export const SortBar: React.FC<SortBarProps> = ({
       </div>
       {/* Direction marker */}
       <div
-        className="cursor-pointer select-none pr-3"
+        className="cursor-pointer select-none p-1 sm:background-zinc-700"
         onClick={() => {
           if (toggleSortDirection) {
             toggleSortDirection();

From 2522b122e82353a6a8c2384a2ad29c7af2ab8e1f Mon Sep 17 00:00:00 2001
From: ryanmaietta <ryanamaietta@gmail.com>
Date: Wed, 21 May 2025 13:25:10 -0700
Subject: [PATCH 2/2] Fixed wrong bg class for direction marker BG

---
 src/components/PokemonList/PokemonSortBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PokemonList/PokemonSortBar.tsx b/src/components/PokemonList/PokemonSortBar.tsx
index e7e21c17..51810f08 100644
--- a/src/components/PokemonList/PokemonSortBar.tsx
+++ b/src/components/PokemonList/PokemonSortBar.tsx
@@ -74,7 +74,7 @@ export const SortBar: React.FC<SortBarProps> = ({
       </div>
       {/* Direction marker */}
       <div
-        className="cursor-pointer select-none p-1 sm:background-zinc-700"
+        className="cursor-pointer select-none p-1 max-sm:bg-zinc-700"
         onClick={() => {
           if (toggleSortDirection) {
             toggleSortDirection();