From 9051938fdc888ba673a684ae835a18106f986880 Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Wed, 1 Oct 2025 23:24:36 -0400
Subject: [PATCH] Improve header layout: stack labels above controls for
 cleaner mobile appearance

---
 components/QRCodeButton.vue | 6 +++---
 pages/[slug].vue            | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/QRCodeButton.vue b/components/QRCodeButton.vue
index 649c039..78e0b48 100644
--- a/components/QRCodeButton.vue
+++ b/components/QRCodeButton.vue
@@ -1,12 +1,12 @@
 <template>
   <button
     @click="showModal = true"
-    class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+    class="inline-flex flex-col items-center gap-1 px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 font-medium"
   >
-    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
     </svg>
-    QR Code
+    <span class="text-xs">QR Code</span>
   </button>
 
   <QRCodeModal 
diff --git a/pages/[slug].vue b/pages/[slug].vue
index 470dbb7..e6dc810 100644
--- a/pages/[slug].vue
+++ b/pages/[slug].vue
@@ -6,9 +6,9 @@
           <NuxtLink to="/" class="flex items-center space-x-4 hover:opacity-80">
             <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
           </NuxtLink>
-          <div class="flex items-center gap-4">
-            <div class="flex items-center gap-2">
-              <label for="font-size" class="text-sm font-medium text-gray-700">Font Size:</label>
+          <div class="flex items-end gap-4">
+            <div class="flex flex-col gap-1">
+              <label for="font-size" class="text-xs font-medium text-gray-700">Font Size:</label>
               <select
                 id="font-size"
                 v-model="fontSize"