From 9c97de4d46466daca7e510ab519fded4e7e29b48 Mon Sep 17 00:00:00 2001
From: he3als <65787561+he3als@users.noreply.github.com>
Date: Tue, 20 Aug 2024 19:32:27 +0100
Subject: [PATCH] fix(containers): X of X things - mobile support

---
 .../scripts/components/server/backups/BackupContainer.tsx   | 2 +-
 .../components/server/databases/DatabasesContainer.tsx      | 2 +-
 .../components/server/databases/RotatePasswordButton.tsx    | 6 +++++-
 .../scripts/components/server/network/NetworkContainer.tsx  | 2 +-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/resources/scripts/components/server/backups/BackupContainer.tsx b/resources/scripts/components/server/backups/BackupContainer.tsx
index 10ec68382..43618216d 100644
--- a/resources/scripts/components/server/backups/BackupContainer.tsx
+++ b/resources/scripts/components/server/backups/BackupContainer.tsx
@@ -44,7 +44,7 @@ const BackupContainer = () => {
         <ServerContentBlock title={'Backups'}>
             <MainPageHeader title={'Backups'}>
                 <Can action={'backup.create'}>
-                    <div className={`sm:flex items-center justify-end`}>
+                    <div className={`flex flex-col sm:flex-row items-center justify-end`}>
                         {backupLimit > 0 && backups.backupCount > 0 && (
                             <p className={`text-sm text-zinc-300 mb-4 sm:mr-6 sm:mb-0`}>
                                 {backups.backupCount} of {backupLimit} backups
diff --git a/resources/scripts/components/server/databases/DatabasesContainer.tsx b/resources/scripts/components/server/databases/DatabasesContainer.tsx
index e618ffa4b..ce7564379 100644
--- a/resources/scripts/components/server/databases/DatabasesContainer.tsx
+++ b/resources/scripts/components/server/databases/DatabasesContainer.tsx
@@ -44,7 +44,7 @@ export default () => {
             <FlashMessageRender byKey={'databases'} />
             <MainPageHeader title={'Databases'}>
                 <Can action={'database.create'}>
-                    <div className={`flex items-center justify-end`}>
+                    <div className={`flex flex-col sm:flex-row items-center justify-end`}>
                         {databaseLimit > 0 && databases.length > 0 && (
                             <p className={`text-sm text-zinc-300 mb-4 sm:mr-6 sm:mb-0`}>
                                 {databases.length} of {databaseLimit} databases
diff --git a/resources/scripts/components/server/databases/RotatePasswordButton.tsx b/resources/scripts/components/server/databases/RotatePasswordButton.tsx
index 521da768b..8e29c9e41 100644
--- a/resources/scripts/components/server/databases/RotatePasswordButton.tsx
+++ b/resources/scripts/components/server/databases/RotatePasswordButton.tsx
@@ -37,7 +37,11 @@ export default ({ databaseId, onUpdate }: { databaseId: string; onUpdate: (datab
                     key: 'database-connection-modal',
                 });
             })
-            .then(() => setLoading(false));
+            .then(() => {
+                setTimeout(() => {
+                    setLoading(false);
+                }, 500);
+            });
     };
 
     return (
diff --git a/resources/scripts/components/server/network/NetworkContainer.tsx b/resources/scripts/components/server/network/NetworkContainer.tsx
index 4ed119074..7faf3d0ce 100644
--- a/resources/scripts/components/server/network/NetworkContainer.tsx
+++ b/resources/scripts/components/server/network/NetworkContainer.tsx
@@ -59,7 +59,7 @@ const NetworkContainer = () => {
                     <>
                         {allocationLimit > 0 && (
                             <Can action={'allocation.create'}>
-                                <div className={`sm:flex items-center justify-end`}>
+                                <div className={`flex flex-col sm:flex-row items-center justify-end`}>
                                     <p className={`text-sm text-zinc-300 mb-4 sm:mr-6 sm:mb-0`}>
                                         {data.length} of {allocationLimit} allowed allocations
                                     </p>