From 276ae71a91e94c219c6c3aa1d092a68984992e6f Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Mon, 20 Apr 2026 19:34:16 -0400 Subject: [PATCH] Various fixes (#12121) --- app/actions/definitions/documents.tsx | 9 +++++++-- app/components/Header.tsx | 5 +++++ app/components/Heading.ts | 7 ++++++- app/components/InputSearchPage.tsx | 18 ++++++++---------- app/components/Sidebar/Sidebar.tsx | 8 ++++++-- app/components/Tab.tsx | 11 ++++++++--- .../Document/components/DocumentTitle.tsx | 2 +- 7 files changed, 41 insertions(+), 19 deletions(-) diff --git a/app/actions/definitions/documents.tsx b/app/actions/definitions/documents.tsx index 1ee4e4c375..c078301700 100644 --- a/app/actions/definitions/documents.tsx +++ b/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: , shortcut: ["Control+Alt+KeyP"], - visible: ({ activeDocumentId }) => !!activeDocumentId, + visible: ({ activeDocumentId }) => !!activeDocumentId && !isMobile(), perform: ({ activeDocumentId, stores }) => { if (stores.ui.presentationData) { stores.ui.setPresentingDocument(null); diff --git a/app/components/Header.tsx b/app/components/Header.tsx index 9ea5388079..aa8d1505a3 100644 --- a/app/components/Header.tsx +++ b/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)` diff --git a/app/components/Heading.ts b/app/components/Heading.ts index d3faff06e9..0221ae11b8 100644 --- a/app/components/Heading.ts +++ b/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; diff --git a/app/components/InputSearchPage.tsx b/app/components/InputSearchPage.tsx index 0721c7af7a..6e898de5e9 100644 --- a/app/components/InputSearchPage.tsx +++ b/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 > - - {metaDisplay} - {shortcutSeparator}K - + {!isMobile && ( + + {metaDisplay} + {shortcutSeparator}K + + )} ); } @@ -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); diff --git a/app/components/Sidebar/Sidebar.tsx b/app/components/Sidebar/Sidebar.tsx index 865dc86785..83f57e912d 100644 --- a/app/components/Sidebar/Sidebar.tsx +++ b/app/components/Sidebar/Sidebar.tsx @@ -335,8 +335,8 @@ const Container = styled(Flex)` 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)` 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)` diff --git a/app/components/Tab.tsx b/app/components/Tab.tsx index d5eecaa406..6d872fddc1 100644 --- a/app/components/Tab.tsx +++ b/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)` diff --git a/app/scenes/Document/components/DocumentTitle.tsx b/app/scenes/Document/components/DocumentTitle.tsx index 99754cd703..1efd36b368 100644 --- a/app/scenes/Document/components/DocumentTitle.tsx +++ b/app/scenes/Document/components/DocumentTitle.tsx @@ -297,7 +297,7 @@ const StyledIconPicker = styled(IconPicker)` const Title = styled(ContentEditable)` position: relative; line-height: ${lineHeight}; - margin-top: 10vh; + margin-top: 3vh; margin-bottom: 0.5em; font-size: ${fontSize}; font-weight: 600;