From 2a0ae128291ed2bdcf635f9a522e412e93dc9767 Mon Sep 17 00:00:00 2001
From: Hornwitser <github@hornwitser.no>
Date: Sun, 8 Nov 2020 20:02:59 +0100
Subject: [PATCH] Improve the responsiveness of the web interface

Set breakpoint for the sidebar so that it hides by default when the page
width is too small to show it with the content and keep the width of the
content constant on small screens while sliding the sidebar out to
prevent it getting crushed.
---
 packages/web_ui/src/components/PageLayout.jsx |  2 +-
 packages/web_ui/src/components/SiteLayout.jsx |  5 +--
 packages/web_ui/src/index.css                 | 32 +++++++++++++++++++
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/packages/web_ui/src/components/PageLayout.jsx b/packages/web_ui/src/components/PageLayout.jsx
index dda21b32..f4373d32 100644
--- a/packages/web_ui/src/components/PageLayout.jsx
+++ b/packages/web_ui/src/components/PageLayout.jsx
@@ -6,7 +6,7 @@ const { Content } = Layout;
 
 export default function PageLayout(props) {
 	return <>
-		<Breadcrumb style={{ margin: "16px 0 16px 28px" }}>
+		<Breadcrumb className="site-breadcrumb">
 			{props.nav.map((part, index) => <Breadcrumb.Item key={index}>
 				{part.path ? <Link to={part.path}>{part.name}</Link> : part.name}
 			</Breadcrumb.Item>)}
diff --git a/packages/web_ui/src/components/SiteLayout.jsx b/packages/web_ui/src/components/SiteLayout.jsx
index 88756b87..d82ef9e5 100644
--- a/packages/web_ui/src/components/SiteLayout.jsx
+++ b/packages/web_ui/src/components/SiteLayout.jsx
@@ -48,10 +48,11 @@ export default function SiteLayout(props) {
 				<Menu.Item key="1">Dashboard</Menu.Item>
 			</Menu>
 		</Header>
-		<Layout>
+		<Layout className="site-layout">
 			<Sider
 				collapsible
 				collapsedWidth={0}
+				breakpoint="md"
 				zeroWidthTriggerStyle={{ top: 6, zIndex: -1 }}
 				width={250}
 				className="site-layout-sider"
@@ -65,7 +66,7 @@ export default function SiteLayout(props) {
 					{sidebar.map(({name, path}) => <Menu.Item key={path}>{name}</Menu.Item>)}
 				</Menu>
 			</Sider>
-			<Layout style={{ padding: "0 24px 24px" }}>
+			<Layout className="site-layout-content-container">
 				<Switch>
 					{sidebar.map(({path, content}) => <Route exact path={path} key={path}>
 						<SetSidebar path={path} />
diff --git a/packages/web_ui/src/index.css b/packages/web_ui/src/index.css
index 692bef64..246613cb 100644
--- a/packages/web_ui/src/index.css
+++ b/packages/web_ui/src/index.css
@@ -26,6 +26,38 @@ body {
 	flex-grow: 0;
 }
 
+.site-layout {
+	overflow-x: hidden;
+}
+
+.site-layout-content-container {
+	min-width: 100%;
+}
+
+.site-breadcrumb {
+	margin: 16px 0 16px 52px;
+}
+
+@media (min-width: 576px) {
+	.site-layout-content-container {
+		padding: 0 24px 24px;
+	}
+
+	.site-breadcrumb {
+		margin-left: 28px;
+	}
+}
+
+@media (min-width: 768px) {
+	.site-layout {
+		overflow-x: initial;
+	}
+
+	.site-layout-content-container {
+		min-width: initial;
+	}
+}
+
 .site-layout-sider {
 	z-index: 0;
 }