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/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')}