Update views to support a more logical container

resources/scripts/components/server/ServerConsole.tsx

@@ -11,6 +11,7 @@ import { bytesToHuman } from '@/helpers';
 import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import Can from '@/components/elements/Can';
+import PageContentBlock from '@/components/elements/PageContentBlock';
 
 type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
 
@@ -80,7 +81,7 @@ export default () => {
     }, [ instance, connected ]);
 
     return (
-        <div className={'my-10 flex'}>
+        <PageContentBlock className={'flex'}>
             <div className={'w-1/4'}>
                 <TitledGreyBox title={server.name} icon={faServer}>
                     <p className={'text-xs uppercase'}>
@@ -159,6 +160,6 @@ export default () => {
                     <ChunkedStatGraphs/>
                 </SuspenseSpinner>
             </div>
-        </div>
+        </PageContentBlock>
     );
 };

resources/scripts/components/server/backups/BackupContainer.tsx

@@ -9,6 +9,7 @@ import CreateBackupButton from '@/components/server/backups/CreateBackupButton';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import BackupRow from '@/components/server/backups/BackupRow';
 import { ServerContext } from '@/state/server';
+import PageContentBlock from '@/components/elements/PageContentBlock';
 
 export default () => {
     const { uuid } = useServer();
@@ -34,7 +35,7 @@ export default () => {
     }
 
     return (
-        <div className={'mt-10 mb-6'}>
+        <PageContentBlock>
             <FlashMessageRender byKey={'backups'} className={'mb-4'}/>
             {!backups.length ?
                 <p className="text-center text-sm text-neutral-400">
@@ -54,6 +55,6 @@ export default () => {
                     <CreateBackupButton/>
                 </div>
             </Can>
-        </div>
+        </PageContentBlock>
     );
 };

resources/scripts/components/server/databases/DatabasesContainer.tsx

@@ -10,6 +10,7 @@ import CreateDatabaseButton from '@/components/server/databases/CreateDatabaseBu
 import Can from '@/components/elements/Can';
 import useFlash from '@/plugins/useFlash';
 import useServer from '@/plugins/useServer';
+import PageContentBlock from '@/components/elements/PageContentBlock';
 
 export default () => {
     const { uuid, featureLimits } = useServer();
@@ -33,7 +34,7 @@ export default () => {
     }, []);
 
     return (
-        <div className={'my-10 mb-6'}>
+        <PageContentBlock>
             <FlashMessageRender byKey={'databases'} className={'mb-4'}/>
             {(!databases.length && loading) ?
                 <Spinner size={'large'} centered={true}/>
@@ -67,6 +68,6 @@ export default () => {
                     </>
                 </CSSTransition>
             }
-        </div>
+        </PageContentBlock>
     );
 };

resources/scripts/components/server/files/FileEditContainer.tsx

@@ -12,6 +12,7 @@ import { useParams } from 'react-router';
 import FileNameModal from '@/components/server/files/FileNameModal';
 import Can from '@/components/elements/Can';
 import FlashMessageRender from '@/components/FlashMessageRender';
+import PageContentBlock from '@/components/elements/PageContentBlock';
 
 const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor'));
 
@@ -67,7 +68,7 @@ export default () => {
     };
 
     return (
-        <div className={'mt-10 mb-4'}>
+        <PageContentBlock>
             <FlashMessageRender byKey={'files:view'} className={'mb-4'}/>
             <FileManagerBreadcrumbs withinFileEditor={true} isNewFile={action !== 'edit'}/>
             <FileNameModal
@@ -104,6 +105,6 @@ export default () => {
                     </Can>
                 }
             </div>
-        </div>
+        </PageContentBlock>
     );
 };

resources/scripts/components/server/files/FileManagerContainer.tsx

@@ -12,6 +12,7 @@ import { FileObject } from '@/api/server/files/loadDirectory';
 import NewDirectoryButton from '@/components/server/files/NewDirectoryButton';
 import { Link } from 'react-router-dom';
 import Can from '@/components/elements/Can';
+import PageContentBlock from '@/components/elements/PageContentBlock';
 
 const sortFiles = (files: FileObject[]): FileObject[] => {
     return files.sort((a, b) => a.name.localeCompare(b.name))
@@ -38,7 +39,7 @@ export default () => {
     }, []);
 
     return (
-        <div className={'my-10 mb-6'}>
+        <PageContentBlock>
             <FlashMessageRender byKey={'files'} className={'mb-4'}/>
             <React.Fragment>
                 <FileManagerBreadcrumbs/>
@@ -92,6 +93,6 @@ export default () => {
                         </React.Fragment>
                 }
             </React.Fragment>
-        </div>
+        </PageContentBlock>
     );
 };

