From cad7b78798ab264a6b294247019042619977ac37 Mon Sep 17 00:00:00 2001
From: zmeyer44 <zmmeyer44@gmail.com>
Date: Sat, 14 Oct 2023 22:51:37 -0400
Subject: [PATCH] header and some layout stuff

---
 app/(app)/_layout/Header.tsx              | 13 +++++++------
 app/(app)/_layout/Keystone.tsx            |  5 ++++-
 app/(app)/app/_sections/LiveStreaming.tsx |  6 +++---
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/app/(app)/_layout/Header.tsx b/app/(app)/_layout/Header.tsx
index 510dbc6..1491828 100644
--- a/app/(app)/_layout/Header.tsx
+++ b/app/(app)/_layout/Header.tsx
@@ -12,14 +12,15 @@ export default function Header() {
         <div className="flex flex-1 items-stretch justify-between gap-x-4 sm:border-b">
           <div className="center justify-between gap-x-3 text-foreground">
             <Logo className="h-[30px] w-[30px] text-primary sm:hidden" />
-            <div className="text-xl font-semibold">Flockstr</div>
-          </div>
-          <div className="flex grow items-center justify-end">
-            <div className="sm:hidden">
-              <MobileMenu />
+            <div className="font-condensed text-xl font-semibold text-foreground xl:hidden">
+              Flockstr
             </div>
-            <div className="hidden items-center gap-x-4 sm:flex">
+          </div>
+          <div className="flex grow items-center justify-end gap-x-4 xl:justify-between">
+            <div className="hidden sm:flex">
               <Search />
+            </div>
+            <div className="flex items-center gap-x-4">
               <Notifications />
               <Relays />
               <UserMenu />
diff --git a/app/(app)/_layout/Keystone.tsx b/app/(app)/_layout/Keystone.tsx
index a800ef3..3d017fc 100644
--- a/app/(app)/_layout/Keystone.tsx
+++ b/app/(app)/_layout/Keystone.tsx
@@ -5,9 +5,12 @@ export default function Keystone() {
     <div className="center hidden sm:flex">
       <Link
         href="/"
-        className="center fixed h-[var(--header-height)] w-[var(--sidebar-closed-width)] border-r text-primary hover:text-primary/80 xl:w-[var(--sidebar-open-width)] xl:justify-start xl:pl-5"
+        className="center fixed h-[var(--header-height)] w-[var(--sidebar-closed-width)] gap-x-3 border-r text-primary hover:text-primary/80 xl:w-[var(--sidebar-open-width)] xl:justify-start xl:pl-5"
       >
         <Logo className="h-[30px] w-[30px]" />
+        <div className="font-condensed hidden text-xl font-semibold text-foreground xl:inline-flex">
+          Flockstr
+        </div>
       </Link>
     </div>
   );
diff --git a/app/(app)/app/_sections/LiveStreaming.tsx b/app/(app)/app/_sections/LiveStreaming.tsx
index 4be3ffd..f894365 100644
--- a/app/(app)/app/_sections/LiveStreaming.tsx
+++ b/app/(app)/app/_sections/LiveStreaming.tsx
@@ -41,9 +41,9 @@ export default function LiveStreamingSection() {
     },
   ];
   return (
-    <Section>
+    <Section className="max-sm:-mx-5">
       <SectionHeader>
-        <div className="center gap-x-2">
+        <div className="center gap-x-2 max-sm:px-5">
           <SectionTitle>Streaming Now</SectionTitle>
           <LiveBadge text={"LIVE"} />
         </div>
@@ -53,7 +53,7 @@ export default function LiveStreamingSection() {
       </SectionHeader>
       <SectionContent className="relative">
         <ScrollArea>
-          <div className="flex space-x-2 pb-4">
+          <div className="flex space-x-2 pb-4 max-sm:px-5">
             {demo.map((item) => (
               <VideoCard
                 key={item.id}