some work on making the thing mobile friendly

fullstack-chat · Feb 13, 2025 · 1837d10 · 1837d10
1 parent 1fc6b8b
commit 1837d10
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 55 deletions.
diff --git a/src/app/episodes/page.tsx b/src/app/episodes/page.tsx
@@ -8,12 +8,7 @@ export default async function EpisodesPage() {
   const episodes = await getPodcastEpisodes();
 
   return (
-    <div className="space-y-8">
-      <nav className="flex items-center mb-8">
-        <Link href="/" className="text-gray-200 hover:text-slate-300">
-          ← Back to Home
-        </Link>
-      </nav>
+    <div className="space-y-8 max-w-full overflow-x-hidden">
       <section className="text-center py-12">
         <div className="mb-6">
           <img src="/assets/images/logo-2.png" alt="fullstack.chat logo" className="mx-auto h-40" />
@@ -27,29 +22,32 @@ export default async function EpisodesPage() {
       <div className="grid gap-6">
         {episodes.map((episode) => (
           <UiCard key={episode.link} title={episode.title}>
-            <div className="space-y-4">
-              <div className="flex items-center gap-4 text-sm text-gray-500">
-                <span>{episode.pubDate}</span>
-                <span>Duration: {episode.duration}</span>
+            <div className="space-y-4 w-full">
+              <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 text-sm text-gray-500">
+                <span className="break-words">{episode.pubDate}</span>
+                <span className="break-words">Duration: {episode.duration}</span>
               </div>
-              <div dangerouslySetInnerHTML={{ __html: episode.description }} />
+              <div 
+                dangerouslySetInnerHTML={{ __html: episode.description }} 
+                className="break-words [&>p]:mb-4 [&>p]:break-words last:[&>p]:mb-0 [&>ul]:list-disc [&>ul]:pl-4 [&>ul>li]:pl-2 [&>ul>li]:break-words"
+              />
 
-              <div className="flex gap-4">
+              <div className="flex flex-wrap gap-4">
                 <a
                   href={episode.link}
                   target="_blank"
                   rel="noreferrer"
-                  className="inline-flex items-center"
+                  className="inline-flex items-center hover:text-gray-300 transition-colors break-words"
                 >
-                  View Episode
+                  View Episode →
                 </a>
                 <a
                   href={episode.enclosure.url}
                   target="_blank"
                   rel="noreferrer"
-                  className="inline-flex items-center"
+                  className="inline-flex items-center hover:text-gray-300 transition-colors break-words"
                 >
-                  Download Audio
+                  Download Audio →
                 </a>
               </div>
             </div>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -26,13 +26,16 @@ export default function RootLayout({
       <html lang="en" className="dark">
         <PHProvider>
           <body
-            className={`${inter.className} px-4 py-8 max-w-screen-lg xl:px-0 mx-auto`}
+            className={`${inter.className} w-full overflow-x-hidden`}
+          >
+            <div className="px-4 py-8 max-w-screen-lg xl:px-0 mx-auto w-full"
           >
             <Toaster />
             <PostHogPageView />
-            {/* <Navbar /> */}
+            <Navbar />
             <main>{children}</main>
             <Footer />
+            </div>
           </body>
         </PHProvider>
       </html>

diff --git a/src/app/lib/components/Navbar.tsx b/src/app/lib/components/Navbar.tsx
@@ -18,24 +18,17 @@ function Navbar() {
   const [isMenuShown, setIsMenuShown] = useState(false);
 
   return (
-    <nav className="flex items-center pb-12">
-      <div className="max-w-16 md:max-w-24 mr-auto">
-        <Link href="/">
-          <img
-            alt="fullstack.chat logo"
-            src="/assets/images/logo-2.png"
-            className="logo"
-          />
-        </Link>
-      </div>
-      <div className="flex gap-4 lg:text-lg">
-        <Link href="/profiles">Profiles</Link>
+    <nav className="flex justify-center items-center pb-8">
+      <div className="flex items-center gap-4 text-sm">
+        <Link href="/" className="hover:text-gray-300 transition-colors">Home</Link>
+        <Link href="/episodes" className="hover:text-gray-300 transition-colors">Episodes</Link>
+        <Link href="/profiles" className="hover:text-gray-300 transition-colors">Member Profiles</Link>
         <SignedIn>
-          <Link href="/me">My Profile</Link>
+          <Link href="/me" className="hover:text-gray-300 transition-colors">My Profile</Link>
           <UserButton />
         </SignedIn>
         <SignedOut>
-          <Link href="/sign-in">Sign In</Link>
+          <Link href="/sign-in" className="hover:text-gray-300 transition-colors">Sign In</Link>
         </SignedOut>
       </div>
 

diff --git a/src/app/lib/components/UiCard.tsx b/src/app/lib/components/UiCard.tsx
@@ -10,10 +10,10 @@ type Props = {
 function UiCard({ title, children, className, outerClassName }: Props) {
   return (
     <div
-      className={`bg-gradient-to-tl from-[#1B1923] border-t-2 border-[#222222] rounded-xl p-4 ${outerClassName}`}
+      className={`bg-gradient-to-tl from-[#1B1923] border-t-2 border-[#222222] rounded-xl p-4 break-words ${outerClassName}`}
     >
-      {title && <p className="mb-2 text-white font-semibold">{title}</p>}
-      <div className={className}>{children}</div>
+      {title && <p className="mb-2 text-white font-semibold break-words">{title}</p>}
+      <div className={`break-words ${className || ''}`}>{children}</div>
     </div>
   );
 }

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -20,29 +20,36 @@ export default async function Home() {
       <section className="flex flex-col gap-4 mb-4">
 
       <UiCard title="Latest episode" className="col-span-2">
-          {episode && (
-            <div className="flex gap-4">
-              <img className="max-h-48 max-w-48 rounded" src={episode.imgUrl} alt={episode.title} />
-              <div className="flex flex-col gap-2">
-                <div className="font-bold text-2xl">{episode.title}</div>
-                <div className="flex items-center gap-4 text-sm text-gray-300">
-                  <span>Published: {episode.pubDate}</span>
-                  <span>Duration: {episode.duration}</span>
-                </div>
-                <div dangerouslySetInnerHTML={{ __html: episode.description }} className="text-gray-200 rounded my-2" />
-                <div className="flex gap-2">
-                  <a href={episode.link} target="_blank" rel="noreferrer">
-                    Listen to episode {'->'}
-                  </a>
-                  <a href="/episodes">
-                    All episodes {'->'}
-                  </a>
+        {episode && (
+          <div className="flex flex-col md:flex-row gap-4">
+            <img 
+              className="w-full md:w-48 h-48 object-cover rounded" 
+              src={episode.imgUrl} 
+              alt={episode.title} 
+            />
+            <div className="flex flex-col gap-2">
+              <div className="font-bold text-xl md:text-2xl break-words">{episode.title}</div>
+              <div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-4 text-sm text-gray-300">
+                <span className="break-words">Published: {episode.pubDate}</span>
+                <span className="break-words">Duration: {episode.duration}</span>
+              </div>
+              <div 
+                dangerouslySetInnerHTML={{ __html: episode.description }} 
+                className="text-gray-200 rounded my-2 break-words [&>p]:mb-4 last:[&>p]:mb-0" 
+              />
+              <div className="flex flex-wrap gap-4">
+                <a href={episode.link} target="_blank" rel="noreferrer" className="hover:underline break-all">
+                  Listen to episode {'->'}
+                </a>
+                <a href="/episodes" className="hover:underline break-all">
+                  All episodes {'->'}
+                </a>
 
-                </div>
               </div>
             </div>
-          )}
-        </UiCard>
+          </div>
+        )}
+      </UiCard>
       </section>
 
       <div className="flex flex-col md:grid grid-cols-2 gap-4 mb-20">