Poprawki w wyszikiwaniu kanałów i wyświetlaniu

src/components/sections/SectionChannelsSearch.astro

@@ -46,13 +46,6 @@ if (section.image) {
 
       <JamboxChannelsSearch client:load />
 
-      {section.button && (
-        <div class="f-section-nav">
-          <a href={section.button.url} class="btn btn-primary" title={section.button.title}>
-            {section.button.text}
-          </a>
-        </div>
-      )}
     </div>
   </div>
 </section>

src/islands/jambox/JamboxChannelsModal.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "preact/hooks";
 import "../../styles/modal.css";
 import "../../styles/offers/offers-table.css";
-import "../../styles/channels-search.css"; // żeby input miał identyczny styl
+import "../../styles/channels-search.css";
 
 export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
   const [channels, setChannels] = useState([]);
@@ -18,9 +18,8 @@ export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
   const meta = useMemo(() => {
     if (loading) return "Ładowanie…";
     if (error) return error;
-    if (!query.trim()) return `Wyniki: ${filtered.length} / ${channels.length}`;
     return `Wyniki: ${filtered.length} / ${channels.length}`;
-  }, [loading, error, query, filtered.length, channels.length]);
+  }, [loading, error, filtered.length, channels.length]);
 
   useEffect(() => {
     if (!isOpen || !pkg?.id) return;
@@ -36,7 +35,6 @@ export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
       try {
         const params = new URLSearchParams({ packageId: String(pkg.id) });
         const res = await fetch(`/api/jambox/channels?${params.toString()}`);
-
         if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
         const json = await res.json();
@@ -81,7 +79,6 @@ export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
         <div class="max-w-8xl mx-auto px-3 md:px-6">
           <h2 class="f-modal-title">Kanały w pakiecie {pkg.name}</h2>
 
-          {/* INPUT jak w wyszukiwarce (z własnym X) */}
           <div class="f-chsearch__top">
             <div class="f-chsearch__inputwrap">
               <input
@@ -99,13 +96,14 @@ export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
                   class="f-chsearch__clear"
                   aria-label="Wyczyść wyszukiwanie"
                   onClick={() => setQuery("")}
-                  onMouseDown={(e) => e.preventDefault()} // nie zabieraj focusa inputowi
+                  onMouseDown={(e) => e.preventDefault()}
                 >
                   ✕
                 </button>
               )}
             </div>
 
+            {/* ✅ tu musi być __meta */}
             <div class="f-chsearch__meta">{meta}</div>
           </div>
 
@@ -117,19 +115,25 @@ export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
               {filtered.length === 0 ? (
                 <p>Brak kanałów spełniających kryteria.</p>
               ) : (
-                <div class="f-section-channel">
+                <div class="jmb-channels-grid">
                   {filtered.map((ch) => (
                     <div
                       class="jmb-channel-card"
                       key={ch.number}
+                      role="button"
+                      tabIndex={0}
                       onClick={(e) => {
-                        // żeby klik w link w opisie nie flipował
                         if (e.target.closest("a, button")) return;
                         e.currentTarget.classList.toggle("is-flipped");
                       }}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          e.currentTarget.classList.toggle("is-flipped");
+                        }
+                      }}
                     >
                       <div class="jmb-channel-inner">
-                        {/* FRONT */}
                         <div class="jmb-channel-face jmb-channel-front">
                           {ch.logo_url && (
                             <img
@@ -143,7 +147,6 @@ export default function JamboxChannelsModal({ isOpen, onClose, pkg }) {
                           <div class="jmb-channel-number">kanał {ch.number}</div>
                         </div>
 
-                        {/* BACK */}
                         <div class="jmb-channel-face jmb-channel-back">
                           <div class="jmb-channel-back-title">{ch.name}</div>
                           <div

src/islands/jambox/JamboxChannelsSearch.jsx

@@ -13,7 +13,7 @@ export default function JamboxChannelsSearch() {
     const qq = q.trim();
     setErr("");
 
-    if (qq.length < 2) {
+    if (qq.length === 0) {
       setItems([]);
       setLoading(false);
       return;
@@ -58,7 +58,8 @@ export default function JamboxChannelsSearch() {
 
   const meta = useMemo(() => {
     const qq = q.trim();
-    if (qq.length < 2) return "Wpisz min. 2 znaki";
+     if (qq.length === 0) return "";
+    //  "Zacznij pisać, aby wyszukać"
     if (loading) return "Szukam…";
     if (err) return err;
     return `Znaleziono: ${items.length}`;
@@ -71,7 +72,7 @@ export default function JamboxChannelsSearch() {
     el.scrollIntoView({ behavior: "smooth", block: "start" });
 
     el.classList.add("is-target");
-    window.setTimeout(() => el.classList.remove("is-target"), 1200);
+    window.setTimeout(() => el.classList.remove("is-target"), 5400);
   }
 
   return (
@@ -101,7 +102,7 @@ export default function JamboxChannelsSearch() {
           )}
         </div>
 
-        <div class="f-chsearch__meta">{meta}</div>
+        <div class="f-chsearch-meta">{meta}</div>
       </div>
 
       <div class="f-chsearch__list" role="list">
@@ -138,16 +139,19 @@ export default function JamboxChannelsSearch() {
                 <div class="f-chsearch__packages">
                   Dostępny w:&nbsp;
                   {c.packages.map((p, i) => (
-                    <button
+                    <span key={p.id}>
-                      type="button"
+                      <button
-                      class="f-chsearch__pkg"
+                        type="button"
-                      key={p.id}
+                        class="f-chsearch__pkg"
-                      onClick={() => scrollToPackage(p.id)}
+                        onClick={() => scrollToPackage(p.id)}
-                    >
+                      >
-                      {p.name}{" "}
+                        {p.name}
-                      <span class="f-chsearch__pkgnum">(kanał {p.number})</span>
+                      </button>
+                      <span class="f-chsearch__pkgnum">
+                        {" "} (kanał {p.number})
+                      </span>
                       {i < c.packages.length - 1 ? ", " : ""}
-                    </button>
+                    </span>
                   ))}
                 </div>
               )}
@@ -156,7 +160,7 @@ export default function JamboxChannelsSearch() {
         ))}
 
         {q.trim().length >= 2 && !loading && items.length === 0 && (
-          <div class="f-chsearch__empty">
+          <div class="f-chsearch-empty">
             Brak wyników dla: <strong>{q}</strong>
           </div>
         )}

src/pages/api/jambox/channels-search.js

@@ -14,7 +14,7 @@ export function GET({ url }) {
   const q = (url.searchParams.get("q") || "").trim();
   const limit = clamp(Number(url.searchParams.get("limit") || 50), 1, 200);
 
-  if (q.length < 2) {
+  if (q.length < 0) {
     return new Response(JSON.stringify({ ok: true, data: [] }), {
       status: 200,
       headers: { "Content-Type": "application/json; charset=utf-8" },
@@ -27,9 +27,6 @@ export function GET({ url }) {
   const db = getDb();
 
   try {
-    // ✅ 1 rekord na kanał (grupujemy po name+logo_url)
-    // ✅ pakiety zbieramy do jednego pola packages_blob
-    // UWAGA: zakładam, że jambox_base_packages ma kolumnę "name"
     const rows = db
   .prepare(
     `

src/styles/channels-search.css

@@ -27,8 +27,8 @@
     @apply opacity-100;
   }
 
-  .f-chsearch__meta {
+  .f-chsearch-meta {
-    @apply text-sm opacity-70 pl-1;
+    @apply text-sm opacity-70 pl-1 ml-2;
   }
 
   /* =========================
@@ -110,8 +110,8 @@
   /* =========================
      Empty state
   ========================== */
-  .f-chsearch__empty {
+  .f-chsearch-empty {
-    @apply mt-2 p-4 rounded-2xl border border-slate-200 dark:border-slate-700 opacity-80;
+    @apply mt-2 p-4 text-lg;
   }
 
   .f-chsearch__input::-webkit-search-cancel-button {

src/styles/offers/offers-table.css

@@ -1,333 +1,285 @@
-/* GŁÓWNE SEKCJE */
+  .f-offers {
-.f-offers {
+    @apply my-6;
-  @apply my-6;
+  }
-}
 
-/* GRID FLEX — zawsze centrowany */
+  /* GRID FLEX — zawsze centrowany */
-.f-offers-grid {
+  .f-offers-grid {
-  display: flex;
+    display: flex;
-  flex-wrap: wrap;
+    flex-wrap: wrap;
-  justify-content: center;
+    justify-content: center;
-  gap: 2rem;
+    gap: 2rem;
-  padding: 0 1rem;
+    padding: 0 1rem;
-}
+  }
 
-/* -----------------------------
+  /* MOBILE: każda karta prawie pełna szerokość */
-   KARTA – MOBILE FIRST
------------------------------- */
-
-/* MOBILE: każda karta ~pełna szerokość */
-.f-card {
-  flex: 1 1 100%;
-  max-width: 26rem; /* możesz dać 100%, jeśli chcesz naprawdę full */
-  @apply bg-[--f-bg] text-[--f-text] border border-[--f-offers-border]
-         rounded-2xl shadow-md p-6 relative flex flex-col gap-4;
-}
-
-.f-card:hover {
-  @apply shadow-lg;
-  transform: translateY(-3px);
-}
-
-/* POPULARNY PLAN */
-.f-card-popular {
-  border: 2px solid var(--f-offers-popular);
-  background: var(--f-offers-popular-bg);
-}
-
-.f-card-badge {
-  @apply absolute top-3 right-3 bg-[--btn-background]
-         text-[--btn-text] text-sm font-semibold px-3 py-1 rounded-full;
-}
-
-/* HEADER */
-.f-card-header {
-  @apply flex flex-col items-start gap-1;
-}
-
-.f-card-name {
-  @apply text-xl font-semibold;
-}
-
-.f-card-price {
-  @apply text-3xl font-extrabold text-[--f-offers-price];
-}
-
-/* FEATURES */
-.f-card-features {
-  @apply list-none p-0 m-0;
-}
-
-.f-card-row {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: 0.75rem;
-  padding: 0.5rem 0;
-  border-bottom: 1px solid var(--f-offers-border);
-  align-items: center;
-}
-
-.f-card-row:last-child {
-  border-bottom: none;
-}
-
-.f-card-label {
-  @apply text-base font-medium opacity-80;
-}
-
-.f-card-value {
-  @apply text-base font-semibold text-right;
-}
-
-.f-card-value.yes {
-  @apply text-green-600;
-}
-
-.f-card-value.no {
-  @apply text-red-600 opacity-60;
-}
-
-/* -----------------------------
-   INTELIGENTNY UKŁAD – OD MD↑
------------------------------- */
-
-@media (min-width: 768px) {
-  /* DOMYŚLNE: responsywnie */
   .f-card {
-    flex: 1 1 300px;
+    /* przewijanie uwzględnia sticky navbar */
-    max-width: 360px;
+    scroll-margin-top: calc(var(--f-navbar-height, 64px) + 16px);
+
+    flex: 1 1 100%;
+    max-width: 26rem;
+
+    @apply bg-[--f-bg] text-[--f-text] border border-[--f-offers-border] rounded-2xl shadow-md p-6 relative flex flex-col gap-4;
+
+    transition: transform 220ms ease, box-shadow 220ms ease;
   }
 
-  /* 4 karty → 2 + 2 */
+  .f-card:hover {
-  .f-count-4 .f-card {
+    @apply shadow-lg;
-    flex: 0 1 calc(50% - 2rem);
+    transform: translateY(-3px);
-    max-width: 420px;
   }
 
-  /* 5 kart → 3 + 2 */
+  /* POPULARNY PLAN */
-  .f-count-5 .f-card {
+  .f-card-popular {
-    flex: 0 1 calc(33% - 2rem);
+    border: 2px solid var(--f-offers-popular);
-  }
+    background: var(--f-offers-popular-bg);
-  .f-count-5 .f-card:nth-child(n + 4) {
-    flex: 0 1 calc(50% - 2rem);
-    max-width: 420px;
   }
 
-  /* 7 kart → 3 + 3 + 1 (środek) */
+  .f-card-badge {
-  .f-count-7 .f-card {
+    @apply absolute top-3 right-3 bg-[--btn-background] text-[--btn-text] text-sm font-semibold px-3 py-1 rounded-full;
-    flex: 0 1 calc(33% - 2rem);
-  }
-  .f-count-7 .f-card:last-child {
-    flex: 0 1 calc(33% - 2rem);
-    margin-left: auto;
-    margin-right: auto;
   }
 
-  /* 8 kart → 3 + 3 + 2 */
+  /* HEADER */
-  .f-count-8 .f-card {
+  .f-card-header {
-    flex: 0 1 calc(33% - 2rem);
+    @apply flex flex-col items-start gap-1;
-  }
-  .f-count-8 .f-card:nth-child(n + 7) {
-    flex: 0 1 calc(50% - 2rem);
-    max-width: 420px;
   }
 
-  /* 10 kart → 3 + 3 + 3 + 1 */
+  .f-card-name {
-  .f-count-10 .f-card:last-child {
+    @apply text-xl font-semibold;
-    flex: 0 1 calc(33% - 2rem);
-    margin-left: auto;
-    margin-right: auto;
   }
-}
 
+  .f-card-price {
+    @apply text-3xl font-extrabold text-[--f-offers-price];
+  }
 
+  /* FEATURES */
+  .f-card-features {
+    @apply list-none p-0 m-0;
+  }
 
+  .f-card-row {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 0.75rem;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid var(--f-offers-border);
+    align-items: center;
+  }
 
+  .f-card-row:last-child {
+    border-bottom: none;
+  }
 
-/* 
+  .f-card-label {
-obszar ze scrollem wewnątrz modala
+    @apply text-base font-medium opacity-80;
-.jmb-channels-scroll {
+  }
-  margin-top: 1rem;
-  padding-right: 0.25rem;
-  max-height: 72vh;
-  overflow-y: auto;
-} */
 
-/* dużo kart w wierszu */
+  .f-card-value {
-.jmb-channels-grid {
+    @apply text-base font-semibold text-right;
-  display: grid;
+  }
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 0.9rem;
-}
 
-/* pojedyncza karta kanału */
+  .f-card-value.yes {
-.jmb-channel-card {
+    @apply text-green-600;
-  background: var(--fuz-bg);
+  }
-  border-radius: 0.75rem;
-  padding: 0.75rem 0.5rem;
-  text-align: center;
-  border: 1px solid rgba(148, 163, 184, 0.25);
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
 
-/* logo kanału */
+  .f-card-value.no {
-.jmb-channel-logo {
+    @apply text-red-600 opacity-60;
-  max-width: 90px;
+  }
-  max-height: 60px;
-  margin: 0 auto 0.5rem auto;
-  display: block;
-  object-fit: contain;
-}
 
-/* podpisy pod logo */
+  /* INTELIGENTNY UKŁAD – OD MD↑ */
-.jmb-channel-name {
+  @media (min-width: 768px) {
-  font-size: 0.85rem;
+    .f-card {
-  font-weight: 600;
+      flex: 1 1 300px;
-  margin-bottom: 0.15rem;
+      max-width: 360px;
-}
+    }
 
-.jmb-channel-number {
+    /* 4 karty → 2 + 2 */
-  font-size: 0.75rem;
+    .f-count-4 .f-card {
-  color: #94a3b8;
+      flex: 0 1 calc(50% - 2rem);
-}
+      max-width: 420px;
+    }
 
-/* badge "gwarantowany" */
+    /* 5 kart → 3 + 2 */
-.jmb-channel-tag {
+    .f-count-5 .f-card {
-  margin-top: 0.35rem;
+      flex: 0 1 calc(33% - 2rem);
-  font-size: 0.7rem;
+    }
-  display: inline-block;
-  padding: 0.1rem 0.5rem;
-  border-radius: 9999px;
-  background: rgba(34, 197, 94, 0.08);
-  color: #22c55e;
-}
 
+    .f-count-5 .f-card:nth-child(n + 4) {
+      flex: 0 1 calc(50% - 2rem);
+      max-width: 420px;
+    }
 
+    /* 7 kart → 3 + 3 + 1 (środek) */
+    .f-count-7 .f-card {
+      flex: 0 1 calc(33% - 2rem);
+    }
 
+    .f-count-7 .f-card:last-child {
+      flex: 0 1 calc(33% - 2rem);
+      margin-left: auto;
+      margin-right: auto;
+    }
 
+    /* 8 kart → 3 + 3 + 2 */
+    .f-count-8 .f-card {
+      flex: 0 1 calc(33% - 2rem);
+    }
 
+    .f-count-8 .f-card:nth-child(n + 7) {
+      flex: 0 1 calc(50% - 2rem);
+      max-width: 420px;
+    }
 
+    /* 10 kart → 3 + 3 + 3 + 1 */
+    .f-count-10 .f-card:last-child {
+      flex: 0 1 calc(33% - 2rem);
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
 
+  /* =========================================
+     TARGET — PODŚWIETLENIE PAKIETU PO KLIKNIĘCIU
+  ========================================== */
 
-/* === FIX: stabilny grid + flip (nie rozjeżdża kart) === */
+  .f-card.is-target {
+    outline: none;
+    box-shadow:
+      0 0 0 3px rgba(59, 130, 246, 0.45),
+      0 10px 25px rgba(15, 23, 42, 0.18);
+    transform: translateY(-6px) scale(1.01);
+    position: relative;
+    background-color: var(--f-navbar-background);
+    z-index: 2;
+  }
 
-.jmb-channels-grid {
+  .f-card.is-target:hover {
-  display: grid;
+    transform: translateY(-6px) scale(1.01);
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  }
-  gap: 0.9rem;
-  align-items: stretch; /* ważne: równe wysokości w wierszu */
-}
 
-.jmb-channel-card {
+  /* JAMBOX — GRID KANAŁÓW (MODAL) */
-  position: relative;
-  perspective: 1000px;
 
-  /* zostawiamy Twój wygląd */
+  .jmb-channels-grid {
-  background: var(--fuz-bg);
+    display: grid;
-  border-radius: 0.75rem;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  border: 1px solid rgba(148, 163, 184, 0.25);
+    gap: 0.9rem;
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
+    align-items: stretch;
+  }
 
-  /* kluczowe: karta ma “ramę” */
+  .jmb-channel-card {
-  min-height: 170px;     /* dopasuj: 160–200 */
+    position: relative;
-  height: 100%;
+    perspective: 1000px;
-  padding: 0;            /* padding przenosimy na face */
-  overflow: hidden;      /* żeby back nie wystawał */
-}
 
-.jmb-channel-inner {
+    background: var(--f-bg);
-  position: relative;
+    color: var(--f-text);
-  width: 100%;
-  height: 100%;
-  transform-style: preserve-3d;
-  transition: transform 0.6s ease;
-}
 
-@media (hover: hover) and (pointer: fine) {
+    border-radius: 0.75rem;
-  .jmb-channel-card:hover .jmb-channel-inner {
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
+
+    min-height: 170px;
+    height: 100%;
+    padding: 0;
+    overflow: hidden;
+
+    -webkit-tap-highlight-color: transparent;
+    touch-action: manipulation;
+    cursor: pointer;
+  }
+
+  .jmb-channel-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transform-style: preserve-3d;
+    -webkit-transform-style: preserve-3d;
+    transition: transform 0.6s ease;
+  }
+
+  /* DESKTOP: flip na hover */
+  @media (hover: hover) and (pointer: fine) {
+    .jmb-channel-card:hover .jmb-channel-inner {
+      transform: rotateY(180deg);
+    }
+  }
+
+  /* MOBILE/TAP: flip po klasie */
+  .jmb-channel-card.is-flipped .jmb-channel-inner {
     transform: rotateY(180deg);
   }
-}
 
-/* front + back */
+  .jmb-channel-face {
-.jmb-channel-face {
+    position: absolute;
-  position: absolute;
+    inset: 0;
-  inset: 0;
-  padding: 0.75rem 0.5rem; /* to był Twój padding z card */
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  text-align: center;
 
-  backface-visibility: hidden;
+    padding: 0.75rem 0.5rem;
-  -webkit-backface-visibility: hidden;
-}
 
-.jmb-channel-front {
+    display: flex;
-  transform: rotateY(0deg);
+    flex-direction: column;
-}
+    justify-content: space-between;
+    text-align: center;
 
-.jmb-channel-back {
+    backface-visibility: hidden;
-  transform: rotateY(180deg);
+    -webkit-backface-visibility: hidden;
-  text-align: left;
+  }
-  justify-content: flex-start;
-  gap: 0.5rem;
-}
 
-.jmb-channel-back-title {
+  .jmb-channel-front {
-  font-size: 0.9rem;
+    transform: rotateY(0deg);
-  font-weight: 700;
+  }
-}
 
-.jmb-channel-desc {
+  .jmb-channel-back {
-  font-size: 0.85rem;
+    transform: rotateY(180deg);
-  line-height: 1.35;
-  opacity: 0.9;
-  overflow: auto;          /* długi opis nie rozwala karty */
-}
 
+    text-align: left;
+    justify-content: flex-start;
+    gap: 0.5rem;
+  }
 
-.jmb-search {
+  .jmb-channel-logo {
-  display: flex;
+    max-width: 90px;
-  gap: 0.5rem;
+    max-height: 60px;
-  align-items: center;
+    margin: 0 auto 0.5rem auto;
-  margin: 0.75rem 0 0.25rem;
+    display: block;
-}
+    object-fit: contain;
+  }
 
-.jmb-search-input {
+  .jmb-channel-name {
-  flex: 1;
+    font-size: 0.85rem;
-  padding: 0.6rem 0.75rem;
+    font-weight: 600;
-  border-radius: 0.75rem;
+    margin-bottom: 0.15rem;
-  border: 1px solid rgba(148, 163, 184, 0.35);
+  }
-  background: var(--fuz-bg);
-  color: var(--fuz-text);
-  outline: none;
-}
 
-.jmb-search-input:focus {
+  .jmb-channel-number {
-  border-color: rgba(59, 130, 246, 0.55);
+    font-size: 0.75rem;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+    color: rgba(148, 163, 184, 0.95);
-}
+  }
 
-.jmb-search-clear {
+  .jmb-channel-back-title {
-  padding: 0.55rem 0.7rem;
+    font-size: 0.9rem;
-  border-radius: 0.75rem;
+    font-weight: 700;
-  border: 1px solid rgba(148, 163, 184, 0.35);
+  }
-  background: transparent;
-}
 
-.jmb-search-meta {
+  .jmb-channel-desc {
-  font-size: 0.85rem;
+    font-size: 0.85rem;
-  opacity: 0.75;
+    line-height: 1.35;
-  margin-bottom: 0.5rem;
+    opacity: 0.92;
-}
+    overflow: auto;
 
-.f-card.is-target {
+    scrollbar-width: thin;
-  outline: 2px solid rgba(59, 130, 246, 0.55);
+    scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
-  /* var(--f-link); */
+  }
-  outline-offset: 4px;
-}
 
+  .jmb-channel-desc::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  .jmb-channel-desc::-webkit-scrollbar-thumb {
+    background: rgba(148, 163, 184, 0.45);
+    border-radius: 9999px;
+    border: 3px solid transparent;
+    background-clip: content-box;
+  }
+
+  .jmb-channel-desc::-webkit-scrollbar-track {
+    background: transparent;
+  }