Fix in news, first android notification service

components/PublicNews.vue

@@ -78,53 +78,62 @@
       </div>
     </div>
 
-    <!-- News Modal -->
-    <div
-      v-if="selectedNews"
-      class="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center p-4"
-      @click.self="closeNewsModal"
-    >
-      <div class="bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] flex flex-col">
-        <!-- Modal Header -->
-        <div class="flex items-center justify-between p-6 border-b border-gray-200">
-          <div class="flex-1">
-            <div class="flex items-center text-sm text-gray-500 mb-2">
-              <Calendar
-                :size="16"
-                class="mr-2"
-              />
-              {{ formatDate(selectedNews.created) }}
-            </div>
-            <h2 class="text-2xl font-display font-bold text-gray-900">
-              {{ selectedNews.title }}
-            </h2>
-          </div>
-          <button
-            class="ml-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
-            @click="closeNewsModal"
-          >
-            <X :size="24" />
-          </button>
-        </div>
+    <Teleport to="body">
+      <Transition name="news-modal">
+        <div
+          v-if="selectedNews"
+          class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-950/65 px-4 py-6 sm:px-6"
+          role="dialog"
+          aria-modal="true"
+          :aria-labelledby="modalTitleId"
+          @click.self="closeNewsModal"
+        >
+          <article class="w-full max-w-3xl max-h-[min(44rem,calc(100vh-3rem))] overflow-hidden rounded-lg bg-white shadow-2xl ring-1 ring-black/10 flex flex-col">
+            <header class="flex items-start gap-4 border-b border-gray-200 bg-white px-5 py-4 sm:px-7 sm:py-6">
+              <div class="min-w-0 flex-1">
+                <div class="mb-3 inline-flex items-center gap-2 rounded-full bg-primary-50 px-3 py-1 text-sm font-medium text-primary-800">
+                  <Calendar :size="15" />
+                  <time :datetime="selectedNews.created">
+                    {{ formatDate(selectedNews.created) }}
+                  </time>
+                </div>
+                <h2
+                  :id="modalTitleId"
+                  class="text-2xl sm:text-3xl font-display font-bold leading-tight text-gray-950 break-words"
+                >
+                  {{ selectedNews.title }}
+                </h2>
+              </div>
+              <button
+                type="button"
+                class="shrink-0 rounded-md border border-gray-200 bg-white p-2 text-gray-500 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                aria-label="News schließen"
+                @click="closeNewsModal"
+              >
+                <X :size="20" />
+              </button>
+            </header>
 
-        <!-- Modal Content (scrollable) -->
-        <div class="p-6 overflow-y-auto flex-1">
-          <div class="prose max-w-none text-gray-700 whitespace-pre-wrap">
-            {{ selectedNews.content }}
-          </div>
+            <div class="overflow-y-auto px-5 py-5 sm:px-7 sm:py-6">
+              <div class="news-modal-content text-base leading-7 text-gray-800 sm:text-lg sm:leading-8">
+                {{ selectedNews.content }}
+              </div>
+            </div>
+          </article>
         </div>
-      </div>
-    </div>
+      </Transition>
+    </Teleport>
   </section>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { Calendar, X } from 'lucide-vue-next'
 
 const news = ref([])
 const selectedNews = ref(null)
 const isLoading = ref(true)
+const modalTitleId = 'public-news-modal-title'
 
 const loadNews = async () => {
   try {
@@ -164,19 +173,30 @@ const getGridClass = () => {
 
 const openNewsModal = (item) => {
   selectedNews.value = item
-  // Verhindere Scrollen im Hintergrund
   document.body.style.overflow = 'hidden'
+  document.addEventListener('keydown', handleModalKeydown)
 }
 
 const closeNewsModal = () => {
   selectedNews.value = null
-  // Erlaube Scrollen wieder
   document.body.style.overflow = ''
+  document.removeEventListener('keydown', handleModalKeydown)
+}
+
+const handleModalKeydown = (event) => {
+  if (event.key === 'Escape') {
+    closeNewsModal()
+  }
 }
 
 onMounted(() => {
   loadNews()
 })
+
+onUnmounted(() => {
+  document.body.style.overflow = ''
+  document.removeEventListener('keydown', handleModalKeydown)
+})
 </script>
 
 <style scoped>
@@ -186,5 +206,20 @@ onMounted(() => {
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+
+.news-modal-content {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.news-modal-enter-active,
+.news-modal-leave-active {
+  transition: opacity 160ms ease;
+}
+
+.news-modal-enter-from,
+.news-modal-leave-to {
+  opacity: 0;
+}
 </style>