fix: prevent header wrapping and uploaded image 404s

apps/frontend/src/components/Layout/Header.tsx

@@ -96,21 +96,26 @@ export function Header() {
           <Button
             variant="ghost"
             size="sm"
+            className="app-header__action"
             onClick={() => navigate('/settings')}
             title={t('header.profileSettings')}
+            aria-label={t('header.profileSettings')}
           >
             <UserCog className="h-4 w-4" />
-            {t('header.profile')}
+            <span className="app-header__action-text">{t('header.profile')}</span>
           </Button>
           <Button
             variant="ghost"
             size="sm"
+            className="app-header__action"
             onClick={() => {
               void logout().then(() => navigate('/login'));
             }}
+            title={t('header.logout')}
+            aria-label={t('header.logout')}
           >
             <LogOut className="h-4 w-4" />
-            {t('header.logout')}
+            <span className="app-header__action-text">{t('header.logout')}</span>
           </Button>
         </div>
       </div>