fix(frontend): fix responsive styles for containers without data

4 files changed, 13 insertions, 9 deletions

diff --git a/src/frontend/tubo/views/bookmarks.cljs b/src/frontend/tubo/views/bookmarks.cljs
index cae383c..24c356c 100644
--- a/src/frontend/tubo/views/bookmarks.cljs
+++ b/src/frontend/tubo/views/bookmarks.cljs
@@ -10,12 +10,12 @@
   (let [service-color @(rf/subscribe [:service-color])
         bookmarks @(rf/subscribe [:bookmarks])]
     [:div.flex.flex-col.items-center.px-5.py-2.flex-auto
-     [:div.flex.flex-col.flex-auto {:class "ml:w-4/5 xl:w-3/5"}
+     [:div.flex.flex-col.flex-auto.w-full {:class "ml:w-4/5 xl:w-3/5"}
       [navigation/back-button service-color]
       [:div.flex.justify-between
        [:h1.text-2xl.font-bold.py-6 "Bookmarks"]
        [:button
         {:on-click #(rf/dispatch [::events/enqueue-related-streams bookmarks service-color])}
         [:i.fa-solid.fa-headphones]
-        [:span.mx-2.text-neutral-600.dark:text-neutral-300 "Background"]]]
+        [:span.ml-2.text-neutral-600.dark:text-neutral-300 "Background"]]]
       [items/related-streams bookmarks]]]))
diff --git a/src/frontend/tubo/views/playlist.cljs b/src/frontend/tubo/views/playlist.cljs
index 9eaccdf..a201008 100644
--- a/src/frontend/tubo/views/playlist.cljs
+++ b/src/frontend/tubo/views/playlist.cljs
@@ -27,7 +27,14 @@
           [:div
            [:img {:src banner-url}]])
         [:div.flex.flex-col.justify-center.my-4.mx-2
-         [:h1.text-2xl.font-bold.mb-4.line-clamp-1 {:title name} name]
+         [:div.flex.justify-between.items-center.mb-4
+          [:div
+           [:h1.text-2xl.font-bold.line-clamp-1 {:title name} name]]
+          [:div.flex-auto.whitespace-nowrap.ml-4
+           [:button
+            {:on-click #(rf/dispatch [::events/enqueue-related-streams related-streams service-color])}
+            [:i.fa-solid.fa-headphones]
+            [:span.ml-4.text-neutral-600.dark:text-neutral-300 "Background"]]]]
          [:div.flex.items-center.justify-between
           [:div.flex.items-center.my-4.mr-2
            [:div.flex.items-center.py-3.pr-3.box-border.h-12
@@ -38,8 +45,5 @@
             uploader-name]]
           [:span.ml-2 (str stream-count " streams")]]
          [:div.flex.flex.w-full.my-4.justify-center
-          [:button.px-3.py-1.mx-2
-           {:on-click #(rf/dispatch [::events/enqueue-related-streams related-streams service-color])}
-           [:i.fa-solid.fa-headphones]
-           [:span.mx-3.text-neutral-600.dark:text-neutral-300 "Background"]]]]
+          ]]
         [items/related-streams related-streams next-page-url]])]))
diff --git a/src/frontend/tubo/views/settings.cljs b/src/frontend/tubo/views/settings.cljs
index de1f7a7..c39d35e 100644
--- a/src/frontend/tubo/views/settings.cljs
+++ b/src/frontend/tubo/views/settings.cljs
@@ -19,7 +19,7 @@
                 show-description]} @(rf/subscribe [:settings])
         service-color @(rf/subscribe [:service-color])]
     [:div.flex.flex-col.items-center.px-5.py-2.flex-auto
-     [:div.flex.flex-col.flex-auto {:class "ml:w-4/5 xl:w-3/5"}
+     [:div.flex.flex-col.flex-auto.w-full {:class "ml:w-4/5 xl:w-3/5"}
       [navigation/back-button service-color]
       [:h1.text-2xl.font-bold.py-6 "Settings"]
       [:form.flex.flex-wrap
diff --git a/src/frontend/tubo/views/stream.cljs b/src/frontend/tubo/views/stream.cljs
index c4546b8..503dfd0 100644
--- a/src/frontend/tubo/views/stream.cljs
+++ b/src/frontend/tubo/views/stream.cljs
@@ -29,7 +29,7 @@
     [:div.flex.flex-col.items-center.justify-center.dark:text-white.flex-auto
      (if page-loading?
        [loading/loading-icon service-color "text-5xl"]
-       [:div.w-full.pb-4.relative {:class "ml:w-4/5 xl:w-3/5"}
+       [:div.w-full.pb-4.relative.w-full {:class "ml:w-4/5 xl:w-3/5"}
         [navigation/back-button service-color]
         [:div.flex.justify-center.relative
          {:class "h-[300px] ml:h-[450px] lg:h-[600px]"}