From 6893f9bfcdc858a17f2e7144967ba84917a7ff9f Mon Sep 17 00:00:00 2001
From: Oreo Oreoniv <28255085+zKoz210@users.noreply.github.com>
Date: Sat, 3 Oct 2020 21:21:09 +0300
Subject: [PATCH] Fixes for mobile responsiveness on the console page (#2411)

---
 .../components/server/ServerConsole.tsx       |  4 +-
 .../scripts/components/server/StatGraphs.tsx  | 40 ++++++++++---------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/resources/scripts/components/server/ServerConsole.tsx b/resources/scripts/components/server/ServerConsole.tsx
index 05470078a..edf10d130 100644
--- a/resources/scripts/components/server/ServerConsole.tsx
+++ b/resources/scripts/components/server/ServerConsole.tsx
@@ -65,7 +65,7 @@ export default () => {
 
     return (
         <ServerContentBlock title={'Console'} css={tw`flex flex-wrap`}>
-            <div css={tw`w-full md:w-1/4`}>
+            <div css={tw`w-full lg:w-1/4`}>
                 <TitledGreyBox css={tw`break-all`} title={name} icon={faServer}>
                     <p css={tw`text-xs uppercase`}>
                         <FontAwesomeIcon
@@ -138,7 +138,7 @@ export default () => {
                     </div>
                 }
             </div>
-            <div css={tw`w-full md:flex-1 md:ml-4 mt-4 md:mt-0`}>
+            <div css={tw`w-full lg:w-3/4 mt-4 lg:mt-0 lg:pl-4`}>
                 <SuspenseSpinner>
                     <ChunkedConsole/>
                     <ChunkedStatGraphs/>
diff --git a/resources/scripts/components/server/StatGraphs.tsx b/resources/scripts/components/server/StatGraphs.tsx
index 399b96724..725373b30 100644
--- a/resources/scripts/components/server/StatGraphs.tsx
+++ b/resources/scripts/components/server/StatGraphs.tsx
@@ -142,24 +142,28 @@ export default () => {
 
     return (
         <div css={tw`flex flex-wrap mt-4`}>
-            <TitledGreyBox title={'Memory usage'} icon={faMemory} css={tw`md:flex-1 w-full md:w-1/2 md:mr-2`}>
-                {status !== 'offline' ?
-                    <canvas id={'memory_chart'} ref={memoryRef} aria-label={'Server Memory Usage Graph'} role={'img'}/>
-                    :
-                    <p css={tw`text-xs text-neutral-400 text-center p-3`}>
-                        Server is offline.
-                    </p>
-                }
-            </TitledGreyBox>
-            <TitledGreyBox title={'CPU usage'} icon={faMicrochip} css={tw`md:flex-1 w-full md:w-1/2 md:ml-2 mt-4 md:mt-0`}>
-                {status !== 'offline' ?
-                    <canvas id={'cpu_chart'} ref={cpuRef} aria-label={'Server CPU Usage Graph'} role={'img'}/>
-                    :
-                    <p css={tw`text-xs text-neutral-400 text-center p-3`}>
-                        Server is offline.
-                    </p>
-                }
-            </TitledGreyBox>
+            <div css={tw`w-full sm:w-1/2`}>
+                <TitledGreyBox title={'Memory usage'} icon={faMemory} css={tw`mr-0 sm:mr-4`}>
+                    {status !== 'offline' ?
+                        <canvas id={'memory_chart'} ref={memoryRef} aria-label={'Server Memory Usage Graph'} role={'img'}/>
+                        :
+                        <p css={tw`text-xs text-neutral-400 text-center p-3`}>
+                            Server is offline.
+                        </p>
+                    }
+                </TitledGreyBox>
+            </div>
+            <div css={tw`w-full sm:w-1/2 mt-4 sm:mt-0`}>
+                <TitledGreyBox title={'CPU usage'} icon={faMicrochip} css={tw`ml-0 sm:ml-4`}>
+                    {status !== 'offline' ?
+                        <canvas id={'cpu_chart'} ref={cpuRef} aria-label={'Server CPU Usage Graph'} role={'img'}/>
+                        :
+                        <p css={tw`text-xs text-neutral-400 text-center p-3`}>
+                            Server is offline.
+                        </p>
+                    }
+                </TitledGreyBox>
+            </div>
         </div>
     );
 };