fix: remove scrollbar on x-axis in toc (#3008)

* fix: remove overflow x in toc

* fix: use useMemo

* fix: parsing /settings/integrations/slack

* fix: no transparency in firefox

* fix: remove debounced fn

app/components/Header.tsx

@@ -79,21 +79,25 @@ const Wrapper = styled(Flex)`
   position: sticky;
   top: 0;
   z-index: ${(props) => props.theme.depths.header};
-  background: ${(props) => transparentize(0.2, props.theme.background)};
+  background: ${(props) => props.theme.background};
   padding: 12px;
   transition: all 100ms ease-out;
   transform: translate3d(0, 0, 0);
-  backdrop-filter: blur(20px);
   min-height: 56px;
   justify-content: flex-start;
 
+  @supports (backdrop-filter: blur(20px)) {
+    backdrop-filter: blur(20px);
+    background: ${(props) => transparentize(0.2, props.theme.background)};
+  }
+
   @media print {
     display: none;
   }
 
   ${breakpoint("tablet")`
     padding: 16px 16px 0;
-    justify-content: "center";
+    justify-content: center;
   `};
 `;
 

app/scenes/Document/components/Contents.tsx

@@ -97,6 +97,7 @@ const Sticky = styled.div`
   box-shadow: 1px 0 0 ${(props) => props.theme.divider};
   margin-top: 40px;
   margin-right: 52px;
+  min-width: 204px;
   width: 204px;
   min-height: 40px;
   overflow-y: auto;
@@ -113,8 +114,6 @@ const Heading = styled.h3`
 const Empty = styled(HelpText)`
   margin: 1em 0 4em;
   padding-right: 2em;
-  min-width: 16em;
-  width: 16em;
   font-size: 14px;
 `;
 
@@ -142,8 +141,6 @@ const Link = styled.a`
 `;
 
 const List = styled.ol`
-  min-width: 14em;
-  width: 14em;
   padding: 0;
   list-style: none;
 `;

app/scenes/Settings/Features.tsx

@@ -1,4 +1,3 @@
-import { debounce } from "lodash";
 import { observer } from "mobx-react";
 import { BeakerIcon } from "outline-icons";
 import { useState } from "react";
@@ -21,24 +20,17 @@ function Features() {
     collaborativeEditing: team.collaborativeEditing,
   });
 
-  const showSuccessMessage = React.useCallback(
-    debounce(() => {
-      showToast(t("Settings saved"), {
-        type: "success",
-      });
-    }, 250),
-    [t, showToast]
-  );
-
   const handleChange = React.useCallback(
     async (ev: React.ChangeEvent<HTMLInputElement>) => {
       const newData = { ...data, [ev.target.name]: ev.target.checked };
       setData(newData);
 
       await auth.updateTeam(newData);
-      showSuccessMessage();
+      showToast(t("Settings saved"), {
+        type: "success",
+      });
     },
-    [auth, data, showSuccessMessage]
+    [auth, data, showToast, t]
   );
 
   return (

shared/utils/parseDocumentSlug.ts

@@ -11,5 +11,7 @@ export default function parseDocumentSlug(url: string) {
     }
   }
 
-  return parsed.replace(/^\/doc\//, "");
+  return parsed.lastIndexOf("/doc/") === 0
+    ? parsed.replace(/^\/doc\//, "")
+    : null;
 }