From 643d4fd3af891fc9a9e27501dae715f91242f200 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Mon, 2 Feb 2026 08:17:03 +0300
Subject: [PATCH] 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   | 4 ++--
 src/pages/AdminPromoGroups.tsx | 4 ++--
 src/pages/AdminPromocodes.tsx  | 4 ++--
 src/pages/AdminServers.tsx     | 4 ++--
 src/pages/AdminTariffs.tsx     | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/pages/AdminCampaigns.tsx b/src/pages/AdminCampaigns.tsx
index db449b4..cafa0f1 100644
--- a/src/pages/AdminCampaigns.tsx
+++ b/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')}
diff --git a/src/pages/AdminPromoGroups.tsx b/src/pages/AdminPromoGroups.tsx
index 14ab5e6..2124eb1 100644
--- a/src/pages/AdminPromoGroups.tsx
+++ b/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')}
diff --git a/src/pages/AdminPromocodes.tsx b/src/pages/AdminPromocodes.tsx
index f119175..2de68b1 100644
--- a/src/pages/AdminPromocodes.tsx
+++ b/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')}
diff --git a/src/pages/AdminServers.tsx b/src/pages/AdminServers.tsx
index 00f845d..5e2c15b 100644
--- a/src/pages/AdminServers.tsx
+++ b/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')}
diff --git a/src/pages/AdminTariffs.tsx b/src/pages/AdminTariffs.tsx
index 0d27f3b..5bf44c1 100644
--- a/src/pages/AdminTariffs.tsx
+++ b/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')}