resources/scripts/components/server/schedules/ScheduleContainer.tsx

@@ -10,6 +10,7 @@ import EditScheduleModal from '@/components/server/schedules/EditScheduleModal';
 import Can from '@/components/elements/Can';
 import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
+import PageContentBlock from '@/components/elements/PageContentBlock';
 
 export default ({ match, history }: RouteComponentProps) => {
     const { uuid } = useServer();
@@ -32,7 +33,7 @@ export default ({ match, history }: RouteComponentProps) => {
     }, []);
 
     return (
-        <div className={'my-10 mb-6'}>
+        <PageContentBlock>
             <FlashMessageRender byKey={'schedules'} className={'mb-4'}/>
             {(!schedules.length && loading) ?
                 <Spinner size={'large'} centered={true}/>
@@ -76,6 +77,6 @@ export default ({ match, history }: RouteComponentProps) => {
                     </Can>
                 </>
             }
-        </div>
+        </PageContentBlock>
     );
 };

resources/scripts/components/server/schedules/ScheduleEditContainer.tsx

@@ -14,6 +14,7 @@ import Can from '@/components/elements/Can';
 import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
 import { ServerContext } from '@/state/server';
+import PageContentBlock from '@/components/elements/PageContentBlock';
 
 interface Params {
     id: string;
@@ -49,7 +50,7 @@ export default ({ match, history, location: { state } }: RouteComponentProps<Par
     }, [ match ]);
 
     return (
-        <div className={'my-10 mb-6'}>
+        <PageContentBlock>
             <FlashMessageRender byKey={'schedules'} className={'mb-4'}/>
             {!schedule || isLoading ?
                 <Spinner size={'large'} centered={true}/>
@@ -104,6 +105,6 @@ export default ({ match, history, location: { state } }: RouteComponentProps<Par
                     </div>
                 </>
             }
-        </div>
+        </PageContentBlock>
     );
 };

resources/scripts/components/server/settings/SettingsContainer.tsx

@@ -8,13 +8,14 @@ import RenameServerBox from '@/components/server/settings/RenameServerBox';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import Can from '@/components/elements/Can';
 import ReinstallServerBox from '@/components/server/settings/ReinstallServerBox';
+import PageContentBlock from '@/components/elements/PageContentBlock';
 
 export default () => {
     const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!);
     const server = ServerContext.useStoreState(state => state.server.data!);
 
     return (
-        <div className={'my-10 mb-6'}>
+        <PageContentBlock>
             <FlashMessageRender byKey={'settings'} className={'mb-4'}/>
             <div className={'md:flex'}>
                 <Can action={'file.sftp'}>
@@ -69,6 +70,6 @@ export default () => {
                     </Can>
                 </div>
             </div>
-        </div>
+        </PageContentBlock>
     );
 };

resources/scripts/components/server/users/UsersContainer.tsx

@@ -9,6 +9,7 @@ import FlashMessageRender from '@/components/FlashMessageRender';
 import getServerSubusers from '@/api/server/users/getServerSubusers';
 import { httpErrorToHuman } from '@/api/http';
 import Can from '@/components/elements/Can';
+import PageContentBlock from '@/components/elements/PageContentBlock';
 
 export default () => {
     const [ loading, setLoading ] = useState(true);
@@ -46,7 +47,7 @@ export default () => {
     }
 
     return (
-        <div className={'mt-10 mb-6'}>
+        <PageContentBlock>
             <FlashMessageRender byKey={'users'} className={'mb-4'}/>
             {!subusers.length ?
                 <p className={'text-center text-sm text-neutral-400'}>
@@ -62,6 +63,6 @@ export default () => {
                     <AddSubuserButton/>
                 </div>
             </Can>
-        </div>
+        </PageContentBlock>
     );
 };