From 4126b94f7c8ea70c883767a66663c7698d5b5351 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Wed, 3 Jun 2026 23:52:18 -0400 Subject: [PATCH] fix: Add gap between search input and New doc button on mobile (#12578) Co-authored-by: Claude --- app/components/InputSearchPage.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/components/InputSearchPage.tsx b/app/components/InputSearchPage.tsx index 6e898de5e9..d73601bb36 100644 --- a/app/components/InputSearchPage.tsx +++ b/app/components/InputSearchPage.tsx @@ -4,6 +4,7 @@ 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, @@ -117,6 +118,12 @@ function InputSearchPage({ const InputMaxWidth = styled(Input).attrs({ round: true })` max-width: min(calc(30vw + 20px), 100%); + + /* On mobile the input grows to fill the header, so add a gap before the + * adjacent action button (e.g. "New doc"). */ + ${breakpoint("mobile", "tablet")` + margin-inline-end: 8px; + `} `; const Shortcut = styled.span<{ $visible: boolean }>`