Various fixes (#12121)

app/actions/definitions/documents.tsx

@@ -39,6 +39,7 @@ import { toast } from "sonner";
 import Icon from "@shared/components/Icon";
 import type { NavigationNode } from "@shared/types";
 import { ExportContentType, TeamPreference } from "@shared/types";
+import { isMobile } from "@shared/utils/browser";
 import { getEventFiles } from "@shared/utils/files";
 import { Week } from "@shared/utils/time";
 import type UserMembership from "~/models/UserMembership";
@@ -969,7 +970,11 @@ export const openDocumentInDesktop = createAction({
     }
     const document = stores.documents.get(activeDocumentId);
     return (
-      isCloudHosted && (isMac || isWindows) && !!document && !document.isDeleted
+      isCloudHosted &&
+      (isMac || isWindows) &&
+      !!document &&
+      !document.isDeleted &&
+      !isMobile()
     );
   },
   perform: ({ activeDocumentId, stores }) => {
@@ -988,7 +993,7 @@ export const presentDocument = createAction({
   section: ActiveDocumentSection,
   icon: <EmbedIcon />,
   shortcut: ["Control+Alt+KeyP"],
-  visible: ({ activeDocumentId }) => !!activeDocumentId,
+  visible: ({ activeDocumentId }) => !!activeDocumentId && !isMobile(),
   perform: ({ activeDocumentId, stores }) => {
     if (stores.ui.presentationData) {
       stores.ui.setPresentingDocument(null);

app/components/Header.tsx

@@ -116,9 +116,14 @@ function Header(
 const Breadcrumbs = styled("div")`
   flex-grow: 1;
   flex-basis: 0;
+  min-width: 0;
   align-items: center;
   padding-inline: 0 8px;
   display: flex;
+
+  ${breakpoint("tablet")`
+    min-width: auto;
+  `};
 `;
 
 const Actions = styled(Flex)`

app/components/Heading.ts

@@ -1,11 +1,16 @@
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 
 const Heading = styled.h1<{ as?: string; centered?: boolean }>`
   display: flex;
   align-items: center;
   user-select: none;
-  ${(props) => (props.as ? "" : "margin-top: 6vh; font-weight: 600;")}
+  ${(props) => (props.as ? "" : "margin-top: 3vh; font-weight: 600;")}
   ${(props) => (props.centered ? "text-align: center;" : "")}
+
+  ${breakpoint("tablet")`
+    ${(props: { as?: string }) => (props.as ? "" : "margin-top: 6vh;")}
+  `};
 `;
 
 export default Heading;

app/components/InputSearchPage.tsx

@@ -4,7 +4,6 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
-import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
 import {
   isModKey,
@@ -13,6 +12,7 @@ import {
 } from "@shared/utils/keyboard";
 import useBoolean from "~/hooks/useBoolean";
 import useKeyDown from "~/hooks/useKeyDown";
+import useMobile from "~/hooks/useMobile";
 import { searchPath } from "~/utils/routeHelpers";
 import Input from "./Input";
 
@@ -48,6 +48,7 @@ function InputSearchPage({
   const theme = useTheme();
   const history = useHistory();
   const { t } = useTranslation();
+  const isMobile = useMobile();
   const [isFocused, setFocused, setUnfocused] = useBoolean(false);
 
   useKeyDown("f", (ev: KeyboardEvent) => {
@@ -104,10 +105,12 @@ function InputSearchPage({
       margin={0}
       labelHidden
     >
-      <Shortcut $visible={!isFocused && !value && !collectionId}>
-        {metaDisplay}
-        {shortcutSeparator}K
-      </Shortcut>
+      {!isMobile && (
+        <Shortcut $visible={!isFocused && !value && !collectionId}>
+          {metaDisplay}
+          {shortcutSeparator}K
+        </Shortcut>
+      )}
     </InputMaxWidth>
   );
 }
@@ -117,7 +120,6 @@ const InputMaxWidth = styled(Input).attrs({ round: true })`
 `;
 
 const Shortcut = styled.span<{ $visible: boolean }>`
-  display: none;
   flex-shrink: 0;
   font-size: 13px;
   color: ${s("textTertiary")};
@@ -125,10 +127,6 @@ const Shortcut = styled.span<{ $visible: boolean }>`
   pointer-events: none;
   opacity: ${(props) => (props.$visible ? 1 : 0)};
   transition: opacity 100ms ease-in-out;
-
-  ${breakpoint("tablet")`
-    display: inline;
-  `};
 `;
 
 export default observer(InputSearchPage);

app/components/Sidebar/Sidebar.tsx

@@ -335,8 +335,8 @@ const Container = styled(Flex)<ContainerProps>`
   background: ${s("sidebarBackground")};
   transition:
     box-shadow 150ms ease-in-out,
-    transform 150ms
-      ease-out${(props: ContainerProps) =>
+    transform 250ms cubic-bezier(0.34, 1.15, 0.64, 1)
+      ${(props: ContainerProps) =>
         props.$isAnimating ? `, width ${ANIMATION_MS}ms ease-out` : ""};
   transform: translateX(
     ${(props) => (props.$mobileSidebarVisible ? 0 : "-100%")}
@@ -379,6 +379,10 @@ const Container = styled(Flex)<ContainerProps>`
     z-index: ${depths.sidebar};
     margin: 0;
     min-width: 0;
+    transition:
+      box-shadow 150ms ease-in-out,
+      transform 150ms ease-out${(props: ContainerProps) =>
+        props.$isAnimating ? `, width ${ANIMATION_MS}ms ease-out` : ""};
     transform: translateX(${(props: ContainerProps) =>
       props.$collapsed
         ? `calc(-100% + ${Desktop.hasInsetTitlebar() ? 8 : 16}px)`

app/components/Tab.tsx

@@ -3,7 +3,8 @@ import type { LocationDescriptor } from "history";
 import isEqual from "lodash/isEqual";
 import queryString from "query-string";
 import * as React from "react";
-import styled, { useTheme } from "styled-components";
+import styled, { css, useTheme } from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import { s, hover } from "@shared/styles";
 import NavLink from "~/components/NavLink";
 
@@ -46,7 +47,7 @@ interface ButtonProps extends BaseProps {
 
 type Props = LinkProps | ButtonProps;
 
-const tabStyles = `
+const tabStyles = css`
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -54,7 +55,11 @@ const tabStyles = `
   font-size: 14px;
   cursor: var(--pointer);
   user-select: none;
-  padding: 6px 0;
+  padding: 12px 0;
+
+  ${breakpoint("tablet")`
+    padding: 6px 0;
+  `};
 `;
 
 const TabLink = styled(NavLink)`

app/scenes/Document/components/DocumentTitle.tsx

@@ -297,7 +297,7 @@ const StyledIconPicker = styled(IconPicker)`
 const Title = styled(ContentEditable)<TitleProps>`
   position: relative;
   line-height: ${lineHeight};
-  margin-top: 10vh;
+  margin-top: 3vh;
   margin-bottom: 0.5em;
   font-size: ${fontSize};
   font-weight: 600;