From 78d2412ea27c586ce19976c93e9fc5b80f0521af Mon Sep 17 00:00:00 2001
From: Zach Daniel <zach@zachdaniel.dev>
Date: Sun, 2 Feb 2025 06:49:23 -0500
Subject: [PATCH] chore: fix js error on other pages chore: make the playlist
 indicator responsive

---
 assets/js/app.js                              | 12 ++++++++----
 lib/ash_hq_web/templates/home/media.html.heex |  6 ++++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index 8d66063..da7f774 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -481,11 +481,15 @@ function addTooltip(id, content) {
   });
 }
 
-let appName = document.getElementById("app-name").value;
+let appNameComponent = document.getElementById("app-name")
 
-document.addEventListener('DOMContentLoaded', function() {
-  document.getElementById('quickstart-live_view-inactive').click();
-});
+let appName = (appName || {}).value;
+
+if(appNameComponent) {
+  document.addEventListener('DOMContentLoaded', function() {
+    document.getElementById('quickstart-live_view-inactive').click();
+  });
+}
 
 function setUrl() {
   var button = document.getElementById('copy-url-button');
diff --git a/lib/ash_hq_web/templates/home/media.html.heex b/lib/ash_hq_web/templates/home/media.html.heex
index c8af56f..6832b78 100644
--- a/lib/ash_hq_web/templates/home/media.html.heex
+++ b/lib/ash_hq_web/templates/home/media.html.heex
@@ -22,8 +22,10 @@
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
             allowfullscreen
           />
-          <span class="absolute top-4 -right-32 text-xs text-primary-dark-500 italic w-28">
-            <span class="hero-arrow-left size-4" /><br />(this is a whole playlist of videos!)
+          <span class="absolute pt-4 pb-4 sm:pt-0 bottom:-32 right-0 sm:top-4 sm:-right-32 text-xs text-primary-dark-500 italic w-28">
+            <span class="hero-arrow-left size-4 hidden sm:block" />
+            <span class="hero-arrow-up size-4 sm:hidden" /> 
+            <br />(this is a whole playlist of videos!)
           </span>
         </div>
       </div>