From c2880f073a522e6c3d7ac80e9fc1f55b1c825853 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Thu, 13 Feb 2025 14:58:12 +1300
Subject: [PATCH] use icon for disconnect on small screens

---
 src/components/Header.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 818ca4f..b7f9695 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -49,7 +49,12 @@
                     </button>
                 </RouterLink>
                 <button @click="disconnect" type="button" class="my-auto bg-gray-500 text-white px-2 py-1 p-1 rounded shadow hover:bg-gray-400">
-                    Disconnect
+                    <span class="block sm:hidden">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+                        <path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+                    </svg>
+                    </span>
+                    <span class="hidden sm:block">Disconnect</span>
                 </button>
             </div>