martin/marian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simplify chat button positioning and remove mobile-specific overrides #deploy

Browse Source
This commit is contained in:
martin 2026-01-24 18:54:36 +01:00
parent 0bb6262ce6
commit 012b465c30
3 changed files with 11 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
index.html
View File

@ -51,8 +51,8 @@
html body div[class*="chat-launcher"], html body div[class*="chat-launcher"],
html body button[aria-label*="chat"], html body button[aria-label*="chat"],
html body button[title*="chat"] { html body button[title*="chat"] {
right: 16px !important; right: 80px !important;
bottom: 80px !important; bottom: 24px !important;
width: 48px !important; width: 48px !important;
height: 48px !important; height: 48px !important;
font-size: 20px !important; font-size: 20px !important;
@ -64,52 +64,13 @@
html body div[class*="chat-launcher"], html body div[class*="chat-launcher"],
html body button[aria-label*="chat"], html body button[aria-label*="chat"],
html body button[title*="chat"] { html body button[title*="chat"] {
right: 12px !important; right: 70px !important;
bottom: 70px !important; bottom: 24px !important;
width: 44px !important; width: 44px !important;
height: 44px !important; height: 44px !important;
font-size: 18px !important; font-size: 18px !important;
} }
} }
/* Override any inline styles */
div[style*="bottom"] {
bottom: 24px !important;
right: 120px !important;
}
/* Reposition existing contact button */
.fixed.bottom-6.right-6 {
bottom: 24px !important;
right: 130px !important;
z-index: 9998 !important;
width: 52px !important;
height: 52px !important;
border-radius: 0.5rem !important;
padding: 0 !important;
display: flex !important;
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> </style>
</head> </head>
@ -152,65 +113,25 @@
// Force reposition after chat loads // Force reposition after chat loads
setTimeout(() => { 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"]'); const chatButtons = document.querySelectorAll('[class*="chat-button"], [class*="chat-launcher"], button[aria-label*="chat"], button[title*="chat"]');
chatButtons.forEach(button => { chatButtons.forEach(button => {
if (button) { if (button) {
if (isSmallMobile) { button.style.setProperty('bottom', '24px', 'important');
button.style.setProperty('bottom', '70px', 'important'); button.style.setProperty('right', '120px', '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('position', 'fixed', 'important');
button.style.setProperty('z-index', '9999', 'important'); button.style.setProperty('z-index', '9999', 'important');
button.style.setProperty('transform', 'none', 'important'); button.style.setProperty('transform', 'none', 'important');
} }
}); });
}, 3000);
// Also reposition chat containers
const chatContainers = document.querySelectorAll('[class*="chat-container"], [class*="chat-popup"], [class*="chat-widget"]');
chatContainers.forEach(container => {
if (container) {
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 // Continuous repositioning - run every 500ms
setInterval(() => { 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"]'); const chatButtons = document.querySelectorAll('[class*="chat-button"], [class*="chat-launcher"], button[aria-label*="chat"], button[title*="chat"]');
chatButtons.forEach(button => { chatButtons.forEach(button => {
if (button) { if (button) {
if (isSmallMobile) { button.style.setProperty('bottom', '24px', 'important');
button.style.setProperty('bottom', '70px', 'important'); button.style.setProperty('right', '120px', '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('position', 'fixed', 'important');
button.style.setProperty('z-index', '9999', 'important'); button.style.setProperty('z-index', '9999', 'important');
button.style.setProperty('transform', 'none', 'important'); button.style.setProperty('transform', 'none', 'important');

2
src/components/AccessibilityToggle.tsx
View File

@ -49,7 +49,7 @@ const AccessibilityToggle = () => {
{/* Toggle Button */} {/* Toggle Button */}
<Button <Button
onClick={() => setIsOpen(!isOpen)} 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 md:right-4 sm:right-2" 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-4"
aria-label="Barrierefreiheitsoptionen" aria-label="Barrierefreiheitsoptionen"
> >
{isOpen ? <X className="w-5 h-5" /> : <Accessibility className="w-5 h-5" />} {isOpen ? <X className="w-5 h-5" /> : <Accessibility className="w-5 h-5" />}

2
src/components/Layout.tsx
View File

@ -102,7 +102,7 @@ const Layout = ({ children }: LayoutProps) => {
<AccessibilityToggle /> <AccessibilityToggle />
<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"> <div className="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3 md:bottom-6 md:right-6 sm:bottom-4 sm:right-4">
{showToTop ? ( {showToTop ? (
<Button <Button
type="button" type="button"