damjan_savic/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Cookie-Banner Buttons stapeln sich auf Mobile

Browse Source 
- Buttons werden vertikal gestapelt auf kleinen Bildschirmen
- Ab sm-Breakpoint (640px) nebeneinander
- Volle Breite auf Mobile für bessere Bedienbarkeit

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
damjan_savic
2026-01-05 23:35:47 +01:00
co-authored by Claude Opus 4.5
parent fc4d4f3cc3
commit bd5570aa87
5 changed files with 3745 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CookieBanner.tsx
+5 -5
View File
@@ -7,7 +7,7 @@ import { loadGoogleTagManager } from '../services/gtm';
const translations = {
de: {
title: "Cookie-Einstellungen",
message: "Diese Website verwendet Cookies, um Ihr Erlebnis zu verbessern. Daten werden ohne Ihre Zustimmung nicht an Dritte weitergegeben.",
message: "Wir nutzen Cookies zur Verbesserung der Website. Ohne Ihre Zustimmung keine Datenweitergabe an Dritte. ",
acceptAll: "Alle akzeptieren",
save: "Einstellungen speichern",
decline: "Ablehnen",
@@ -304,22 +304,22 @@ const CookieBanner = () => {
<div className="flex-1">
<p className="text-sm md:text-base font-light">{getText('message')}</p>
</div>
<div className="flex flex-wrap gap-3 mt-2 md:mt-0">
<div className="flex flex-col sm:flex-row gap-2 sm:gap-3 mt-3 md:mt-0 w-full sm:w-auto">
<button
onClick={() => setShowSettings(true)}
className="px-4 py-2 text-xs uppercase tracking-wider font-light text-white border border-white/30 hover:bg-white/10 transition-all"
className="w-full sm:w-auto px-4 py-2 text-xs uppercase tracking-wider font-light text-white border border-white/30 hover:bg-white/10 transition-all"
>
{getText('learnMore')}
</button>
<button
onClick={handleDeclineAll}
className="px-4 py-2 text-xs uppercase tracking-wider font-light text-white border border-white/30 hover:bg-white/10 transition-all"
className="w-full sm:w-auto px-4 py-2 text-xs uppercase tracking-wider font-light text-white border border-white/30 hover:bg-white/10 transition-all"
>
{getText('decline')}
</button>
<button
onClick={handleAcceptAll}
className="px-4 py-2 text-xs uppercase tracking-wider font-light bg-white text-black hover:bg-gray-200 transition-all"
className="w-full sm:w-auto px-4 py-2 text-xs uppercase tracking-wider font-light bg-white text-black hover:bg-gray-200 transition-all"
>
{getText('acceptAll')}
</button>