From 0bb6262ce66593b3aa5cdebfde09f4495ed11ca4 Mon Sep 17 00:00:00 2001
From: martin <f95martin@skymail.de>
Date: Sat, 24 Jan 2026 18:51:21 +0100
Subject: [PATCH] add mobile responsive positioning for chat and accessibility
 buttons #deploy

---
 index.html                             | 92 +++++++++++++++++++++++---
 src/components/AccessibilityToggle.tsx |  2 +-
 src/components/Layout.tsx              |  2 +-
 3 files changed, 86 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index f0c6179..487bd39 100644
--- a/index.html
+++ b/index.html
@@ -45,6 +45,33 @@
         transform: none !important;
       }
       
+      /* Mobile responsive positioning */
+      @media (max-width: 768px) {
+        html body div[class*="chat-button"],
+        html body div[class*="chat-launcher"],
+        html body button[aria-label*="chat"],
+        html body button[title*="chat"] {
+          right: 16px !important;
+          bottom: 80px !important;
+          width: 48px !important;
+          height: 48px !important;
+          font-size: 20px !important;
+        }
+      }
+      
+      @media (max-width: 640px) {
+        html body div[class*="chat-button"],
+        html body div[class*="chat-launcher"],
+        html body button[aria-label*="chat"],
+        html body button[title*="chat"] {
+          right: 12px !important;
+          bottom: 70px !important;
+          width: 44px !important;
+          height: 44px !important;
+          font-size: 18px !important;
+        }
+      }
+      
       /* Override any inline styles */
       div[style*="bottom"] {
         bottom: 24px !important;
@@ -64,6 +91,25 @@
         align-items: center !important;
         justify-content: center !important;
       }
+      
+      /* Mobile positioning for contact button */
+      @media (max-width: 768px) {
+        .fixed.bottom-6.right-6 {
+          right: 16px !important;
+          bottom: 16px !important;
+          width: 48px !important;
+          height: 48px !important;
+        }
+      }
+      
+      @media (max-width: 640px) {
+        .fixed.bottom-6.right-6 {
+          right: 12px !important;
+          bottom: 12px !important;
+          width: 44px !important;
+          height: 44px !important;
+        }
+      }
     </style>
   </head>
 
@@ -106,14 +152,25 @@
       
       // Force reposition after chat loads
       setTimeout(() => {
+        const isMobile = window.innerWidth <= 768;
+        const isSmallMobile = window.innerWidth <= 640;
+        
         const chatButtons = document.querySelectorAll('[class*="chat-button"], [class*="chat-launcher"], button[aria-label*="chat"], button[title*="chat"]');
         chatButtons.forEach(button => {
           if (button) {
-            button.style.setProperty('bottom', '24px', 'important');
-            button.style.setProperty('right', '120px', 'important');
+            if (isSmallMobile) {
+              button.style.setProperty('bottom', '70px', 'important');
+              button.style.setProperty('right', '12px', 'important');
+            } else if (isMobile) {
+              button.style.setProperty('bottom', '80px', 'important');
+              button.style.setProperty('right', '16px', 'important');
+            } else {
+              button.style.setProperty('bottom', '24px', 'important');
+              button.style.setProperty('right', '120px', 'important');
+            }
             button.style.setProperty('position', 'fixed', 'important');
             button.style.setProperty('z-index', '9999', 'important');
-            button.style.setProperty('transform', 'none', 'important'); // Ensure no transform interferes
+            button.style.setProperty('transform', 'none', 'important');
           }
         });
         
@@ -121,20 +178,39 @@
         const chatContainers = document.querySelectorAll('[class*="chat-container"], [class*="chat-popup"], [class*="chat-widget"]');
         chatContainers.forEach(container => {
           if (container) {
-            container.style.setProperty('bottom', '24px', 'important');
-            container.style.setProperty('right', '120px', 'important');
-            container.style.setProperty('position', 'fixed', 'important'); // Ensure position is fixed
+            if (isSmallMobile) {
+              container.style.setProperty('bottom', '70px', 'important');
+              container.style.setProperty('right', '12px', 'important');
+            } else if (isMobile) {
+              container.style.setProperty('bottom', '80px', 'important');
+              container.style.setProperty('right', '16px', 'important');
+            } else {
+              container.style.setProperty('bottom', '24px', 'important');
+              container.style.setProperty('right', '120px', 'important');
+            }
+            container.style.setProperty('position', 'fixed', 'important');
           }
         });
       }, 3000); // Increased delay to 3 seconds
       
       // Continuous repositioning - run every 500ms
       setInterval(() => {
+        const isMobile = window.innerWidth <= 768;
+        const isSmallMobile = window.innerWidth <= 640;
+        
         const chatButtons = document.querySelectorAll('[class*="chat-button"], [class*="chat-launcher"], button[aria-label*="chat"], button[title*="chat"]');
         chatButtons.forEach(button => {
           if (button) {
-            button.style.setProperty('bottom', '24px', 'important');
-            button.style.setProperty('right', '120px', 'important');
+            if (isSmallMobile) {
+              button.style.setProperty('bottom', '70px', 'important');
+              button.style.setProperty('right', '12px', 'important');
+            } else if (isMobile) {
+              button.style.setProperty('bottom', '80px', 'important');
+              button.style.setProperty('right', '16px', 'important');
+            } else {
+              button.style.setProperty('bottom', '24px', 'important');
+              button.style.setProperty('right', '120px', 'important');
+            }
             button.style.setProperty('position', 'fixed', 'important');
             button.style.setProperty('z-index', '9999', 'important');
             button.style.setProperty('transform', 'none', 'important');
diff --git a/src/components/AccessibilityToggle.tsx b/src/components/AccessibilityToggle.tsx
index f3cbbc2..06973d6 100644
--- a/src/components/AccessibilityToggle.tsx
+++ b/src/components/AccessibilityToggle.tsx
@@ -49,7 +49,7 @@ const AccessibilityToggle = () => {
       {/* Toggle Button */}
       <Button
         onClick={() => setIsOpen(!isOpen)}
-        className="fixed top-20 right-4 z-40 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-3 shadow-lg"
+        className="fixed top-20 right-4 z-40 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-3 shadow-lg md:right-4 sm:right-2"
         aria-label="Barrierefreiheitsoptionen"
       >
         {isOpen ? <X className="w-5 h-5" /> : <Accessibility className="w-5 h-5" />}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index e2f407e..a176192 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -102,7 +102,7 @@ const Layout = ({ children }: LayoutProps) => {
 
       <AccessibilityToggle />
 
-      <div className="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3">
+      <div className="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3 md:right-6 sm:right-2 sm:bottom-2">
         {showToTop ? (
           <Button
             type="button"