Fix modal visibility and database path issues for Docker deployment

Dockerfile

@@ -18,8 +18,11 @@ COPY . .
 # Build the application
 RUN npm run build
 
-# Create data directory for SQLite
-RUN mkdir -p /data
+# Create data directory for SQLite (in app directory for Docker)
+RUN mkdir -p /app/data
+
+# Set proper permissions for the data directory
+RUN chown -R node:node /app/data
 
 # Switch to non-root user
 USER node

assets/css/main.css

@@ -340,9 +340,8 @@ input:focus, textarea:focus, .nui-input:focus, .nui-textarea:focus {
   vertical-align: middle !important;
 }
 
-/* Modal styling - CRITICAL FIX */
-.nui-modal {
-  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
+/* Modal styling - CRITICAL FIX - Must be more specific */
+div[class*="modal"], [class*="modal"] {
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
@@ -356,7 +355,7 @@ input:focus, textarea:focus, .nui-input:focus, .nui-textarea:focus {
   backdrop-filter: blur(4px) !important;
 }
 
-.nui-modal-overlay {
+div[class*="modal-overlay"], [class*="modal-overlay"] {
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
@@ -366,23 +365,42 @@ input:focus, textarea:focus, .nui-input:focus, .nui-textarea:focus {
   backdrop-filter: blur(4px) !important;
 }
 
-.nui-modal-content {
+div[class*="modal-content"], [class*="modal-content"] {
   background: white !important;
   border-radius: 0.5rem !important;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
-  max-width: 90vw !important;
+  max-width: 400px !important;
   max-height: 90vh !important;
   overflow: auto !important;
   position: relative !important;
   z-index: 10000 !important;
   margin: 1rem !important;
+  width: 100% !important;
 }
 
-/* Ensure modal is properly centered */
-.nui-modal > div {
-  width: 100% !important;
+/* Specific Nuxt UI modal overrides */
+[data-modal] {
+  position: fixed !important;
+  inset: 0 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+[data-modal] > [data-modal-overlay] {
+  position: fixed !important;
+  inset: 0 !important;
+  background-color: rgba(0, 0, 0, 0.5) !important;
+}
+
+[data-modal] > [data-modal-content] {
+  background: white !important;
+  border-radius: 0.5rem !important;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
   max-width: 400px !important;
-  margin: 0 auto !important;
+  width: 100% !important;
 }
 
 /* Force logo to be small */

pages/index.vue

@@ -78,8 +78,9 @@
       </div>
     </main>
 
-    <!-- Login Modal -->
+    <!-- Login Modal - Only show when triggered -->
     <LoginModal
+      v-if="showLoginModal"
       v-model="showLoginModal"
       @success="handleLoginSuccess"
     />

server/utils/database.ts

@@ -7,8 +7,10 @@ let db: Database.Database
 
 export async function getDatabase() {
   if (!db) {
-    const dbPath = process.env.NODE_ENV === 'production'
-      ? '/data/sermons.db'
+    // Use absolute path in production (Docker), relative path in development
+    const isProduction = process.env.NODE_ENV === 'production'
+    const dbPath = isProduction
+      ? '/app/data/sermons.db'
       : './data/sermons.db'
 
     // Ensure directory exists