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/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>