From 4fb5f2c4df209245c90e02d149715fdfd881cb74 Mon Sep 17 00:00:00 2001
From: mkbeefcake <mkblockchaindev@outlook.com>
Date: Wed, 14 Dec 2022 20:28:02 -0500
Subject: [PATCH 1/2] fixed subcategory layout

---
 packages/ui/src/app/pages/Forum/ForumCategory.tsx  | 14 +++++++++-----
 .../forum/components/CategoryCard/CategoryCard.tsx |  1 +
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/app/pages/Forum/ForumCategory.tsx b/packages/ui/src/app/pages/Forum/ForumCategory.tsx
index 96cb1cc650..f49054de61 100644
--- a/packages/ui/src/app/pages/Forum/ForumCategory.tsx
+++ b/packages/ui/src/app/pages/Forum/ForumCategory.tsx
@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import { ForumThreadOrderByInput } from '@/common/api/queries'
 import { TransactionButton } from '@/common/components/buttons/TransactionButton'
 import { EmptyPagePlaceholder } from '@/common/components/EmptyPagePlaceholder/EmptyPagePlaceholder'
+import { HorizontalScroller } from '@/common/components/HorizontalScroller/HorizontalScroller'
 import { PlusIcon } from '@/common/components/icons/PlusIcon'
 import { ItemCount } from '@/common/components/ItemCount'
 import { Loading } from '@/common/components/Loading'
@@ -17,6 +18,7 @@ import { useRefetchQueries } from '@/common/hooks/useRefetchQueries'
 import { useSort } from '@/common/hooks/useSort'
 import { MILLISECONDS_PER_BLOCK } from '@/common/model/formatters'
 import { ForumCategoryList } from '@/forum/components/category/ForumCategoryList'
+import { CategoryCard } from '@/forum/components/CategoryCard/CategoryCard'
 import { ForumPageHeader } from '@/forum/components/ForumPageHeader'
 import { ThreadFilters } from '@/forum/components/threads/ThreadFilters'
 import { ThreadList } from '@/forum/components/threads/ThreadList'
@@ -99,13 +101,15 @@ export const ForumCategory = () => {
         <>
           {!!category.subcategories.length && (
             <RowGapBlock gap={24}>
-              <ItemCount count={category.subcategories.length}>
-                {isArchive ? 'Archived categories' : 'Categories'}
-              </ItemCount>
-              <ForumCategoryList categories={category.subcategories} isArchive={isArchive} />
+              <HorizontalScroller
+                title={isArchive ? 'Archived categories' : 'Categories'}
+                items={category.subcategories.map((category) => (
+                  <CategoryCard key={category.id} category={category} />
+                ))}
+                count={category.subcategories.length}
+              />
             </RowGapBlock>
           )}
-
           <RowGapBlock gap={24}>
             <ThreadFilters onApply={(filters) => refresh({ filters })} isArchive={isArchive}>
               <ItemCount count={threadCount} size="xs">
diff --git a/packages/ui/src/forum/components/CategoryCard/CategoryCard.tsx b/packages/ui/src/forum/components/CategoryCard/CategoryCard.tsx
index aff8c1e5f3..6d85aa68f9 100644
--- a/packages/ui/src/forum/components/CategoryCard/CategoryCard.tsx
+++ b/packages/ui/src/forum/components/CategoryCard/CategoryCard.tsx
@@ -62,6 +62,7 @@ const StyledBadge = styled(Link)`
 
 const Box = styled(Link)<{ archivedStyles?: boolean; ignoreHover?: boolean }>`
   display: flex;
+  flex: 50%;
   column-gap: 15px;
   border: 1px solid ${Colors.Black[100]};
   border-radius: ${BorderRad.s};

From 741eb0923b4feb9c8e84cbacf37066bcd5eea947 Mon Sep 17 00:00:00 2001
From: mkbeefcake <mkblockchaindev@outlook.com>
Date: Wed, 14 Dec 2022 21:29:15 -0500
Subject: [PATCH 2/2] 2 items in scroll

---
 packages/ui/src/forum/components/CategoryCard/CategoryCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/forum/components/CategoryCard/CategoryCard.tsx b/packages/ui/src/forum/components/CategoryCard/CategoryCard.tsx
index 6d85aa68f9..b1c3b54528 100644
--- a/packages/ui/src/forum/components/CategoryCard/CategoryCard.tsx
+++ b/packages/ui/src/forum/components/CategoryCard/CategoryCard.tsx
@@ -62,7 +62,7 @@ const StyledBadge = styled(Link)`
 
 const Box = styled(Link)<{ archivedStyles?: boolean; ignoreHover?: boolean }>`
   display: flex;
-  flex: 50%;
+  flex: 1 0 48%;
   column-gap: 15px;
   border: 1px solid ${Colors.Black[100]};
   border-radius: ${BorderRad.s};