fix: improve header layout for mobile - stack button below title

- AdminPromocodes, AdminCampaigns, AdminPromoGroups, AdminTariffs, AdminServers
- Use flex-col on mobile, flex-row on desktop (sm:)
- Button now appears below header on small screens
- Prevents text wrapping in buttons

src/pages/AdminCampaigns.tsx

@@ -910,7 +910,7 @@ export default function AdminCampaigns() {
   return (
     <div className="animate-fade-in">
       {/* Header */}
-      <div className="mb-6 flex items-center justify-between">
+      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <AdminBackButton />
           <div>
@@ -920,7 +920,7 @@ export default function AdminCampaigns() {
         </div>
         <button
           onClick={() => navigate('/admin/campaigns/create')}
-          className="flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600"
+          className="flex items-center justify-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600"
         >
           <PlusIcon />
           {t('admin.campaigns.createButton')}

src/pages/AdminPromoGroups.tsx

@@ -69,7 +69,7 @@ export default function AdminPromoGroups() {
   return (
     <div className="animate-fade-in">
       {/* Header */}
-      <div className="mb-6 flex items-center justify-between">
+      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <AdminBackButton />
           <div>
@@ -79,7 +79,7 @@ export default function AdminPromoGroups() {
         </div>
         <button
           onClick={() => navigate('/admin/promo-groups/create')}
-          className="flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600"
+          className="flex items-center justify-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600"
         >
           <PlusIcon />
           {t('admin.promoGroups.addGroup')}

src/pages/AdminPromocodes.tsx

@@ -128,7 +128,7 @@ export default function AdminPromocodes() {
   return (
     <div className="animate-fade-in">
       {/* Header */}
-      <div className="mb-6 flex items-center justify-between">
+      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <AdminBackButton />
           <div>
@@ -138,7 +138,7 @@ export default function AdminPromocodes() {
         </div>
         <button
           onClick={() => navigate('/admin/promocodes/create')}
-          className="flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600"
+          className="flex items-center justify-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600"
         >
           <PlusIcon />
           {t('admin.promocodes.addPromocode')}

src/pages/AdminServers.tsx

@@ -364,7 +364,7 @@ export default function AdminServers() {
   return (
     <div className="animate-fade-in">
       {/* Header */}
-      <div className="mb-6 flex items-center justify-between">
+      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <AdminBackButton />
           <div>
@@ -375,7 +375,7 @@ export default function AdminServers() {
         <button
           onClick={() => syncMutation.mutate()}
           disabled={syncMutation.isPending}
-          className="flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
+          className="flex items-center justify-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600 disabled:opacity-50"
         >
           <SyncIcon />
           {syncMutation.isPending ? t('admin.servers.syncing') : t('admin.servers.sync')}

src/pages/AdminTariffs.tsx

@@ -115,7 +115,7 @@ export default function AdminTariffs() {
   return (
     <div className="animate-fade-in">
       {/* Header */}
-      <div className="mb-6 flex items-center justify-between">
+      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
           <AdminBackButton />
           <div>
@@ -125,7 +125,7 @@ export default function AdminTariffs() {
         </div>
         <button
           onClick={() => navigate('/admin/tariffs/create')}
-          className="flex items-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600"
+          className="flex items-center justify-center gap-2 rounded-lg bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600"
         >
           <PlusIcon />
           {t('admin.tariffs.create')}