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