From 04f2e294033b8258eaf934b29deeb86dc8f561e3 Mon Sep 17 00:00:00 2001
From: Bastian Masanek <bastian.masanek@experimenta.science>
Date: Tue, 25 Nov 2025 08:53:39 +0100
Subject: [PATCH] Refactor Layout and Styling in UserMenu, AppHeader, and
 Product Pages

- Adjusted button margin in UserMenu.vue for better alignment.
- Updated container classes in AppHeader.vue to use max-width for improved responsiveness.
- Modified max-width settings in product detail page to enhance layout consistency across different states (loading, error, product display).
---
 app/components/UserMenu.vue             | 2 +-
 app/components/navigation/AppHeader.vue | 6 +++---
 app/pages/products/[id].vue             | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/components/UserMenu.vue b/app/components/UserMenu.vue
index b86318a..7d89c3f 100644
--- a/app/components/UserMenu.vue
+++ b/app/components/UserMenu.vue
@@ -67,7 +67,7 @@ async function handleLogout() {
   <DropdownMenu v-else>
     <DropdownMenuTrigger as-child>
       <button
-        class="flex items-center gap-3 rounded-[35px] px-2 py-[10px] focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 transition-all hover:bg-white/10"
+        class="flex items-center gap-3 rounded-[35px] px-2 py-[10px] focus:outline-none focus:ring-2 focus:ring-experimenta-accent focus:ring-offset-2 transition-all hover:bg-white/10 -mr-2"
         aria-label="Benutzermenü öffnen">
         <!-- Greeting text (Desktop only) -->
         <span class="hidden md:inline font-medium text-white pl-2">
diff --git a/app/components/navigation/AppHeader.vue b/app/components/navigation/AppHeader.vue
index e541eac..66ecd6e 100644
--- a/app/components/navigation/AppHeader.vue
+++ b/app/components/navigation/AppHeader.vue
@@ -10,7 +10,7 @@ const { loggedIn } = useAuth()
 <template>
   <header class="sticky top-0 z-50 w-full">
     <!-- Main header bar -->
-    <div class="container flex items-end justify-between px-4 md:px-6 lg:px-8 py-6 md:py-7">
+    <div class="max-w-7xl mx-auto flex items-end justify-between px-4 sm:px-6 lg:px-8 py-6 md:py-7">
       <!-- Left: Logo + Role Switcher -->
       <div class="flex items-end gap-6 md:gap-8">
         <NuxtLink to="/" class="flex-shrink-0 transition-transform hover:scale-105">
@@ -35,14 +35,14 @@ const { loggedIn } = useAuth()
 
     <!-- Secondary navigation bar (Product areas) - No borders, gradient separation -->
     <div class="area-tabs-section">
-      <div class="container px-4 md:px-6 lg:px-8 py-3">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
         <AreaTabs />
       </div>
     </div>
 
     <!-- Mobile: Role switcher in collapsible section (only when logged in) -->
     <div v-if="loggedIn" class="lg:hidden mobile-role-section">
-      <div class="container px-4 py-2.5">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 py-2.5">
         <RoleSwitcher />
       </div>
     </div>
diff --git a/app/pages/products/[id].vue b/app/pages/products/[id].vue
index ce8aa8d..29e6667 100644
--- a/app/pages/products/[id].vue
+++ b/app/pages/products/[id].vue
@@ -116,7 +116,7 @@ const handleAddToCart = async () => {
   <NuxtLayout name="default">
     <div class="min-h-screen px-4 py-12 md:px-6 lg:px-8">
       <!-- Back Button -->
-      <div class="mx-auto mb-8 max-w-container-narrow">
+      <div class="mx-auto max-w-container-wide">
         <NuxtLink to="/products"
           class="inline-flex items-center gap-2 text-white/80 transition-colors hover:text-white">
           <ArrowLeft :size="20" />
@@ -125,14 +125,14 @@ const handleAddToCart = async () => {
       </div>
 
       <!-- Loading State -->
-      <div v-if="pending" class="mx-auto max-w-container-narrow text-center">
+      <div v-if="pending" class="mx-auto max-w-4xl text-center">
         <div class="card-glass inline-block">
           <p class="text-white/80">Produkt wird geladen...</p>
         </div>
       </div>
 
       <!-- Error State (404 or other errors) -->
-      <div v-else-if="error" class="mx-auto max-w-container-narrow">
+      <div v-else-if="error" class="mx-auto max-w-4xl">
         <div class="card-glass border-red/50 bg-red/10">
           <h2 class="mb-2 text-2xl font-semibold text-red">
             {{ error.statusCode === 404 ? 'Produkt nicht gefunden' : 'Fehler beim Laden' }}
@@ -153,7 +153,7 @@ const handleAddToCart = async () => {
       </div>
 
       <!-- Product Detail -->
-      <div v-else-if="product" class="mx-auto max-w-container-narrow">
+      <div v-else-if="product" class="mx-auto mt-12 max-w-container-wide">
         <div class="overflow-hidden rounded-2xl border border-white/20 bg-white/10 shadow-glass backdrop-blur-lg">
           <!-- Product Image (no padding, flush with top) -->
           <div class="relative aspect-[16/9] w-full overflow-hidden bg-purple-dark">