feat: add responsive styles to thumbnails

3 files changed, 6 insertions, 6 deletions

diff --git a/src/frontend/tubo/items/views.cljs b/src/frontend/tubo/items/views.cljs
index 2de6004..2f8f419 100644
--- a/src/frontend/tubo/items/views.cljs
+++ b/src/frontend/tubo/items/views.cljs
@@ -111,7 +111,7 @@
    [:div.flex.gap-x-3.xs:gap-x-5
     [layout/thumbnail thumbnail-url route name duration
      :classes
-     [:py-2 :h-28 "xs:h-36" "min-w-[150px]" "max-w-[150px]" "sm:min-w-[250px]"
+     [:py-2 :h-28 "sm:h-36" "min-w-[130px]" "max-w-[130px]" "sm:min-w-[250px]"
       "sm:max-w-[250px]"] :rounded?
      true]
     [:div.flex.flex-col.flex-auto.xs:mr-2.gap-y-2
diff --git a/src/frontend/tubo/layout/views.cljs b/src/frontend/tubo/layout/views.cljs
index 26a5cb9..abc6027 100644
--- a/src/frontend/tubo/layout/views.cljs
+++ b/src/frontend/tubo/layout/views.cljs
@@ -18,8 +18,8 @@
       [:div.bg-neutral-300.flex.min-h-full.min-w-full.justify-center.items-center.rounded
        [:i.fa-solid.fa-image.text-3xl.text-white]])
     (when duration
-      [:div.rounded.p-2.absolute
-       {:style {:bottom 5 :right 5 :background "rgba(0,0,0,.7)" :zIndex "0"}}
+      [:div.rounded.p-1.xs:p-2.absolute.bottom-1.right-1.z-0
+       {:class "bg-[rgba(0,0,0,.7)]"}
        [:p.text-white.text-xs.xs:text-base
         (if (= duration 0)
           "LIVE"
@@ -143,7 +143,7 @@
                  [:span.whitespace-nowrap label]]
         classes ["relative" "flex" "items-center" "gap-x-3"
                  "hover:bg-neutral-200"
-                 "dark:hover:bg-neutral-700" "py-2" "px-4"
+                 "dark:hover:bg-neutral-700" "py-2.5" "px-4"
                  "first:rounded-t" "last:rounded-b"]]
     (if link
       [:a
diff --git a/src/frontend/tubo/queue/views.cljs b/src/frontend/tubo/queue/views.cljs
index ba6fbb5..d382466 100644
--- a/src/frontend/tubo/queue/views.cljs
+++ b/src/frontend/tubo/queue/views.cljs
@@ -16,9 +16,9 @@
    [:div.flex.items-center.justify-center.min-w-16.w-16.xs:min-w-28.xs:w-28
     [:span.font-bold.text-neutral-400.text-sm
      (if (= i queue-pos) [:i.fa-solid.fa-play] (inc i))]]
-   [:div.w-32.flex.items-center
+   [:div.flex.items-center.shrink-0.grow-0
     [layout/thumbnail thumbnail-url nil name duration :classes
-     ["h-12" "xs:h-16"]]]
+     ["h-12" "xs:h-16" "w-16" "xs:w-24" "md:w-32"]]]
    [:div.flex.flex-col.pl-4.pr-12.w-full
     [:h1.line-clamp-1.w-fit.text-sm.xs:text-lg {:title name} name]
     [:div.text-neutral-600.dark:text-neutral-400.text-xs.xs:text-sm.flex.flex-col.xs:flex-row