feat: add podcast episode styles

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>

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 {

src/index.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  scrollbar-gutter: stable;
+}

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>

todo.md

@@ -44,5 +44,5 @@
 ## Other
 
 - [x] Close all todos
-- [ ] Add styles
+- [x] Add styles
 - [ ] Refactor to use better names