From 3bc7ed931992fcc462cf76080a784a2960aeedfc Mon Sep 17 00:00:00 2001
From: Salief <salieflewis@gmail.com>
Date: Wed, 21 Feb 2024 21:41:54 -0500
Subject: [PATCH] update channel details spacing, update grid spacing on mobile

---
 apps/site/app/(base)/layout.tsx                        | 2 +-
 apps/site/app/channel/[id]/page.tsx                    | 2 +-
 apps/site/components/client/Header.tsx                 | 2 +-
 apps/site/components/server/channel/ChannelDetails.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/site/app/(base)/layout.tsx b/apps/site/app/(base)/layout.tsx
index c8aca8b2..1a86fbc2 100644
--- a/apps/site/app/(base)/layout.tsx
+++ b/apps/site/app/(base)/layout.tsx
@@ -13,7 +13,7 @@ export default function BaseLayout({
       <div className="hidden md:block fixed top-[var(--header-height)] z-50 w-full">
         <MarqueeWrapper />
       </div>
-      <Flex className="px-5 pt-[70px] md:pt-[104px]">
+      <Flex className="px-[15px] md:px-5 pt-[57px] md:pt-[104px]">
         <div className="hidden md:w-[19%] md:block">
           <RecentChannels params={params} />
         </div>
diff --git a/apps/site/app/channel/[id]/page.tsx b/apps/site/app/channel/[id]/page.tsx
index 44465249..f2167f6d 100644
--- a/apps/site/app/channel/[id]/page.tsx
+++ b/apps/site/app/channel/[id]/page.tsx
@@ -33,7 +33,7 @@ export default async function Channel({
       <div className="hidden md:block fixed top-[var(--header-height)] z-50 w-full">
         <MarqueeWrapper />
       </div>
-      <Flex className="px-5 pt-[70px] md:pt-[104px]">
+      <Flex className="px-[15px] md:px-5 pt-[57px] md:pt-[104px]">
         <div className="hidden md:w-[19%] md:block">
           <RecentChannels params={params} />
         </div>
diff --git a/apps/site/components/client/Header.tsx b/apps/site/components/client/Header.tsx
index 017c6033..d8ae9b91 100644
--- a/apps/site/components/client/Header.tsx
+++ b/apps/site/components/client/Header.tsx
@@ -62,7 +62,7 @@ export function Header() {
     <div className="bg-popover fixed z-50 w-screen">
       {/* Header */}
       <Flex
-        className={`py-[11px] px-5 items-center justify-between border-b border-border ${
+        className={`py-[11px] px-[15px] md:px-5 items-center justify-between border-b border-border ${
           params.index || params.username ? '' : 'md:border-none'
         }`}
       >
diff --git a/apps/site/components/server/channel/ChannelDetails.tsx b/apps/site/components/server/channel/ChannelDetails.tsx
index 97658427..f29f0296 100644
--- a/apps/site/components/server/channel/ChannelDetails.tsx
+++ b/apps/site/components/server/channel/ChannelDetails.tsx
@@ -6,7 +6,7 @@ export async function ChannelDetails({ channel }: { channel: Channel }) {
   const length = channel.adds?.items ? channel.adds?.items.length : 0
 
   return (
-    <Stack className="py-8 md:ml-2">
+    <Stack className="py-8 md:ml-2 gap-y-[3px]">
       {/* Number of items */}
       <Typography className="text-secondary-foreground">
         {pluralize(length, 'item', 'items')}