From 0f5c531694b11c5fe15bb3b524d85de41dc45d74 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Fri, 2 Jul 2021 20:57:48 +0100
Subject: [PATCH] Fix modals with horizontal form components. Fix invite /
 friends menu having sidebars.

---
 src/components/ui/Modal.tsx                 |  5 +++++
 src/context/intermediate/modals/Input.tsx   | 16 +++++++++-------
 src/pages/RevoltApp.tsx                     |  5 +++--
 src/pages/settings/server/Panes.module.scss |  1 +
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 2faecdec..69265087 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -55,6 +55,11 @@ const ModalContent = styled.div<{ [key in 'attachment' | 'noBackground' | 'borde
         margin-top: 0;
     }
 
+    form {
+        display: flex;
+        flex-direction: column;
+    }
+
     ${ props => !props.noBackground && css`
         background: var(--secondary-header);
     ` }
diff --git a/src/context/intermediate/modals/Input.tsx b/src/context/intermediate/modals/Input.tsx
index fd8d44ec..f25b9921 100644
--- a/src/context/intermediate/modals/Input.tsx
+++ b/src/context/intermediate/modals/Input.tsx
@@ -54,13 +54,15 @@ export function InputModal({
             ]}
             onClose={onClose}
         >
-            { field ? <Overline error={error} block>
-                {field}
-            </Overline> : (error && <Overline error={error} type="error" block />) }
-            <InputBox
-                value={value}
-                onChange={e => setValue(e.currentTarget.value)}
-            />
+            <form>
+                { field ? <Overline error={error} block>
+                    {field}
+                </Overline> : (error && <Overline error={error} type="error" block />) }
+                <InputBox
+                    value={value}
+                    onChange={e => setValue(e.currentTarget.value)}
+                />
+            </form>
         </Modal>
     );
 }
diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx
index ad93f0c2..05846604 100644
--- a/src/pages/RevoltApp.tsx
+++ b/src/pages/RevoltApp.tsx
@@ -34,14 +34,15 @@ const Routes = styled.div`
 export default function App() {
     const path = useLocation().pathname;
     const fixedBottomNav = (path === '/' || path === '/settings' || path.startsWith("/friends"));
-    const inSettings = path === '/settings';
+    const inSettings = path.includes('/settings');
     const inChannel = path.includes('/channel');
+    const inSpecial = path.startsWith('/invite') || path.startsWith("/friends") || path.startsWith("/settings");
 
     return (
         <OverlappingPanels
             width="100vw"
             height="100vh"
-            leftPanel={inSettings ? undefined : { width: 292, component: <LeftSidebar /> }}
+            leftPanel={inSpecial ? undefined : { width: 292, component: <LeftSidebar /> }}
             rightPanel={(!inSettings && inChannel) ? { width: 240, component: <RightSidebar /> } : undefined}
             bottomNav={{
                 component: <BottomNavigation />,
diff --git a/src/pages/settings/server/Panes.module.scss b/src/pages/settings/server/Panes.module.scss
index cbf8e5a9..b34d3b78 100644
--- a/src/pages/settings/server/Panes.module.scss
+++ b/src/pages/settings/server/Panes.module.scss
@@ -81,6 +81,7 @@
     .overview {
         height: 85vh; //TOFIX change later
         display: flex;
+        
         .list {
             overflow-y: scroll;
         }