fix(containers): X of X things - mobile support

pyrohost · Aug 20, 2024 · 9c97de4 · 9c97de4
1 parent 7808e33
commit 9c97de4
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>