diff --git a/app/components/CenteredContent.js b/app/components/CenteredContent.js
index aa79a6f7..0a868cc5 100644
--- a/app/components/CenteredContent.js
+++ b/app/components/CenteredContent.js
@@ -9,6 +9,7 @@ type Props = {
 
 const Container = styled.div`
   width: 100%;
+  max-width: 100vw;
   padding: 60px 20px;
 
   ${breakpoint("tablet")`
diff --git a/app/components/DocumentPreview/DocumentPreview.js b/app/components/DocumentPreview/DocumentPreview.js
index 5a800d62..c7447c4d 100644
--- a/app/components/DocumentPreview/DocumentPreview.js
+++ b/app/components/DocumentPreview/DocumentPreview.js
@@ -169,6 +169,7 @@ const DocumentLink = styled(Link)`
   border-radius: 8px;
   max-height: 50vh;
   min-width: 100%;
+  max-width: calc(100vw - 40px);
   overflow: hidden;
   position: relative;
 
diff --git a/app/components/DropdownMenu/DropdownMenu.js b/app/components/DropdownMenu/DropdownMenu.js
index 7b064b9a..d84939e6 100644
--- a/app/components/DropdownMenu/DropdownMenu.js
+++ b/app/components/DropdownMenu/DropdownMenu.js
@@ -232,7 +232,7 @@ const Label = styled(Flex).attrs({
   justify: "center",
   align: "center",
 })`
-  z-index: 1000;
+  z-index: ${(props) => props.theme.depths.menu};
   cursor: pointer;
 `;
 
@@ -244,7 +244,7 @@ const Position = styled.div`
   ${({ top }) => (top !== undefined ? `top: ${top}px` : "")};
   ${({ bottom }) => (bottom !== undefined ? `bottom: ${bottom}px` : "")};
   max-height: 75%;
-  z-index: 1000;
+  z-index: ${(props) => props.theme.depths.menu};
   transform: ${(props) =>
     props.position === "center" ? "translateX(-50%)" : "initial"};
   pointer-events: none;
diff --git a/app/components/LoadingIndicator/LoadingIndicatorBar.js b/app/components/LoadingIndicator/LoadingIndicatorBar.js
index e6b4b392..87c2f7aa 100644
--- a/app/components/LoadingIndicator/LoadingIndicatorBar.js
+++ b/app/components/LoadingIndicator/LoadingIndicatorBar.js
@@ -18,7 +18,7 @@ const loadingFrame = keyframes`
 const Container = styled.div`
   position: fixed;
   top: 0;
-  z-index: 9999;
+  z-index: ${(props) => props.theme.depths.loadingIndicatorBar};
 
   background-color: #03a9f4;
   width: 100%;
diff --git a/app/components/Modal.js b/app/components/Modal.js
index c4fe93df..c5f615b5 100644
--- a/app/components/Modal.js
+++ b/app/components/Modal.js
@@ -23,7 +23,7 @@ const GlobalStyles = createGlobalStyle`
   .ReactModal__Overlay {
     background-color: ${(props) =>
       transparentize(0.25, props.theme.background)} !important;
-    z-index: 100;
+    z-index: ${(props) => props.theme.depths.modalOverlay};
   }
 
   ${breakpoint("tablet")`
@@ -103,7 +103,7 @@ const StyledModal = styled(ReactModal)`
   left: 0;
   bottom: 0;
   right: 0;
-  z-index: 100;
+  z-index: ${(props) => props.theme.depths.modal};
   display: flex;
   justify-content: center;
   align-items: flex-start;
diff --git a/app/components/Popover.js b/app/components/Popover.js
index 7a68a8c0..ea008f11 100644
--- a/app/components/Popover.js
+++ b/app/components/Popover.js
@@ -22,7 +22,7 @@ const StyledPopover = styled(BoundlessPopover)`
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 9999;
+  z-index: ${(props) => props.theme.depths.popover};
 
   svg {
     height: 16px;
diff --git a/app/components/Sidebar/Sidebar.js b/app/components/Sidebar/Sidebar.js
index 01f12559..c26c7dcd 100644
--- a/app/components/Sidebar/Sidebar.js
+++ b/app/components/Sidebar/Sidebar.js
@@ -71,7 +71,7 @@ const Container = styled(Flex)`
   transition: left 100ms ease-out,
     ${(props) => props.theme.backgroundTransition};
   margin-left: ${(props) => (props.mobileSidebarVisible ? 0 : "-100%")};
-  z-index: 1000;
+  z-index: ${(props) => props.theme.depths.sidebar};
 
   @media print {
     display: none;
diff --git a/app/components/Tabs.js b/app/components/Tabs.js
index 4abc3c8d..3ee58b49 100644
--- a/app/components/Tabs.js
+++ b/app/components/Tabs.js
@@ -6,6 +6,8 @@ const Tabs = styled.nav`
   border-bottom: 1px solid ${(props) => props.theme.divider};
   margin-top: 22px;
   margin-bottom: 12px;
+  overflow-y: auto;
+  white-space: nowrap;
 `;
 
 export const Separator = styled.span`
diff --git a/app/components/Toasts/Toasts.js b/app/components/Toasts/Toasts.js
index 2daa6c03..79259989 100644
--- a/app/components/Toasts/Toasts.js
+++ b/app/components/Toasts/Toasts.js
@@ -34,7 +34,7 @@ const List = styled.ol`
   list-style: none;
   margin: 0;
   padding: 0;
-  z-index: 1000;
+  z-index: ${(props) => props.theme.depths.toasts};
 `;
 
 export default inject("ui")(Toasts);
diff --git a/app/scenes/Search/Search.js b/app/scenes/Search/Search.js
index 55cd3305..6181fe83 100644
--- a/app/scenes/Search/Search.js
+++ b/app/scenes/Search/Search.js
@@ -12,6 +12,7 @@ import { withRouter, Link } from "react-router-dom";
 import type { RouterHistory, Match } from "react-router-dom";
 import { Waypoint } from "react-waypoint";
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 
 import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
 import DocumentsStore from "stores/DocumentsStore";
@@ -387,6 +388,12 @@ const Filters = styled(Flex)`
   margin-bottom: 12px;
   opacity: 0.85;
   transition: opacity 100ms ease-in-out;
+  overflow-y: auto;
+  padding: 8px 0;
+
+  ${breakpoint("tablet")`	
+    padding: 0;
+  `};
 
   &:hover {
     opacity: 1;
diff --git a/app/stores/UiStore.js b/app/stores/UiStore.js
index 700980c5..676dbb99 100644
--- a/app/stores/UiStore.js
+++ b/app/stores/UiStore.js
@@ -32,16 +32,18 @@ class UiStore {
     }
 
     // system theme listeners
-    const colorSchemeQueryList = window.matchMedia(
-      "(prefers-color-scheme: dark)"
-    );
+    if (window.matchMedia) {
+      const colorSchemeQueryList = window.matchMedia(
+        "(prefers-color-scheme: dark)"
+      );
 
-    const setSystemTheme = (event) => {
-      this.systemTheme = event.matches ? "dark" : "light";
-    };
-    setSystemTheme(colorSchemeQueryList);
-    if (colorSchemeQueryList.addListener) {
-      colorSchemeQueryList.addListener(setSystemTheme);
+      const setSystemTheme = (event) => {
+        this.systemTheme = event.matches ? "dark" : "light";
+      };
+      setSystemTheme(colorSchemeQueryList);
+      if (colorSchemeQueryList.addListener) {
+        colorSchemeQueryList.addListener(setSystemTheme);
+      }
     }
 
     // persisted keys
diff --git a/shared/styles/theme.js b/shared/styles/theme.js
index 1ac4d3ff..6e921dd2 100644
--- a/shared/styles/theme.js
+++ b/shared/styles/theme.js
@@ -101,6 +101,16 @@ export const base = {
     desktop: 1025, // targeting devices that are larger than the iPad (which is 1024px in landscape mode)
     desktopLarge: 1600,
   },
+
+  depths: {
+    sidebar: 1000,
+    modalOverlay: 2000,
+    modal: 3000,
+    menu: 4000,
+    toasts: 5000,
+    loadingIndicatorBar: 6000,
+    popover: 9000,
+  },
 };
 
 export const light = {