From ebf5733774123f9e31cc7b74b65fcf9f84358c86 Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Sun, 21 Apr 2024 01:24:42 +0200
Subject: [PATCH] feat: add podcast episode styles

---
 src/components/podcast-info-card.tsx | 4 ++--
 src/components/spinner.module.css    | 3 ++-
 src/index.css                        | 4 ++++
 src/pages/episode.tsx                | 9 +++++----
 todo.md                              | 2 +-
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/podcast-info-card.tsx b/src/components/podcast-info-card.tsx
index 9582f44..8154857 100644
--- a/src/components/podcast-info-card.tsx
+++ b/src/components/podcast-info-card.tsx
@@ -23,7 +23,7 @@ export function PodcastInfoCard({
   const shouldWrapWithLink = !!episodeId;
 
   return (
-    <aside className={"h-fit w-1/3 shrink-0 px-2 py-6 shadow-md"}>
+    <aside className={"h-fit w-1/3 shrink-0 grow-0 px-2 py-6 shadow-md"}>
       <div className={"border-b px-10 pb-4"}>
         <Wrap if={shouldWrapWithLink} with={Link} wrapperProps={{ to: href }}>
           <img src={imageURL} alt={title} />
@@ -38,7 +38,7 @@ export function PodcastInfoCard({
       <div>
         <strong className={"text-sm"}>Description:</strong>
         <div
-          className={"text-sm italic"}
+          className={"break-words text-sm italic"}
           dangerouslySetInnerHTML={{ __html: description }}
         ></div>
       </div>
diff --git a/src/components/spinner.module.css b/src/components/spinner.module.css
index 8438a39..07bd1d8 100644
--- a/src/components/spinner.module.css
+++ b/src/components/spinner.module.css
@@ -2,11 +2,12 @@
   width: 24px;
   height: 24px;
   border: 3px solid #fff;
-  border-bottom-color: #ff3d00;
   border-radius: 50%;
   display: inline-block;
   box-sizing: border-box;
   animation: rotation 1s linear infinite;
+
+  @apply border-gray-200 border-b-sky-600;
 }
 
 @keyframes rotation {
diff --git a/src/index.css b/src/index.css
index b5c61c9..4ec969a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  scrollbar-gutter: stable;
+}
diff --git a/src/pages/episode.tsx b/src/pages/episode.tsx
index 700c029..3a67793 100644
--- a/src/pages/episode.tsx
+++ b/src/pages/episode.tsx
@@ -14,13 +14,14 @@ export function Episode() {
   );
 
   return (
-    <div>
+    <div className={"h-fit p-4 pb-6 shadow-md"}>
+      <h2 className={"text-2xl font-bold tracking-tight"}>{episode?.title}</h2>
       <div
-        className={"prose"}
+        className={"prose mt-2 max-w-full border-b pb-4 leading-snug"}
         dangerouslySetInnerHTML={{ __html: episode?.description ?? "" }}
-      ></div>
+      />
       <div>
-        <audio controls src={episode?.audioUrl}>
+        <audio controls src={episode?.audioUrl} className={"mt-4 w-full"}>
           Audio is not supported by your browser
         </audio>
       </div>
diff --git a/todo.md b/todo.md
index 5505d62..68dc03d 100644
--- a/todo.md
+++ b/todo.md
@@ -44,5 +44,5 @@
 ## Other
 
 - [x] Close all todos
-- [ ] Add styles
+- [x] Add styles
 - [ ] Refactor to use better names