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

@@ -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>)}

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} />

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;
 }